<!--
 * @Author: WorkerChen z874512298@163.com
 * @Date: 2022-05-07 10:16:12
 * @LastEditors: WorkerChen z874512298@163.com
 * @LastEditTime: 2022-05-07 16:30:53
 * @FilePath: \ybm-doctor-miniapp\src\components\book-date-box\index.vue
 * @Description: 预约日期和时间段的组件
-->
<template>
  <!-- 这个时选择探视时间排版组件 -->
  <div class="date-box-container">
    <!-- 主内容 -->
    <div v-if="timeList.length" class="box-time-list">
      <div v-for="(item,index) in timeList" :key="index" class="times-item-class" @click="handleSelectItem(item)">
        <div v-if="item.status === 'OPENED'" :class="isSelect(item) !== -1 ? 'box-class select-box-class' : 'box-class'">{{ item.label }}</div>
        <div v-else class="disable-select"> {{ item.label }} </div>
      </div>
    </div>
    <div v-else>
      <u-empty mode="list" text="当前没有时间段可预约" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    defaultArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 单选/多选 1/2 默认单选
    boxType: {
      type: Number,
      default: 1
    },
    /**
     * 时间段数组
     * @label 标题
     * @startTime 开始时间
     * @endTime 结束时间
     */
    timeList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

  data() {
    return {
      // 贮存选择数组的地方
      selectGroup: []
    }
  },
  onReady() {
    if (this.defaultArr.length) {
      const defailtList = [...this.defaultArr]
      this.selectGroup = defailtList
      console.log(this.selectGroup)
    }
  },
  computed: {
    isSelect() {
      return function(item) {
        console.log(item, '我说item')
        const targetIndex = this.selectGroup.findIndex((data) => {
          return data.label === item.label
        })
        return targetIndex
      }
    }
  },
  methods: {
    // 选择项
    handleSelectItem(event) {
      console.log(event)
      // 启用状态
      if (event.status === 'OPENED') {
        let selectGroup = this.selectGroup
        // 判断数组中是否存在相同项，如果有，则移除
        const targetIndex = selectGroup.findIndex((item) => {
          return item.label === event.label
        })

        if (targetIndex !== -1) {
          selectGroup.splice(targetIndex, 1)
        } else {
          if (this.boxType === 1) {
          // 单选
            selectGroup = [event]
            // console.log(event, 'this.updateTime(event)')
          } else {
          // 多选
            selectGroup.push(event)
          }
        }
        this.selectGroup = selectGroup
        this.updateTime()
      } else if (event.status === 'SELECTED') {
        uni.showToast({
          title: '当前时间段已给他人确认预约，无法选中。',
          icon: 'none',
          duration: 1500
        })
      } else if (event.status === 'overTime') {
        uni.showToast({
          title: '当前的时间已超过选择的时间段，无法选中。',
          icon: 'none',
          duration: 1500
        })
      }
    },
    // 子传父
    updateTime() {
      console.log(this.selectGroup, 'selectGroup')
      this.$emit('updateTime', this.selectGroup)
    }
  }
}
</script>
<style scoped>
  .date-box-container{
    padding:20rpx;
    width: 100%;
  }
  .box-time-list{
    display: flex;
    width:100%;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  /* 最后一行左对齐的占位符 */
  .box-time-list::after {
    content: "";
    width: calc(100vw / 3 - 60rpx);
    border: 1px solid transparent;
    margin: 20rpx 20rpx 20rpx 20rpx
  }
  .box-class{
    margin: 0 20rpx 20rpx 20rpx;
    width: calc(100vw / 3 - 60rpx);
    text-align: center;
    border: 1px solid #333;
    border-radius: 30rpx;
    line-height: 60rpx;
  }
  .select-box-class{
    background-color:#1890ff;
    border: 1px solid #096dd9;
    color: #fff;
  }
  .disable-select{
    margin: 0 20rpx 20rpx 20rpx;
    width: calc(100vw / 3 - 60rpx);
    text-align: center;
    border: 1px solid #d9d9d9;
    border-radius: 30rpx;
    line-height: 60rpx;
    color: #888;
    background-color:#d9d9d9;
  }
</style>
