<template>
  <van-popup
    v-show="show"
    v-model="show"
    closeable
    round
    position="bottom"
    :style="{ height: '560px',overflow:hidden }"
    @close="close"
  >
    <div class="select-time">
      <div class="select-time-title">
        预约时间
      </div>
      <div class="select-time-list">
        <div class="time-list-left">
          <div
            v-for="item in timsArray"
            :key="item"
            class="text"
            :class="selectTimes === item.appointmentDate ?'selected':''"
            :style="item.amAppointmentFlag && item.pmAppointmentFlag?'color:#999999':''"
            @click="selectTime(item.appointmentDate,item)"
          >
            {{ item.appointmentDate }}
          </div>
        </div>
        <div class="time-list-right">
          <div
            v-show="currentItem.amTimeBegin !='' && currentItem.amTimeEnd !=''"
            class="text"
            :class="selectTimeBucket === currentItem.amTimeBegin ?'selected':''"
            :style="currentItem.amAppointmentFlag?'':'color:#212121'"
            @click="selectTimeB('am')"
          >
            {{ currentItem.amTimeContent }}
          </div>
          <div
            v-if="currentItem.pmTimeBegin !='' && currentItem.pmTimeEnd!=''"
            class="text"
            :class="selectTimeBucket === currentItem.pmTimeBegin ?'selected':''"
            :style="currentItem.pmAppointmentFlag?'':'color:#212121'"
            @click="selectTimeB('pm')"
          >
            {{ currentItem.pmTimeContent }}
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import {getScheduling} from './api';
export default {
  props: {
    hospitalId: {
      type: Number,
      default:() => null
    },
    show: {
      type: Boolean,
      default:() => false
    },
    projectEquityNo: {
      type: String,
      default:() => ''
    },

  },
  data() {
    return {
      hospitalName: '',
      timsArray: [],
      selectTimes: '',
      selectTimeBucket:'',
      loading: false,
      finished: false,
      pageNum: 0,
      pageSize: 50,
      searchValue: '',
      timeBucket: {
        am: '上午',
        pm: '下午',
      },
      currentItem:'',
      currentItemChoosed:{}
    };
  },
  watch: {
    hospitalId: {
      handler(nv) {
        if (nv) {
          this.getScheduling();

        }
      },
      immediate:true
    },
    show: {
      handler(nv) {
        if (nv) {
          this.getScheduling();
        }
      },
      immediate:true
    }
  },
  mounted() {
  },
  methods: {
    // 获取机构列表
    getScheduling() {
      const {projectEquityNo, hospitalId} = this;
      if(projectEquityNo && hospitalId) {
        getScheduling({ projectEquityNo, hospitalId }).then(res => {
          this.timsArray = res.data;
        });
      }
    },
    selectItem() {
      if (this.selectTimes === '') {
        return;
      }
      if (this.selectTimeBucket === '') {
        return;
      }

      this.$emit('change', {value: (this.selectTimes + ' ' + this.selectTimeBucket), currentItemChoosed: this.currentItemChoosed});
    },
    cancel() {
      this.finished = false;
      this.searchValue = '';
      this.pageNum = 0;
      this.onLoad();

    },
    close() {
      this.$emit('close', 'showSelectTime');
    },
    getTimes() {
      this.timsArray = [];
      const current = new Date().getTime();
      const ss = 24 * 60 * 60 * 1000;
      for (let i = 5; i < 35; i++) {
        var addTime = i * ss + current;
        var myDate = new Date(addTime);
        var year = myDate.getFullYear();
        var month = myDate.getMonth() + 1;
        var date = myDate.getDate();
        var timeStr = year + '-' + this.plusZero(month) + '-' + this.plusZero(date);
        this.timsArray.push(timeStr);
      }
    },
    plusZero(num) {
      return num > 9 ? num + '' : '0' + num;
    },
    selectTime(selectTimes, item) {
      console.log(item);
      this.selectTimes = selectTimes;
      this.currentItem = item;
      this.selectTimeBucket = '';
      this.selectItem();
    },
    selectTimeB(item) {
      // 约满禁止预约
      if (this.currentItem[item + 'AppointmentFlag' ]) {
        return;
      }
      this.selectTimeBucket = item === 'am' ? this.currentItem['amTimeBegin'] : this.currentItem['pmTimeBegin'];
      this.currentItemChoosed = {...this.currentItem, timeBucket: item};
      console.log('-selectTimeB', this.currentItem, this.currentItemChoosed);
      this.selectItem();
    }
  }
};
</script>

<style lang="scss" scoped>
.select-time{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

}
.select-time-title{
  position: absolute;
  width: 100%;
  top: 0;
  padding-top: 18px;
  padding-bottom: 21px;
  height: 18px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #02120F;
  line-height: 18px;
  text-align: center;
  border-bottom: 1px solid #ebedf0;
}

.select-time-list{
  padding-top: 59px;
  height: calc(100% - 59px);
  overflow: hidden;
  display: flex;
  .time-list-left{
    width: 130px;
    height: 100%;
    overflow: auto;
    background: #F5F6F8;
    .text{
      width: 130px;
      font-size: 16px;
      text-align: center;
      height: 38px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #02120F;
      line-height: 38px;
    }
  }
  .time-list-right{
    padding: 10px 0;
    .text{
      width: 200px;
      padding-left: 22px;
      height: 41px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 41px;
    }
  }
}
.canselect{
  color: #02120F;

}
.selected{
  color: #00BDA5 !important;
  background: #FFFFFF
}

</style>
