<template>
  <div class="detail">
    <div class="white-box part-1">
      <div class="custom-item-tit">
        <div class="tit">场馆信息</div>
      </div>
      <div class="cell-item">
        <p class="label">场馆名称</p>
        <p class="tit">{{ roomDetial.roomName }}</p>
      </div>
      <div class="cell-item">
        <p class="label">场馆位置</p>
        <p class="tit">{{ roomDetial.position }}</p>
      </div>
      <div class="cell-item">
        <p class="label">座位数</p>
        <p class="tit">{{ roomDetial.seatNumber }}</p>
      </div>

      <div class="cell-item">
        <p class="label">配套</p>
        <p class="tit">{{ roomDetial.match }}</p>
      </div>
      <div class="cell-item">
        <p class="label">收费标准</p>
        <p class="tit">{{ roomDetial.charges }}</p>
      </div>
      <div class="cell-item flex-item">
        <p class="label">预约电话</p>
        <p class="tit tel-box">
          <span>{{ roomDetial.appointPhone }}</span>
          <TelNum :num="roomDetial.appointPhone" :showTel="false" />
        </p>
      </div>
    </div>

    <!-- 日期搜索 -->
    <div class="white-box filter-box">
      <p class="tit">日期</p>
      <div class="filter-input-box">
        <div class="custom-input-box" @click="showStartPicker = true">
          <input type="text" v-model="formatStartTime" placeholder="开始时间" readonly />
        </div>
        <span>至</span>
        <div class="custom-input-box" @click="showEndPicker = true">
          <input type="text" v-model="formatEndTime" placeholder="结束时间" readonly />
        </div>
        <button class="confirm-btn">
          <i class="iconfont icon-sousuo" @click="roomTimeSoltSeach"></i>
        </button>
      </div>
    </div>
    <!-- 时间显示 -->
    <div class="white-box part-2">
      <DateTime :dateList="dateList" :timeList="timeList" />
    </div>

    <div class="repair-bottom bottom-button">
      <!-- goNavigator('meetingRoom-reserve', {id: itemId, isDetial: false}) -->
      <button class="btn" @click="goMakeOrder(itemId)">
        去预约
      </button>
    </div>
    <!-- 开始时间 -->
    <van-popup v-model="showStartPicker" position="bottom">
      <van-datetime-picker v-model="startTime" type="date" title="选择开始时间" @confirm="startTimeConfirml"
        @cancel="startTimeCancel" />
    </van-popup>
    <!-- 明天预约时间 -->
    <van-popup v-model="showEndPicker" position="bottom">
      <van-datetime-picker v-model="endTime" :min-date="startTime" type="date" title="选择结束时间" @confirm="endTimeConfirml"
        @cancel="endTimeCancel" />
    </van-popup>
  </div>
</template>
<script>
import { Toast } from 'vant'
import Base from '@/pages/base/base'
import { formatDate } from '@/plugins/dateFormat'
import TelNum from '@/components/tel-number'
import DateTime from '@/components/date-time'
import { meetingRoomDetail, roomTimeSoltDetail } from '@/service/api_venue'
export default {
  mixins: [Base],
  components: {
    TelNum,
    DateTime
  },
  data() {
    return {
      active: '',
      dc_key: ['timeSlot'],
      itemId: '',
      roomDetial: {},
      // 停车场信息
      lotInfo: {},
      // 车位列表
      seatList: [],
      // 数量
      num: -1,

      showStartPicker: false,
      showEndPicker: false,
      startTime: new Date(),
      formatStartTime: '',
      endTime: new Date(),
      formatEndTime: '',
      //  日期列表
      dateList: [
        {
          date: '8/1',
          typeList: ['1', '3', '4']
        },
        {
          date: '8/2',
          typeList: ['1', '2', '4']
        },
        {
          date: '8/3',
          typeList: ['4', '2', '1']
        }
      ],

      //   时间段列表
      timeList: ['9:00-12:00', '13:00-18:00', '18:00-22:00']
    }
  },
  mounted() {
    this.dateList = []
    this.itemId = this.$route.query.id
    this.getDetail()
    // 获取时间区间
    this.initDict(this.dc_key).then((res) => {
      this.timeSlotFarmat()
    })
  },
  methods: {
    roomTimeSoltSeach() {
      if (this.startTime != '' && this.startTime != null && this.startTime != undefined &&
        this.formatEndTime != '' && this.formatEndTime != null && this.formatEndTime != undefined) {
        this.roomTimeSolt()
      } else {
        Toast('请选择时间区间')
      }
    },

    // 获取详情
    getDetail() {
      const reqData = {
        id: this.itemId
      }
      meetingRoomDetail(reqData).then((res) => {
        this.roomDetial = res.data
        console.log('场馆详情——：', res)
      })
    },

    // 获取场馆时段开放状态
    roomTimeSolt() {
      const reqData = {
        id: this.itemId,
        startTime: this.formatStartTime,
        endTime: this.formatEndTime
      }
      roomTimeSoltDetail(reqData).then((res) => {
        console.log('获取场馆时段开放状态_:', res)
        this.dateList = []
        this.timeList = []
        if (res.key == 200) {
          this.dateList = res.data.dateList
          this.timeList = res.data.timeList
        }
      })
    },

    // 格式化时间区间
    timeSlotFarmat() {
      this.timeList = []
      this.dc_data.timeSlot.forEach(element => {
        if (element.label != '全部') {
          this.timeList.push(element.label)
        }
      })
    },
    // 获取两个时间之间得日期
    getBetweenDateStr(start, end) {
      var result = []
      var beginDay = start.split('-')
      var endDay = end.split('-')
      var diffDay = new Date()
      var dateList = new Array()
      var i = 0
      diffDay.setDate(beginDay[2])
      diffDay.setMonth(beginDay[1] - 1)
      diffDay.setFullYear(beginDay[0])
      result.push(start)
      while (i == 0) {
        var countDay = diffDay.getTime() + 24 * 60 * 60 * 1000
        diffDay.setTime(countDay)
        dateList[2] = diffDay.getDate()
        dateList[1] = diffDay.getMonth() + 1
        dateList[0] = diffDay.getFullYear()
        if (String(dateList[1]).length == 1) { dateList[1] = '0' + dateList[1] };
        if (String(dateList[2]).length == 1) { dateList[2] = '0' + dateList[2] };
        result.push(dateList[0] + '-' + dateList[1] + '-' + dateList[2])
        if (dateList[0] == endDay[0] && dateList[1] == endDay[1] && dateList[2] == endDay[2]) {
          i = 1
        }
      };
      console.log(result)
      return result
    },

    // 去预约
    goMakeOrder() {
      // 判断时间
      if (new Date(this.startTime).getTime() <= new Date(this.endTime).getTime()) {
        this.$router.push({ path: '/venue/reserve', query: { id: this.itemId, isDetial: false } })
      } else {
        Toast('请选择正确的时间区间!')
      }
    },

    /**
 * 开始时间弹窗取消
 */
    startTimeCancel() {
      this.showStartPicker = false
    },
    /**
 * 开始时间弹窗确认
 */
    startTimeConfirml(val) {
      this.formatStartTime = formatDate(val, 'day')
      this.showStartPicker = false
    },
    /**
 * 结束时间弹窗取消
 */
    endTimeCancel() {
      this.showEndPicker = false
    },
    /**
 * 结束时间弹窗确认
 */
    endTimeConfirml(val) {
      this.formatEndTime = formatDate(val, 'day')
      this.showEndPicker = false
    }
  }
}
</script>
<style lang="scss" scoped>
.detail {
  padding: 0 0 180px;
  overflow: hidden;

  .part-1 {
    margin-bottom: 20px;
  }

  .filter-box {
    padding: 30px;
    margin-bottom: 20px;

    .tit {
      font-size: 34px;
      padding-bottom: 30px;
    }
  }

  .filter-input-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .custom-input-box {
      width: 250px;
    }

    .confirm-btn {
      width: 100px;
      height: 80px;
      border-radius: 10px;
      color: $fc;
      background-color: $text6;

      i {
        font-size: 35px;
      }
    }
  }

  .part-2 {
    padding: 30px;
  }
}
</style>
