<template>
  <view>
    <view class="msg u-flex g-bor-bottom">
      <view class="block" />
      <view class="title"> 预约信息 </view>
    </view>
    <SelectTime :time-list="timeList" @updateTime="updateTime" />
    <view class="basic-wrappper">
      <view class="basic-footer">
        <view class="safe-bottom">
          <u-button type="primary" @click="submit">确认</u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { fhGetTimeState } from '../../../../mainWeixinMp/api/newborn/index'

import SelectTime from './components/selectTime.vue'
import dayjs from 'dayjs'
export default {
  components: {
    SelectTime
  },
  data() {
    return {
      timeList: [],
      selectTime: '' // 选择的预约时间
    }
  },
  onLoad(options) {
    console.log(options, '预约日期')
    this.fhGetTimeState(options.visitDate)
  },
  onReachBottom() {
  },
  onShow() {
  },
  onPullDownRefresh() {
  },
  methods: {
    /**
     * 确定预约时间
     */
    submit() {
      const selectTime = this.selectTime
      uni.$emit('selectTime', { selectTime: selectTime })
      uni.navigateBack()
    },
    updateTime(event) {
      this.selectTime = event[0].label
    },
    /**
     * 获取时间启禁用
     * visitDate:预约的日期
     */
    async fhGetTimeState(visitDate) {
      uni.showLoading({ title: '正在加载中...' })
      const memberId = uni.getStorageSync('memberId')
      const hospitalInfo = uni.getStorageSync('hospital-info')
      const hospitalId = hospitalInfo.hospitalId
      try {
        const { results } = await fhGetTimeState({ memberId, visitDate }, hospitalId)
        results.forEach(element => {
          element.label = element.time
        })
        visitDate === dayjs().format('YYYY-MM-DD') ? this.timeList = this.handleTime(results) : this.timeList = results
      } catch (e) {
        console.log(e)
      }
      uni.hideLoading()
    },
    /**
     * 判断预约的时间段超过当前时间给一个 overTime的状态并置灰
     * @params timeList:array(时间段)
     */
    handleTime(timeList) {
      timeList.forEach(item => {
        if (dayjs().format('HH:mm') > item.time.split('-')[1] && item.status !== 'SELECTED') item.status = 'overTime'
      })
      return timeList
    }
  }
}
</script>

<style lang="scss" scoped>
.msg {
  padding: 24rpx 30rpx;
  .block {
    width: 5rpx;
    height: 36rpx;
    margin-right: 6rpx;
    background: $u-type-primary;
    border-radius: 3rpx;
    margin-left: 15rpx;
  }
}
.title {
    color: #666;
    font-size: 30rpx;
    font-weight: bold;
  }
   .basic-wrappper {
  padding: 0 40rpx;
  padding-bottom: 300rpx;
  .basic-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30rpx;
    background-color: #ffffff;
    z-index: 100;
  }
}
</style>
