<!--账单-->
<template>
  <div>
    <van-sticky>
      <div class="dropdown-menu">
        <ul>
          <li>
            <div @click="opendropdown_1(0)">
              <div class="dropdowntext">{{indexDate}}</div>
              <img :src="num==0?jt1:jt2" />
            </div>
            <ChooseDateAlert @confirm="getdateData" @cancel="getCancle" :onshow="onshow"></ChooseDateAlert>
          </li>

          <li @click="opendropdown(false,1,$event)">
            <div>
              <div class="dropdowntext">{{status}}</div>
              <img :src="num==1?jt1:jt2" />
            </div>

            <div class="dropdown-item-down" ref="dropdown">
              <div class="overlay"></div>
              <ul>
                <li
                  v-for="(item, index) in  statusTips"
                  :key="index"
                  @click="link(false,index,item)"
                  ref="status"
                  :style="{color:item.check?'#97bdfd':'#999'}"
                >{{item.text}}</li>
              </ul>
            </div>
          </li>
          <li @click="opendropdown(true,2,$event)">
            <div>
              <div class="dropdowntext">{{type}}</div>
              <img :src="num==2?jt1:jt2" />
            </div>

            <div class="dropdown-item-down down-2" ref="dropdown_2">
              <div class="overlay"></div>
              <ul>
                <li
                  v-for="(item, index) in typeTips"
                  :key="index"
                  @click="link(true,index,item)"
                  ref="type"
                  :style="{color:item.check?'#97bdfd':'#999'}"
                >{{item.text}}</li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </van-sticky>
    <div class="recentincome">
      <div class="rec_body">
        <ul>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="GetDoctorProfitList"
          >
            <li
              v-for="(item,index) in  UserData"
              :key="index"
              @click="jumpToDetail(item.id,item.type)"
            >
              <a href="#">
                <img :src="item.sceneIcon" />
              </a>

              <div>
                <p>{{typeTips[item.type]['text']}}</p>
                <p>{{item.orderCode|ellipsis}}</p>
                <p>{{item.createTime |compatibleDate}}</p>
              </div>
              <div>
                <p class="price_red">+{{item.price | getPrice }}</p>
                <p>{{statusTips[item.status]['text']}}</p>
              </div>
            </li>
          </van-list>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import ChooseDateAlert from "./../doctorComponents/ChooseDateAlert"; //选择日期弹窗
export default {
  components: { ChooseDateAlert },
    filters: {
      ellipsis (value) {
        if (!value) return ''
        if (value.length > 20) {
          return value.slice(0,20) + '...'
        }
        return value
      }
    },
  data() {
    return {
      onshow: false, //弹窗
      drapshow: false, //下拉菜单
      type: "场景",
      status: "状态",
      loadingfinsh: true,
      collectstatus: [],
      collecttype: [],
      statusflag: true,
      typeflag: true,
      cunstatus: [],
      current_year: "",
      current_month: "",
      list: [],
      loading: false,
      finished: false,
      option1: [
        { text: "已入账", value: "1" },
        { text: "待入账", value: "2" },
        { text: "已提现", value: "3" },
        { text: "提现中", value: "4" },
        { text: "已取消", value: "5" }
      ],
      option2: [
        { text: "在线问诊", value: "1" },
        { text: "处方购药", value: "2" }
      ],
      jt1: require("@/assets/images/profit/jt2.png"),
      jt2: require("@/assets/images/profit/jt1.png"),
      num: null,
      currentDate: new Date(),
      // indexDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
      indexDate: this.$route.query.date || [],
      UserData: [],
      page: {
        pageIndex: 1,
        pageSize: 10
      },
      statusTips: {
        1: { text: "已入账", check: false },
        2: { text: "待入账", check: false },
        3: { text: "已取消", check: false },
        4: { text: "已提现", check: false },
        5: { text: "提现中", check: false },
        6: { text: "已扣除", check: false }
      },
      //类型
      typeTips: {
        1: { text: "在线问诊", check: false },
        2: { text: "处方购药", check: false },
        3: { text: "下级利润", check: false },
        4: { text: "销售额达标利润", check: false }
      },
      typeImg: [
        require("@/assets/images/profit/type_1.png"),
        require("@/assets/images/profit/type_2.png"),
        require("@/assets/images/profit/type_3.png")
      ],
      flag: false,
      routertype: "" //路由传过来的type
    };
  },
  created() {
    this.indexDate = this.$route.query.date;
    // this.routertype = this.$route.query.Type;
    // this.collecttype = [this.routertype];
    // this.GetDoctorProfitList();
  },
  mounted() {
    this.title = `${this.currentDate.getFullYear()}-${this.currentDate.getMonth() +
      1}`;
  },
  methods: {
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    },
    open() {
      this.$nextTick(_ => {
        setTimeout(
          _ => (
            (document.querySelector(".van-overlay").style.position = "fixed"),
            (this.onshow = !this.onshow)
          ),
          4
        );
      });
    },
    jumpto(id) {
      this.$router.push({ path: "/profitInfo", query: { id: id } });
    },
    getdateData(data) {
      var { currentDate, show } = data;
      this.indexDate = `${currentDate.getFullYear()}-${currentDate.getMonth() +
        1}`;
      this.onshow = false;
      this.UserData = [];
      this.page.pageIndex = 1;
      this.GetDoctorProfitList();
    },
    getCancle(data) {
      console.log(data);

      var { show } = data;
      this.onshow = false;
    },

    GetDoctorProfitList() {
      this.routertype = "";
      var obj = {
        time: this.indexDate,
        status: this.collectstatus,
        type: this.collecttype,
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize
      };
      this.LJ_LOADING();
      this.$http.GetDoctorProfitList(obj).then(res => {
        this.$toast.clear();

        if (res.data.success==1) {
          console.log(res);
          this.loading = false;
          this.UserData = [...this.UserData, ...res.data.items];
          // 全部加载完成;
          if (this.UserData.length == res.data.totalCount) {
            this.finished = true;
          }
          this.page.pageIndex++;
        } else {
          this.$toast(res.data.message);
        }
      });

      // this.UserData = new Array();
    },
    jumpToDetail(id, type) {
      this.$router.push({
        path: "/profitInfo",
        query: { id, type }
      });
    },
    opendropdown(yes, number, e) {
      if (this.flag) return;
      this.flag = true;

      this.drapshow = !this.drapshow;
      if (this.drapshow) {
        this.num = number;
        if (yes) {
          this.$refs.dropdown_2.style.display = "block";

          setTimeout(() => {
            this.$refs.dropdown_2.style.height = "100%";
            setTimeout(() => {
              this.flag = false;
            }, 100);
          }, 500);
        } else {
          this.$refs.dropdown.style.display = "block";
          setTimeout(() => {
            this.$refs.dropdown.style.height = "100%";
            setTimeout(() => {
              this.flag = false;
            }, 100);
          }, 500);
        }
      } else {
        this.num = null;
        if (yes) {
          this.$refs.dropdown_2.style.height = "0rem";
          setTimeout(() => {
            this.$refs.dropdown_2.style.display = "none";
            setTimeout(() => {
              this.flag = false;
            }, 100);
          }, 500);
        } else {
          this.$refs.dropdown.style.height = "0rem";
          setTimeout(() => {
            this.$refs.dropdown.style.display = "none";
            setTimeout(() => {
              this.flag = false;
            }, 100);
          }, 500);
        }
      }
    },
    opendropdown_1(number) {
      this.onshow = true;
      this.num = number;
    },

    link(yes, index, item) {
      if (yes) {
        item.check = !item.check;
        if (this.collecttype.length) {
          if (this.collecttype.find(v => v == index)) {
            // this.$refs.type[index].style.color = "#999999";
            // 删除
            this.collecttype.splice(
              this.collecttype.findIndex(v => v == index),
              1
            );
          } else {
            //[0,1]
            // 新增
            // this.$refs.type[index].style.color = "#97bdfd";
            this.collecttype.push(index);
            this.type = item.text;
          }
        } else {
          this.collecttype.push(index);
          this.type = item.text;
        }
      } else {
        item.check = !item.check;
        if (this.collectstatus.length) {
          if (this.collectstatus.find(v => v == index)) {
            // this.$refs.type[index].style.color = "#999999";
            // 删除
            this.collectstatus.splice(
              this.collectstatus.findIndex(v => v == index),
              1
            );
          } else {
            //[0,1]
            // 新增
            // this.$refs.type[index].style.color = "#97bdfd";
            this.collectstatus.push(index);
            this.status = item.text;
          }
        } else {
          this.collectstatus.push(index);
          this.status = item.text;
        }
      }
      this.UserData = [];
      this.page.pageIndex = 1;
      this.GetDoctorProfitList();
    }
  },
  watch: {
    collectstatus(newVlaue) {
      if (newVlaue.length <= 0) {
        this.status = "状态";
      } else if (newVlaue.length > 1) {
        this.status = "已多选";
      } else {
        this.status = this.statusTips[newVlaue[0]].text;
      }
    },
    collecttype(newVlaue) {
      if (newVlaue.length <= 0) {
        this.type = "场景";
      } else if (newVlaue.length >= 2) {
        this.type = "已多选";
      } else {
        this.type = this.typeTips[newVlaue[0]].text;
      }
    }
  }
};
</script>
<style scoped lang='less'>
/deep/ .van-dropdown-menu__title::after {
  color: #478bfb;
}
/deep/.van-picker__toolbar {
  display: none;
}
/deep/ .van-dropdown-item__content {
  border-radius: 0 0 0.2rem 0.2rem;
}
/deep/ .van-picker-column__item--selected {
  color: @baseBlue;
}
/deep/ .van-dropdown-item__option {
  color: #b9b9b9;
}
/deep/ .van-dropdown-item__option--active {
  color: #1989fa;
}
.ellips2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@graycolor: #b9b9b9;
.overlay {
  z-index: 21;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  // position: fixed;
  position: absolute;
  top: 1rem;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.dropdown-menu {
  border-top: 0.01rem solid #f0f1f2;
  box-shadow: 0 0.02rem 0.01rem 0.01rem #478bfb21;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  z-index: 20;
  overflow: hidden;
  // position: fixed;
  top: 0;
  display: flex;
  top: 0;
  left: 0;
  background-color: #fff;
  > ul {
    .flex();
    z-index: 11;
    width: 62%;
    > li {
      width: 33%;
      text-align: center;
      font-size: 0.3rem;
      // > div {
      //   display: flex;
      //   flex-flow: row nowrap;
      //   justify-content: center;
      //   align-items: center;
      // }
      img {
        width: 0.3rem;
        height: 0.3rem;
        object-fit: contain;
        padding-top: 0.1rem;
      }
    }
  }
  .dropdown-item-down {
    display: none;
    width: 100%;
    position: fixed;
    height: 0;
    right: 0;
    top: 1rem;
    left: 0;
    z-index: 10;
    overflow: hidden;
    transition: all 0.5s;

    > ul {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #fff;
      z-index: 22;
      height: 6rem;
      border-radius: 0 0 0.25rem 0.25rem;
      li {
        width: 80%;
        margin: 0 auto;
        text-align: left;
        font-size: 0.28rem;
        color: @graycolor;
        border-bottom: 0.01rem solid #f2f2f2;
      }
    }
  }
}
.flex-col {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}
.flex {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
@baseBlue: #478bfb;
@boxShadow: 0rem 0.01rem 0.1rem 0rem #00000026;
@graycolor: #999999;
@xiancolor: #f1f1f1;
@bordercolor: #c7dbfd;
.blueborder {
  width: 6rem;
  height: 0.94rem;
  border-top: 0.01rem solid @bordercolor;
  border-bottom: 0.01rem solid @bordercolor;
  position: absolute;
  top: 50%;
  margin-top: -0.475rem;
  left: 50%;
  margin-left: -3rem;
}

.recentincome {
  width: 6.5rem;
  margin: 0 auto;
  .rec_header {
    .flex();
    p {
      font-size: 0.35rem;
    }
    div {
      color: @graycolor;
      font-size: 0.25rem;
    }
  }
  .rec_body {
    ul {
      .flex-col();

      li {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem 0;
        border-bottom: 0.01rem solid @xiancolor;
        > a {
          width: 1.14rem;
          height: 1.12rem;
          border-radius: 0.25rem;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 50%;
          }
        }
        > div:nth-child(2) {
          width: 2.8rem;
          .flex-col();
          p {
            color: @graycolor;
            text-align: left;
            margin: 0.1rem 0;
          }
          p:first-child {
            font-size: 0.35rem;
            color: #000;
          }
        }
        > div:nth-child(3) {
          width: 1.35rem;
          display: flex;
          flex-flow: column nowrap;
          align-items: center;
          justify-content: center;
          p {
            font-size: 0.28rem;
            margin: 0.1rem 0;
          }
          .price_red {
            color: red;
            font-size: 0.35rem;
          }
        }
      }
    }
  }
}
.dropdowntext {
  display: inline;
  width: 90%;
  overflow: hidden;
}
.down-2 {
  > ul {
    min-height: 2rem !important;
  }
}
</style>