<template>
  <div class="wrapper">
    <h2>预约现场办理时间</h2>
    <p class="subtitle">预约后，请准时到指定营业网点办理贷款</p>
    <ul>
      <li @click="showPicker = true">
        <img src="./image/date@2x.png">
        <p>{{ this.bespeakDay && this.bespeakHour ? (this.bespeakDay + ' ' + this.bespeakHour) : '请选择时间' }}</p>
      </li>
      <li @click="showPicker1 = true">
        <img src="./image/position@2x.png">
        <p>{{ storeName ? storeName : '请选择办理网点'}}</p>
      </li>
    </ul>
    <button class="submit" @click="funSubmit">提交</button>
    <van-calendar
      v-model="showPicker"
      :show-confirm="false"
      @confirm="onConfirm"/>
    <van-popup v-model="showPicker0" round position="bottom">
      <van-picker
        title="请选择办理时间"
        show-toolbar
        :columns="columnsOfHour"
        @confirm="onHourPickerConfirm"
        @cancel="showPicker0 = false"/>
    </van-popup>
    <van-popup v-model="showPicker1" round position="bottom">
      <van-picker
        title="请选择办理网点"
        show-toolbar
        :columns="columnsOfStore"
        @confirm="onStorePickerConfirm"
        @cancel="showPicker1 = false"/>
    </van-popup>
  </div>
</template>

<script>
  import { Popup, Calendar, Picker, Toast } from 'vant'
  import { platform } from '../../../utils/platform'
  import { postBespeak } from './api'
  import { getBankList } from '../../../api/common'

  export default {
    name: 'bespeak',
    components: {
      'van-popup': Popup,
      'van-calendar': Calendar,
      'van-picker': Picker
    },
    props: {
      // 订单ID
      id: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        bespeakDay: '',
        tempBespeakDay: '',
        bespeakHour: '',
        showPicker: false,
        currentDate: new Date(),
        storeName: '',
        showPicker0: false,
        columnsOfHour: [
          {
            values: HOURS(),
            defaultIndex: 0
          },
          {
            values: MINUTE(),
            defaultIndex: 0
          }
        ],
        showPicker1: false,
        columnsOfStore: []
      }
    },
    created () {
      this.funGetBankList()
    },
    async mounted () {
      const H = this.currentDate.getHours().toString().padStart(2, '0')
      const M = this.currentDate.getMinutes().toString().padStart(2, '0')
      const HINDEX = this.columnsOfHour[0].values.indexOf(H)
      const MINDEX = this.columnsOfHour[1].values.indexOf(M)
      this.columnsOfHour[0].defaultIndex = HINDEX >= 0 ? HINDEX : 0
      this.columnsOfHour[1].defaultIndex = MINDEX >= 0 ? MINDEX : 0
      await this.$nextTick()
      this.$refreshTitle('进度查询')
    },
    methods: {
      onConfirm (value) {
        const date = new Date(value)
        this.showPicker = false
        this.$nextTick(() => {
          this.showPicker0 = true
        })
        this.tempBespeakDay = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
      },
      onHourPickerConfirm (value) {
        const vm = this
        const bespeakTime = this.tempBespeakDay + ' ' + value[0] + ':' + value[1]
        const selectTime = platform.ios ? bespeakTime.replace(/-/g, '/') : bespeakTime
        const date = new Date(selectTime)
        if (date.getDay() === 0 || date.getDay() === 6 || date.getHours() < 8 || date.getHours() >= 17) {
          Toast({
            message: '工作时间为周一到周五9:00-17:00',
            onClose: function () {
              vm.showPicker0 = false
              vm.$nextTick(() => {
                vm.showPicker = true
                vm.bespeakDay = ''
                vm.bespeakHour = ''
              })
            }
          })
          return
        }
        if (Math.round(date.getTime() / 1000) < Math.round(this.currentDate.getTime() / 1000) + 3600) {
          Toast({
            message: '需要提前1小时预约哦',
            onClose: function () {
              vm.showPicker0 = false
              vm.$nextTick(() => {
                vm.showPicker = true
                vm.bespeakDay = ''
                vm.bespeakHour = ''
              })
            }
          })
          return
        }
        this.showPicker0 = false
        this.bespeakDay = this.tempBespeakDay
        this.bespeakHour = value[0] + ':' + value[1]
      },
      onStorePickerConfirm (value) {
        this.storeName = value
        this.showPicker1 = false
      },
      funGetBankList () {
        getBankList(this.id).then(res => {
          if (res.status) {
            this.columnsOfStore = res.data.map(item => item.bankName)
          } else {
            Toast(res.msg)
          }
        }).catch(err => {
          Toast(err)
        })
      },
      funSubmit () {
        const postData = {
          id: this.id,
          bankName: this.storeName,
          time: this.bespeakDay + ' ' + this.bespeakHour // 预约时间
        }
        if (!this.bespeakDay || !this.bespeakHour) {
          Toast('请选择时间')
          return
        }
        if (!postData.bankName) {
          Toast('请选择办理网点')
          return
        }
        const myToast = Toast.loading({
          message: '提交中...',
          duration: 1000 * 100,
          forbidClick: true
        })
        postBespeak(postData).then(res => {
          myToast.clear()
          if (res.status) {
            Toast({
              type: 'success',
              message: '提交成功',
              forbidClick: true,
              onClose: () => {
                this.$router.push({ path: `/loan/detail/${postData.id}` })
              }
            })
            return
          }
          Toast(res.msg)
        }).catch(err => {
          myToast.clear()
          Toast(err.msg)
        })
      }
    }
  }

  const HOURS = () => {
    const res = []
    for (let i = 0; i < 24; i++) {
      if (res.indexOf(i) < 0) {
        res.push(i.toString().padStart(2, '0'))
      }
    }
    return res
  }

  const MINUTE = () => {
    const res = []
    for (let i = 0; i < 60; i++) {
      if (res.indexOf(i) < 0) {
        res.push(i.toString().padStart(2, '0'))
      }
    }
    return res
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding-top: 24px;
    background: #fff;
  }

  h2 {
    width: 327px;
    line-height: 33px;
    font-size: 24px;
    font-weight: 500;
    color: #333;
  }

  .subtitle {
    width: 327px;
    margin-top: 4px;
    line-height: 22px;
    font-size: 16px;
    color: #333;
  }

  ul {
    li {
      display: flex;
      align-items: center;
      width: 327px;
      height: 50px;
      padding: 0 9px;
      margin-top: 24px;
      background: #FAFAFA;
      border-radius: 4px;
      border: 1px solid #E8E8E8;

      &:nth-of-type(1) {
        margin-top: 40px;
      }
    }

    img {
      width: 20px;
      height: 20px;
    }

    p {
      margin-top: 4px;
      margin-left: 3px;
      line-height: 22px;
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }

  .submit {
    width: 327px;
    height: 45px;
    margin-top: 41px;
    border-radius: 4px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
    box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
  }
</style>
