<!-- 预约时间 -->
<template>
  <view :class="{ 'con-box': titleShow }">
    <view class="title" v-if="titleShow">{{ title }}</view>
    <view class="u-m-t-40">
      <view class="appoint-box">
        <view class="select-date">
          <view class="u-flex u-row-between ">
            <view class="txt">选择日期：</view>
            <view class="txt active">{{
              appointTime | datefmt('YYYY.MM.DD')
            }}</view>
          </view>
          <view class="u-m-t-30 u-flex u-row-between date-list">
            <view
              v-show="hasLast"
              class="last"
              @click="lastWeek(dateList[0], dateList)"
            >
              <u-icon name="arrow-left" color="#2979ff" size="28"></u-icon>
            </view>
            <view class="u-flex u-row-between date-box">
              <view
                :class="{ 'date-item': true, active: item.day === appointTime }"
                @click="dateChange(item, index, dateList)"
                v-for="(item, index) in dateList"
                :key="index"
              >
                <text class="day">{{ weekFmt(item.day) }}</text>
                <text class="day day1">{{ item.day | datefmt('DD') }}</text>
              </view>
            </view>
            <view class="next" @click="nextWeek(dateList[0], dateList)">
              <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
            </view>
          </view>
        </view>
        <!-- weekChange -->
        <view class="select-time u-m-t-50">
          <view class="u-flex u-row-between">
            <view class="txt">选择时间：</view>
            <view class="txt active">{{ appointRangeText }}</view>
          </view>
          <view class="u-m-t-30 time-list">
            <view
              :class="{ 'time-item': true, active: item.pkey === appointRange }"
              v-for="(item, index) in timeList"
              :key="item.pkey"
            >
              <button
                class="time"
                :plain="true"
                :disabled="
                  item.disabled ||
                    (currentDayIndex == 0 &&
                      item.pkey.replace(/[^0-9]/gi, '') <= currentPkey &&
                      needTodyClipping)
                "
                :hair-line="false"
                @click="timeChange(item, index, timeList)"
              >
                {{ item.name }}
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let now = new Date(new Date().toLocaleDateString()).getTime()
export default {
  props: {
    titleShow: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default() {
        return '预约时间'
      },
    },
    type: {
      // subscribe 预约； filing 报备
      type: String,
      default: 'subscribe',
    },
    dateList: {
      type: Array,
      default() {
        return [
          { day: now, timeRange: [] },
          { day: now + 1 * 86400000, timeRange: [] },
          { day: now + 2 * 86400000, timeRange: [] },
          { day: now + 3 * 86400000, timeRange: [] },
          { day: now + 4 * 86400000, timeRange: [] },
          { day: now + 5 * 86400000, timeRange: [] },
          { day: now + 6 * 86400000, timeRange: [] },
        ]
      },
    },
    timeList: {
      type: Array,
      default() {
        return [
          { name: '06:00-08:00', pkey: 'appointment_range_8', disabled: false },
          {
            name: '08:00-10:00',
            pkey: 'appointment_range_10',
            disabled: false,
          },
          {
            name: '10:00-12:00',
            pkey: 'appointment_range_12',
            disabled: false,
          },
          {
            name: '12:00-14:00',
            pkey: 'appointment_range_14',
            disabled: false,
          },
          {
            name: '14:00-16:00',
            pkey: 'appointment_range_16',
            disabled: false,
          },
          {
            name: '16:00-18:00',
            pkey: 'appointment_range_18',
            disabled: false,
          },
          {
            name: '18:00-20:00',
            pkey: 'appointment_range_20',
            disabled: false,
          },
          {
            name: '20:00-22:00',
            pkey: 'appointment_range_22',
            disabled: false,
          },
          {
            name: '22:00-24:00',
            pkey: 'appointment_range_24',
            disabled: false,
          },
        ]
      },
    },
    defaultAppointRangeItem: {
      type: Object,
      default() {
        // return {"name":"22:00-24:00","pkey":"appointment_range_24","disabled":false}
        return {}
      },
    },
  },
  data() {
    return {
      appointTime: null,
      appointRange: null,
      appointRangeText: '',
      num: 0,
      hasLast: false,
      currentPkey: new Date().getHours(),
      currentDayIndex: -1,
    }
  },
  // watch: {
  // 	title() {
  // 		this.appointTime = null
  // 		this.appointRange = null
  // 		this.appointRangeText = ''
  // 		this.currentDayIndex = -1
  // 	}
  // },
  computed: {
    needTodyClipping() {
      // 报备不限制当天已经过去的时间
      // return this.type != 'filing'
	  return false // 报备和改约都不限制了
    },
  },
  methods: {
    getDateList() {
      // 获取日期
    },
    async dateChange(item, index, list) {
      let data = {
        item,
        index,
        list,
      }
      this.appointTime = item.day
      this.initAppointRange()
      this.currentDayIndex = index
      this.$emit('date-change', data)
      if (this.appointRange) {
        this.$emit('time-change', {
          item: { pkey: this.appointRange, name: this.appointRangeText },
        })
      }
    },
    timeChange(item, index, list) {
      let data = {
        item,
        index,
        list,
      }
      this.appointRange = item.pkey
      this.appointRangeText = item.name
      this.$emit('time-change', data)
    },
    weekChange(item, index, list) {
      let data = {
        item,
        index,
        list,
      }
      this.$emit('week-change', data)
    },
    lastWeek(item, list) {
      if (this.num > 0) {
        this.num--
        let len = list.length
        if (this.num == 0) {
          this.hasLast = false
          len++
        }
        let time = item.day - len * 86400000
        let data = {
          time: time,
          num: this.num,
        }

        this.$emit('week-change', data)
      }
    },
    nextWeek(item, list) {
      this.hasLast = true
      this.num++
      let len = list.length
      let time = item.day + len * 86400000
      let data = {
        time: time,
        num: this.num,
      }
      this.$emit('week-change', data)
    },
    weekFmt(day) {
      let morrow = this.moment(now).add(1, 'days')
      let content
      if (day == now) {
        content = '今天'
      } else if (day == morrow) {
        content = '明天'
      } else {
        content = this.moment(day).format('周dd')
      }
      return content
    },
    initAppointRange() {
      this.appointRange = this.defaultAppointRangeItem.pkey
      this.appointRangeText = this.defaultAppointRangeItem.name
    },
  },
}
</script>

<style lang="scss" scoped>
.con-box {
  padding: 30rpx 30rpx 10rpx 30rpx;
  border-radius: 12rpx;
  background-color: #ffffff;

  .title {
    font-weight: bold;
    font-size: 32rpx;
    line-height: 32rpx;
    color: #333;
  }
}

.txt {
  font-size: 26rpx;
  line-height: 26rpx;
  color: #333;

  &.active {
    color: #2272ff;
  }
}

.date-list {
  background-color: #f4f5f7;
  .last {
    width: 60rpx;
    height: 120rpx;
    line-height: 120rpx;
    text-align: center;
    border-right: 2rpx solid #fff;
  }
  .date-box {
    padding: 20rpx 18rpx 16rpx 20rpx;
    width: 568rpx;
    .date-item {
      // padding: 20rpx 20rpx 16rpx;
      border-radius: 12rpx;

      .day {
        display: block;
        font-size: 24rpx;
        line-height: 26rpx;
        color: #999;

        &.day1 {
          width: 48rpx;
          height: 48rpx;
          margin-top: 10rpx;
          border-radius: 50%;
          font-size: 28rpx;
          text-align: center;
          line-height: 48rpx;
        }
      }

      &.active {
        .day {
          color: #2272ff;

          &.day1 {
            background-color: #2272ff;
            color: #fff !important;
          }
        }
      }
    }
  }
  .next {
    width: 60rpx;
    height: 120rpx;
    line-height: 120rpx;
    text-align: center;
    border-left: 2rpx solid #fff;
  }
}

.time-list {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;

  .time-item {
    flex: 0 0 196rpx;
    min-width: 196rpx;
    margin-right: auto;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    background-color: #f4f5f7;

    &:nth-child(3n) {
      margin-right: 0;
    }
    &.active {
      background-color: #2272ff;
      .time {
        color: #fff;
      }
    }
    .time {
      font-size: 26rpx;
      line-height: 76rpx;
      color: #999;
    }
    /deep/ button {
      padding: 0;
      height: 76rpx;
    }
    /deep/ button[plain] {
      border: none;
    }
    button[disabled]:not([type]) {
      background: #ffffff;
      color: #cccccc;
      border: 2rpx solid #f4f5f7;
    }
  }
}
</style>
