<template>
  <div class="home">
    <nav-bar/>
    <div class="bj"></div>
    <ul class="timeSlelct">
      <li
          v-for="(item, index) in same_week"
          :class="{ active: same_day == item.date }"
          @click="timeSlelct(item)"
          :key="index"
      >
        <div>{{ item.week }}</div>
        <div>{{ item.name }}</div>
        <span></span>
      </li>
    </ul>

    <div class="list" v-if="panbanList.length > 0">
      <ul>
        <li
            v-for="(item, index) in panbanList"
            :key="index"
            @click="handleDetail(item)"
        >
          <a>
            <h2><img src="../assets/member_tx.png"/></h2>
            <!-- <h2><img :src="item.img" /></h2> -->
            <!-- :class="{'on':item.APPOINT_COUNT=='0'}" -->
            <h3>
              {{ item.DoctorCode }}
              <span>{{ item.DoctorTitle }}</span>
              <!-- <em>余{{ item.APPOINT_COUNT.__text || '1000' }}</em> -->
              <p>{{ item.DeptName }}</p>
            </h3>
            <h3 class="on">
              <van-cell
                  :title="
              getTime(item.TimeInterval) +
                '       余' +
                (item.RegisterCount === 0 ? '9999' : item.RegisterCount)
            "
              />
            </h3>
          </a>
        </li>
      </ul>
    </div>
    <van-empty description="暂无数据" v-else style="padding-top: 90px"/>
  </div>
</template>

<script>
import {apiGetAppointSchedulesMark} from "@/request/api.js";

export default {
  data() {
    return {
      active: 0,
      time: "",

      paihao: {},

      today: "",
      week: [],
      same_week: [], //保存当前最新的时间
      same_day: "", //当天的时间
      overshow: false,

      panbanList: [],
    };
  },

  mounted() {
    // this.getpbryList()
    this.getWeek();
    // this.onLoad()
  },
  methods: {
    getTime(time) {
      switch (time) {
        case "AM":
          return "上午";
        case "PM":
          return "下午";
        case "AL":
          return "白天";
        case "NT":
          return "昼夜";
      }
    },
    handleDetail(data) {
      // data.DOCTOR_CODE
      this.paihao.d = data.DoctorCode; //医生编号
      this.paihao.n = data.DoctorName; //医生姓名
      this.paihao.b = data.DoctorTitle;
      console.log(this.yuyue.DoctorCode);
      //this.yuyue.p = data.DeptName; //医生科室
      sessionStorage.setItem("paihao", JSON.stringify(this.paihao));
      // this.$router.push({path: "/Ysgh"});
    },


    timeSlelct(item) {
      this.same_day = item.date;
      this.paihao.t = item.date2;
      if (item.date == this.today) {
        this.paihao.z = 1;
      } else {
        this.paihao.z = 2;
      }
      // console.log(this.yuyue);
      this.getpbryList();
      // console.log(item);
      // console.log(this.same_day.replace(new RegExp('/','g'),'-'))
    },
    getWeek() {
      // 默认显示当天前一周的数据
      let data = [];
      this.start = this.getDay(+7);
      this.end = this.getDay();
      for (let i = 13; i >= 0; i--) {
        data.push(this.getDay(+i));
      }
      var date = data.reverse(); //得出一周的日期进行排序
      this.week = date;
      var date = this.week;
      var pkc = []; /* 用于存储展示的日期数据 */
      var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      date.forEach((item, index) => {
        //循坏日期
        var f = new Date(item);
        var week = f.getDay(); //计算出星期几
        var str1 = item.split("/");
        var strs =
            (str1[1] >= 10 ? str1[1] : "0" + str1[1]) +
            "." +
            (str1[2] >= 10 ? str1[2] : "0" + str1[2]);
        var yyyyddmmdate =
            str1[0] +
            "-" +
            (str1[1] >= 10 ? str1[1] : "0" + str1[1]) +
            "-" +
            (str1[2] >= 10 ? str1[2] : "0" + str1[2]);
        var weeks = weekday[week]; /* 将计算出来的时间带入数字得出中文 */
        var time = Math.round(new Date(item) / 1000); //时间戳转换
        var s = {}; //用于存储每个日期对象
        s.date = item;
        s.date2 = yyyyddmmdate;
        s.name = strs;
        s.week = weeks;
        s.times = time;
        pkc.push(s);
      });
      this.same_week = pkc;
      // console.log(this.same_week)
      //pkc存储着今天的年月日星期几，时间戳等
      this.same_day = this.today = pkc[0].date; //今天的数据
      this.paihao.t = pkc[0].date2;
      // console.log(this.same_day)
      this.paihao.z = 1;

      this.getpbryList();
      // console.log(this.same_day)
    },
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds);
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "/" + tMonth + "/" + tDate;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = month;
      }
      return m;
    },
    formateDateTime(time, fmt) {
      let o = {
        'M+': time.getMonth() + 1, // 月份
        'd+': time.getDate(), // 日
        'h+': time.getHours(), // 小时
        'm+': time.getMinutes(), // 分
        's+': time.getSeconds(), // 秒
        'q+': Math.floor((time.getMonth() + 3) / 3), // 季度
        S: time.getMilliseconds(), // 毫秒
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (time.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt))
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
      }
      return fmt;
    },
    getpbryList() {

      let pbtemp = sessionStorage.getItem('paiban')
      var parsepb = JSON.parse(pbtemp);
      if (pbtemp === null) {//如果没有缓存数据，说明没有调用接口


        let param = {
          SearchType: '2',
          DepartCode: ''
        }
        apiGetAppointSchedulesMark(param).then(r => {
          let jsonObj = this.$x2js.xml2js(r.data);
          let jsonObj2 = this.$x2js.xml2js(
              jsonObj.Envelope.Body.MOP_OutpDoctorQueryResponse
                  .MOP_OutpDoctorQueryResult
          );
          let paiban = jsonObj2.response.data.data_row
          sessionStorage.setItem("paiban", JSON.stringify(paiban));
          let old_date = this.formateDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss');
          sessionStorage.setItem("paibandate", old_date)
          // let old_date = this.formateDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss');
          // sessionStorage.setItem("paibandate", new Date())

          this.panbanList = paiban.filter((item, index) => {
            return item.Registerdate === this.paihao.t
          })
        })
      } else {
        let new_date = new Date()
        let oldDate = new Date(sessionStorage.getItem('paibandate'))
        // 3,600,000 一个小时的时间，更新一次
        if (new_date.getTime() - oldDate.getTime() >= 3600000) {
          let param = {
            SearchType: '2',
            DepartCode: ''
          }
          apiGetAppointSchedulesMark(param).then(r => {
            let jsonObj = this.$x2js.xml2js(r.data);
            let jsonObj2 = this.$x2js.xml2js(
                jsonObj.Envelope.Body.MOP_OutpDoctorQueryResponse
                    .MOP_OutpDoctorQueryResult
            );
            let paiban = jsonObj2.response.data.data_row
            sessionStorage.setItem("paiban", JSON.stringify(paiban));
            let old_date = this.formateDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss');
            sessionStorage.setItem("paibandate", old_date)
            // let old_date = this.formateDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss');
            // sessionStorage.setItem("paibandate", new Date())

            this.panbanList = paiban.filter((item, index) => {
              return item.Registerdate === this.paihao.t
            })
          })
        } else {
          this.panbanList = parsepb.filter((item, index) => {
            return item.Registerdate === this.paihao.t
          })
        }
      }
      //首先把数据缓存起来，之后从缓存中按照日期查找数据
    }
  },
};
</script>


<style scoped lang="scss">
::-webkit-scrollbar {
  width: 0 !important;
}

ul.timeSlelct {
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 1.8rem;
  overflow-x: auto;

  li {
    padding: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: rgba(22, 104, 204, 0.2);
    position: relative;
    border-left: 1px solid #f5f5f5;
    border-radius: 0.25rem;
    margin: 0.05rem;
  }

  li:nth-child(1) {
    border-left: 0;
  }

  .active {
    background-color: #166bcc;
    color: #fff;
  }
}

.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.list {
  margin-top: 1.75rem;
  position: relative;
  z-index: 1;
}

.list ul li {
  background: #fff;
  margin-bottom: 0.25rem;

  a {
    display: flex;
    box-sizing: border-box;
    padding: 0.375rem;

    h2 img {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      margin-right: 0.25rem;
    }

    h3 {
      color: #333;
      font-size: 30px;
      position: relative;
      // width: calc(100% - 118px);
      width: 100%;

      span {
        font-size: 22px;
        color: #666;
        padding-left: 0.125rem;
      }

      p {
        font-size: 0.375rem;
        color: #999;
        display: block;
        padding-top: 0.25rem;
      }

      em {
        width: 1rem;
        height: 0.375rem;
        line-height: 0.375rem;
        background: linear-gradient(-90deg, #ff464f, #ff6e77);
        border-radius: 0.125rem;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 0.25rem;
        text-align: center;
        color: #fff;
      }
    }

    h3.on em {
      background: #999999;
    }
  }
}
</style>
