<template>
  <div class="home">
    <nav-bar url="/member"></nav-bar>
    <div class="bj"></div>
    <div class="lxr" @click="handleCardSelect">
      <div class="lxrr" v-if="card && card.id">
        <h2>
          {{ card.name }}
          <p>卡号：{{ card.cardNo }}</p>
        </h2>
        <h3>
          <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
        </h3>
      </div>
      <van-contact-card type="add" add-text="请选择就诊人" v-else />
    </div>
    <div style="margin-bottom:10px;">
      <van-cell
        title="时段查询"
        :value="startTime | timeFilter(endTime)"
        @click="show = true"

        is-link
      />
      <van-calendar
        v-model="show"
        type="range"
        @confirm="onConfirm"
        :show-subtitle ="false"
        :allow-same-day="true"
        :default-date="dateTime"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </div>
    <van-collapse v-model="activeSelect" accordion v-if="list.length>0">
      <van-collapse-item
        :title="item.DEPT_NAME+' / '+item.VISIT_DATE"
        :name="index"
        v-for="(item,index) in list"
        :key="index"
      >
        <ul>
          <li>
            <span>就诊用户：</span>
            {{item.PATIENT_NAME}}
          </li>
          <li>
            <span>就诊用户性别：</span>
            {{item.GENDER}}
          </li>
          <li>
            <span>就诊用户地址：</span>
            {{item.PATIENT_ADDRESS}}
          </li>
          <li>
            <span>诊断时间：</span>
            {{item.VISIT_DATE}}
          </li>
          <li>
            <span>诊断科室：</span>
            {{item.DEPT_NAME}}
          </li>
          <li>
            <span>门诊号：</span>
            {{item.OUTPATIENT_NO}}
          </li>
          <!-- <li>
            <span>票据号：</span>
            {{item.RECEIPT_NO}}
          </li>
          <li>
            <span>订单号：</span>
            {{item.ORDER_NO}}
          </li>
          <li>
            <span>个人现金支付金额：</span>
            {{item.PERSONAL_PAY}}
          </li>
          <li>
            <span>账户支付金额：</span>
            {{item.ACCOUNT_PAY}}
          </li> -->
          <li>
            <span>总金额：</span>
            {{item.ACCOUNT_SUM}}
          </li>
          <li>
            <span>结算日期：</span>
            {{item.SETTLEMENT_DATE}}
          </li>
        </ul>
      </van-collapse-item>
    </van-collapse>
    <van-empty description="暂无信息" v-else style="padding-top:90px" />
    <!-- <div class="search">
      <div class="container">
        <router-link to="search"
          ><img src="../assets/search1.png" />输入搜索关键词</router-link
        >
      </div>
    </div>

    <van-tabs class="order_tab">
      <van-tab v-for="item in list" :key="item.tit">
        <template #title>
          {{ item.tit }}
        </template>
        <ul>
          <li v-for="xzks in item.list" :key="xzks.index">
            <van-cell
              :title="xzks.bt"
              :label="xzks.time"
              is-link
              :to="xzks.url"
            />
          </li>
        </ul>
      </van-tab>
    </van-tabs>-->
  </div>
</template>

<script>
import { apiUserCardList, apiQueryOutpfeeMasterInfo } from "@/request/api.js";
import { timestampToTime } from "@/utils/utils.js";
import { Toast, Empty, Calendar } from "vant";
export default {
  mounted() {
    this.title = this.$route.meta.title;
  },
  data() {
    return {
      title: "",
      timeName: "",
      startTime: timestampToTime(new Date().getTime(), 5),
      endTime: timestampToTime(new Date().getTime(), 5),
      show: false,
      dateTime: [],
      minDate: new Date(2021, 0, 1),
      maxDate: "",
      list: [
        // {
        //   tit: "内科",
        //   list: [
        //     { bt: "李熠熠", time: "2021-04-22", url: "#" },
        //     { bt: "李熠熠", time: "2021-04-22", url: "#" },
        //     { bt: "李熠熠", time: "2021-04-22", url: "#" },
        //     { bt: "李熠熠", time: "2021-04-22", url: "#" },
        //   ],
        // },
        // {
        //   tit: "外科",
        //   list: [
        //     { bt: "李熠熠", time: "2021-04-22", url: "#" },
        //     { bt: "李熠熠", time: "2021-04-22", url: "#" },
        //     { bt: "李熠熠", time: "2021-04-22", url: "#" },
        //     { bt: "李熠熠", time: "2021-04-22", url: "#" },
        //   ],
        // },
        // {
        //   tit: "放射科",
        //   list: [
        //     { bt: "李熠熠", time: "2021-04-22", url: "#" },
        //     { bt: "李熠熠", time: "2021-04-22", url: "#" },
        //     { bt: "李熠熠", time: "2021-04-22", url: "#" },
        //   ],
        // },
      ],
      card: {},
      activeSelect: 0,
      list: []
    };
  },
  filters: {
    timeFilter(start, end) {
      return start != end ? start + "至" + end : start;
    }
  },
  created() {
    this.maxDate = new Date(
      new Date().getFullYear(),
      new Date().getMonth(),
      new Date().getDate()
    );
    this.dateTime = [new Date(this.startTime), new Date(this.endTime)];
    this.card = JSON.parse(sessionStorage.getItem("card"));
    if (this.card) {
      // console.log(this.card)
      this.getList();
      return;
    }
    apiUserCardList({ isYes: 0 }).then(res => {
      this.card = res.data[0];
      this.getList();
    });
  },
  methods: {
    formatDate(date) {
      return `${date.getFullYear()}/${
        date.getMonth() + 1 <= 9
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1
      }/${date.getDate() <= 9 ? "0" + date.getDate() : date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.startTime = this.formatDate(start);
      this.endTime = this.formatDate(end);
      this.timeName = this.startTime + "-" + this.endTime;
      this.getList();
    },
    getList() {
      let that = this;
      that.list = [];
      apiQueryOutpfeeMasterInfo({
        id: that.card.id,
        startDate: that.startTime.replace(new RegExp("/", "g"), "-"),
        endDate: that.endTime.replace(new RegExp("/", "g"), "-")
      }).then(res => {
        // console.log(res);
        if (res.code == 200) {
          let jsonObj = this.$x2js.xml2js(res.data);
          // console.log(jsonObj);
          let jsonObj2 = this.$x2js.xml2js(
            jsonObj.Envelope.Body.queryOutpfeeMasterInfoResponse
              .queryOutpfeeMasterInfoResult
          );
          // console.log(jsonObj2);
          if (jsonObj2.Response.Result_Code == "0000") {
            let arr = jsonObj2.Response.Result_Data.Record_List.Record_Info;
            if (arr.length <= 0) {
              return;
            }
            arr.map(x => {
              if (!(typeof x.PHONE_NUMBER == "string")) {
                x.PHONE_NUMBER = "";
              }
            });
            that.list = arr;
            console.log(that.list);
            return;
          }
          Toast(jsonObj2.Response.Error_Msg);
        }
        // Toast(res.message);
      });
    },
    handleCardSelect() {
      this.$router.push({ path: "/Member_jzr", query: { f: 1 } });
    }
  }
};
</script>


<style scoped lang="scss">
.van-cell__title{
  flex:1;
}
.van-cell__value{
  flex:2;
}
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: -2;
}
.lxr {
  .van-cell--center {
    background: url(../assets/in_bgbj.png) no-repeat;
    background-position: center center;
    color: #fff;

    .van-cell__value--alone {
      color: #fff;
    }
    .van-cell__right-icon {
      color: #fff;
    }
  }
  .van-contact-card::before {
    background: none;
  }
  ::v-deep .van-contact-card--add .van-cell__left-icon {
    color: #fff;
    opacity: 0.6;
  }
  .lxrr {
    border-radius: 15px;
    padding: 20px ; 
    background: url(../assets/lxrbj.png) no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    color: #fff;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    h2 {
      font-size: 32px;
      p {
        font-size: 28px;
        padding-top: 10px;
      }
    }
    h3 .van-cell__right-icon {
      color: #fff;
    }
  }
}
// .search a {
//   background: #f1f1f1;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   width: 100%;
//   height: 64px;
//   border-radius: 32px;
//   font-size: 28px;
//   color: #999;
//   margin: 30px 0px;
// }

// .search a img {
//   width: 28px;
//   height: 28px;
//   margin-right: 10px;
// }

// .van-tabs {
//   display: flex;
// }
// .van-tab__pane ul {
//   padding: 20px;
// }
// .van-tab__pane ul li {
//   box-shadow: 0px 0px 20px #eee;
//   border-radius: 25px;
//   margin-bottom: 25px;
// }

// ::v-deep .van-tabs--line .van-tabs__wrap {
//   height: calc(100vh - 124px);
//   overflow-y: auto;
//   width: 158px;
// }
// ::v-deep .van-tabs__nav--line {
//   display: block;
//   background: #e6e6e6;
// }
// ::v-deep .van-tab {
//   height: 116px;
//   flex: inherit;
// }
// ::v-deep .van-tab--active {
//   background: #fff;
//   position: relative;
// }

// ::v-deep .van-tab--active::after {
//   content: "";
//   position: absolute;
//   left: 0px;
//   top: 50%;
//   transform: translate(0, -50%);
//   width: 4px;
//   height: 40px;
//   background: #46c3b0;
// }

// ::v-deep .van-tabs__line {
//   display: none;
// }

// ::v-deep .van-tabs__content {
//   width: calc(100% - 158px);
// }
</style>
