<template>
  <div class="home">
    <div class="bj"></div>
    <div class="time container">
      <span>{{time}}</span><span>{{week}}</span><em v-if="istoday">今</em>
    </div>
    <!-- <div class="checkbox">
      <van-checkbox v-model="checked" checked-color="#46C3B0"
        >只看有号</van-checkbox
      >
    </div> -->
    <div class="list">
      <ul>
        <li v-for="(item,index) in list" :key="index" @click="handleDetail(item.DOCTOR_CODE)">
          <a>
            <!-- <h2><img :src="item.img" /></h2> -->
            <h3 :class="{'on':item.APPOINT_COUNT==0}">
              {{ item.DOCTOR_NAME }}<span>{{ item.MARK_TYPE }}</span>
              <em>余{{ item.APPOINT_COUNT.__text || '1000' }}</em>
              <p>{{ item.DEPT_NAME }}</p>
            </h3>
            <!-- <h3 class="on" v-else-if="item.on == 0">
              {{ item.name }}<span>{{ item.grade }}</span
              ><em>余{{ item.ticket }}</em>
              <p>{{ item.jianj }}</p>
            </h3> -->
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { apiGetPbList,apiGetAppointSchedulesMark,apiGetRegistSchedulesMark } from "@/request/api.js";
export default {
  data() {
    return {
      active: 0,
      title: "",
      flag: false,
      checked: false,
      time:'',
      week:'',
      list: [],
      istoday:false,
      yuyue:{}
    };
  },
  mounted() {
    // console.log(this.$route.meta.title);
    this.title = this.$route.meta.title;
    this.yuyue = JSON.parse(sessionStorage.getItem('yuyue'));
    if(this.yuyue.DeptCode){
      this.time = this.yuyue.t;
      let wk = new Date(this.time).getDay();
      this.week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][wk];
      var aData = new Date();
      let value = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
      if(value == this.time){
        this.istoday = true;
      } 
      this.getList();
		}
  },
  methods: {
    handleDetail(id){
      this.yuyue.DoctorCode = id;//医生编号
      sessionStorage.setItem('yuyue', JSON.stringify(this.yuyue));
      this.$router.push({ path: "/Ysgh"});
    },
    getList(){
      let _this = this;
      // let data = {
      //   START_DATE: _this.yuyue.t,
      //   DEPT_CODE: _this.yuyue.DeptCode
      // }
      // let xmll = _this.$x2js.js2xml(data)
      // let xmlq = `<Request>`+ xmll+ `</Request>` 
      // apiGetPbList(xmlq).then(res => {
      //   let jsonObj = this.$x2js.xml2js(res);
      //   _this.list = jsonObj.Response.Result_Data.Record_List.Record_Info;
      //   // console.log(this.list)
      // });
      // this.$http.post(this.httpurl+'/temporary/queryAppointSchedulesMark',xmlq).then((res) => {
      //   let jsonObj = this.$x2js.xml2js(res.body);
      //   // console.log(jsonObj)
      //   _this.list = jsonObj.Response.Result_Data.Record_List.Record_Info;
      // });
      if(_this.yuyue.z == 1){
        apiGetRegistSchedulesMark({deptCode:_this.yuyue.DeptCode,registDate:_this.yuyue.t}).then(res => {
          // console.log(res)
          let jsonObj = this.$x2js.xml2js(res.data);
          let jsonObj2 = this.$x2js.xml2js(jsonObj.Envelope.Body.queryRegistSchedulesMarkResponse.queryRegistSchedulesMarkResult);
          this.list = jsonObj2.Response.Result_Data.Record_List.Record_Info;
          // console.log(this.list);
        });
        return
      }
      apiGetAppointSchedulesMark({deptCode:_this.yuyue.DeptCode,startDate:_this.yuyue.t}).then(res => {
        // console.log(res)
        let jsonObj = this.$x2js.xml2js(res.data);
        let jsonObj2 = this.$x2js.xml2js(jsonObj.Envelope.Body.queryAppointSchedulesMarkResponse.queryAppointSchedulesMarkResult);
        this.list = jsonObj2.Response.Result_Data.Record_List.Record_Info;
        // console.log(this.list)
      });
    },
    showPopup() {
      this.show = true;
    },
    showMode() {
      this.showe = true;
    },
  },
};
</script>


<style scoped lang="scss">
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}
.time {
  line-height: 100px;
  font-size: 28px;
  color: #333;
  background: #fff;
  display: flex;
  align-items: center;
  span {
    padding-right: 20px;
  }
  em {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #46c3b0;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    display: block;
  }
}
.checkbox {
  padding: 25px 20px;
}

::v-deep .van-checkbox__label {
  font-size: 26px;
}
::v-deep .van-checkbox__icon {
  width: 35px;
}
::v-deep .van-checkbox__icon .van-icon {
  width: 35px;
  height: 35px;
}

.list{
  margin-top: 20px;
}
.list ul li {
  background: #fff;
  margin-bottom: 20px;
  a {
    display: flex;
    box-sizing: border-box;
    padding: 30px;
    h2 img {
      width: 98px;
      height: 98px;
      border-radius: 50%;
      margin-right: 20px;
    }
    h3 {
      color: #333;
      font-size: 30px;
      position: relative;
      // width: calc(100% - 118px);
      width: 100%;
      span {
        font-size: 22px;
        color: #666;
        padding-left: 15px;
      }
      p {
        font-size: 24px;
        color: #999;
        display: block;
        padding-top: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      em {
        width: 86px;
        height: 38px;
        line-height: 38px;
        background: linear-gradient(-90deg, #ff464f, #ff6e77);
        border-radius: 16px;
        position: absolute;
        right: 0px;
        top: 0px;
        font-size: 20px;
        text-align: center;
        color: #fff;
      }
    }
    h3.on em {
      background: #999999;
    }
  }
}
</style>
