<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>
    <van-tabs
        :value="tabIndex"
        @click="onTabClick"
        class="order_tab"
        color="#166bcc"
        line-height="2px"
        title-active-color="#166bcc"
    >
      <van-tab
          :title="item.name"
          :name="item.id"
          v-for="item in tab"
          :key="item.id"
      ></van-tab>
    </van-tabs>
    <ul class="list" v-if="list.length > 0">
      <li v-for="item in list" :key="item.ORDERNO">
        <router-link
            v-if="SearchType == 3"
            class="on"
            :to="
            'Yylb_detail?OrderNo=' +
              item.ORDERNO +
              '&PatientId=' +
              card.cardNo +
              '&PatientName=' +
              card.name +
              '&DepartName=' +
              item.DEPARTNAME +
              '&DoctorName=' +
              item.DOCTORNAME +
              '&Registerdate=' +
              item.REGISTERDATE +
              '&TimeInterval=' +
              item.TIMEINTERVAL+
              '&money=' +
              (
                parseFloat(item.CLINICFEE) + parseFloat(item.REGISTRATIONFEE)
              ).toFixed(2) +
              '&status=' +
              SearchType +
              '&LockTime=' +
              item.locktime
          "
        >
          <h3>
            {{ item.DEPARTNAME }}
            <p>{{ item.DOCTORNAME }}</p>
            <p>
              就诊时间：{{
                item.REGISTERDATE + " " + getTime(item.TIMEINTERVAL)
              }}
            </p>
          </h3>
        </router-link>
        <router-link
            v-else
            class="on"
            :to="
            'Yylb_detail?OrderNo=' +
              item.ORDERNO +
              '&PatientId=' +
              card.cardNo +
              '&PatientName=' +
              card.name +
              '&DepartName=' +
              item.DEPARTNAME +
              '&DoctorName=' +
              item.DOCTORNAME +
              '&Registerdate=' +
              item.REGISTERDATE +
              '&TimeInterval=' +
              item.TIMEINTERVAL +
              '&money=' +
              (
                parseFloat(item.CLINICFEE) + parseFloat(item.REGISTRATIONFEE)
              ).toFixed(2) +
              '&status=' +
              SearchType
          "
        >
          <h3>
            {{ item.DEPARTNAME }}
            <p>{{ item.DOCTORNAME }}</p>
            <p>
              就诊时间：{{
               item.REGISTERDATE.split(" ")[0] + " " + item.TIMEINTERVAL
              }}
            </p>
            <!--em>{{item.OrderNo}}</em-->
          </h3>
        </router-link>
      </li>
    </ul>
    <van-empty description="暂无数据" v-else style="padding-top:90px"/>
    <van-overlay :show="show" z-index="999"/>
  </div>
</template>

<script>
import {
  apiUserCardList,
  apiopRegisterListQuery,
  apiopRegisterCancelList,
} from "@/request/api.js";
import {Toast, Dialog, Empty, Overlay} from "vant";

export default {
  data() {
    return {
      title: "",
      list: [],
      //tab:[{index:0,name:'待就诊',appStatus:1},{index:1,name:'已就诊',appStatus:2},{index:2,name:'已取消',appStatus:3,}],
      tab: [
        {index: 0, name: "待就诊", appStatus: 1},
        {index: 1, name: "已就诊", appStatus: 2},
        // {index: 2, name: "待确认", appStatus: 3},
      ],
      tabIndex: 0,
      SearchType: 1,
      card: {},
      show: false,
    };
  }, 
   watch: {
    // 监听路由变化，确保从其他页面跳转回来时能刷新数据
    '$route'(to, from) {
      console.log('路由变化:', from.path, '->', to.path);
      this.initData();
    }
  },
  
  mounted() {
    this.title = this.$route.meta.title;
     this.initData();
  },
  methods: {
    initData() {
let that = this;
    if (!sessionStorage.getItem("card")) {
      apiUserCardList().then((aa) => {
        for (var i = 0; i < aa.data.length; i++) {
          if (aa.data[i].isYes == "0") {
            sessionStorage.setItem("card", JSON.stringify(aa.data[i]));
          }
        }
        
        that.card = JSON.parse(sessionStorage.getItem("card"));
         console.log(that.card);
        that.getList();
      });
    } else {
      that.card = JSON.parse(sessionStorage.getItem("card"));
      console.log(that.card);
      that.getList();
    }
    },
    getTime(time) {
      switch (time) {
        case "AM":
          return "上午";
        case "PM":
          return "下午";
        case "AL":
          return "白天";
        case "NT":
          return "昼夜";
      }
    },
    handleCardSelect() {
      this.$router.push({path: "/Member_jzr", query: {f: 1}});
    },
    onTabClick(name, title) {
      this.SearchType = this.tab[name].appStatus;
      this.list = [];
      this.getList();
    },
    getList() {
      let _this = this;
      if (_this.card.cardNo == "" || _this.card.cardNo == null) return;

      function pad2(n) {
        return n < 10 ? "0" + n : n;
      }

      //设置日期，当前日期的前180天
      var myDate = new Date(); //获取今天日期
      myDate.setDate(myDate.getDate() - 180);
      //设置日期，当前日期的后8天
      var myendDate = new Date(); //获取今天日期
      myendDate.setDate(myendDate.getDate() + 8);
      let starttime =
          myDate.getFullYear().toString() +
          "-" +
          pad2(myDate.getMonth() + 1) +
          "-" +
          pad2(myDate.getDate()) +
          " 00:00:00";
      let stoptime =
          myendDate.getFullYear().toString() +
          "-" +
          pad2(myendDate.getMonth() + 1) +
          "-" +
          pad2(myendDate.getDate()) +
          " 00:00:00";
      let formData = {
        PatientId: _this.card.cardNo,
        SearchType: _this.SearchType,
        InsuranceType: "",
        StartTime: starttime,
        EndTime: stoptime,
      };
      // var ghxx="<response><returnresult><returncode>1</returncode><errormsg>查询成功</errormsg></returnresult><data><data_row><OrderNo>2021091430344</OrderNo><DoctorCode>005019</DoctorCode><DoctorName>管秀静</DoctorName><DepartCode>10010041</DepartCode><DepartName>消化内科</DepartName><TimeInterval>PM</TimeInterval><RegNumType>普通门诊</RegNumType><Registerdate>2021/9/140:00:00</Registerdate><ReptNum>2021091402373</ReptNum><SerialNo>1</SerialNo><ClinicFee>0.01</ClinicFee><RegistrationFee>0.00</RegistrationFee><TranID/><Location>测试位置</Location><YbInMsg/></data_row><data_row><OrderNo>2021091430343</OrderNo><DoctorCode>999999</DoctorCode><DoctorName>1管理员</DoctorName><DepartCode>10010031</DepartCode><DepartName>神经内科</DepartName><TimeInterval>AM</TimeInterval><RegNumType>普通门诊</RegNumType><Registerdate>2021/9/140:00:00</Registerdate><ReptNum>2021091402372</ReptNum><SerialNo>-1</SerialNo><ClinicFee>0.01</ClinicFee><RegistrationFee>0.00</RegistrationFee><TranID/><Location>测试位置</Location><YbInMsg/></data_row><data_row><OrderNo>2021091430340</OrderNo><DoctorCode>000408</DoctorCode><DoctorName>谢凌</DoctorName><DepartCode>20010051</DepartCode><DepartName>病理科</DepartName><TimeInterval>AM</TimeInterval><RegNumType>普通门诊</RegNumType><Registerdate>2021/9/140:00:00</Registerdate><ReptNum>2021091402367</ReptNum><SerialNo>1</SerialNo><ClinicFee>0.01</ClinicFee><RegistrationFee>0.00</RegistrationFee><TranID/><Location>测试位置</Location><YbInMsg/></data_row></data></response>";
      // let jsonObj2 = _this.$x2js.xml2js(ghxx);
      // for (var i = 0; i < jsonObj2.response.data.data_row.length; i++)
      // {
      //     _this.list.push(jsonObj2.response.data.data_row[i]);
      // }
      // return;
      _this.show = true;
      if (_this.SearchType == 3) {
        apiopRegisterCancelList(formData).then((res) => {
          _this.show = false;
          console.log(res);
          if (res.data != null) {
            _this.list = res.data;
          }
        });
      } else {
        apiopRegisterListQuery(formData).then((res) => {
          _this.show = false;
          console.log(res);
          let jsonObj = this.$x2js.xml2js(res.data);
          console.log(jsonObj);
          let jsonObj2 = this.$x2js.xml2js(
              jsonObj.Envelope.Body.MOP_OutpRegisterListQueryResponse
                  .MOP_OutpRegisterListQueryResult
          );
          console.log(jsonObj2);
          if (jsonObj2.response.returnresult.returncode == "1") {
            console.log(jsonObj2.response.data);
            _this.list = [];
            if (jsonObj2.response.data.data_row.length > 1) {
              for (var i = 0; i < jsonObj2.response.data.data_row.length; i++) {
                _this.list.push(jsonObj2.response.data.data_row[i]);
              }
            } else {
              _this.list.push(jsonObj2.response.data.data_row);
            }
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.order_tab {
  //position: fixed;
  z-index: 9;
  //top: 92px;
  left: 0;
  width: 100%;
}

.lxr {
  .van-cell--center {
    border-radius: 0.25rem;
    padding: 0.25rem;
    background: url(../assets/lxrbj.png) no-repeat;
    background-size: 100% 100%;
    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: 0.25rem;
    background: url(../assets/lxrbj.png) no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    color: #fff;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    h2 {
      font-size: 0.5rem;

      p {
        font-size: 0.4rem;
        padding-top: 0.15rem;
      }
    }

    h3 .van-cell__right-icon {
      color: #fff;
    }
  }
}

.list {
  padding-top: 0.25rem;

  li {
    width: 96%;
    margin-left: 2%;
    background: #fff;
    margin-bottom: 0.25rem;
    box-sizing: border-box;
    border-radius: 0.375rem;
    box-shadow: 0 0 0.25rem #ccc;
    padding: 0.375rem;

    a {
      display: flex;
      align-items: center;
    }

    h3 {
      width: 100%;
      font-size: 0.45rem;
      color: #333;
      position: relative;

      p {
        font-size: 0.325rem;
        padding: 0.125rem 0;
        color: #666;
      }

      em {
        font-size: 0.375rem;
        //color: #166bcc;
        position: absolute;
        right: 0;
        top: 0.25rem;
      }
    }
  }
}
</style>
