<template>
  <div>
    <!-- 时间选择组件 -->
    <van-row class="time-choose">
      <van-col span="11" class="padding-10" style="padding-right: 3px">
        <van-field v-model="start" @click.stop="chooseTime('start')" :clickable="true" :readonly="true" placeholder="开始日期" />
      </van-col>
      <van-col span="2" class="to"> — </van-col>
      <van-col span="11" class="padding-10" style="padding-left: 3px">
        <van-field v-model="end" @click.stop="chooseTime('end')" :clickable="true" :readonly="true" placeholder="结束日期" />
      </van-col>
    </van-row>
    <van-popup
        v-model="showTimeDialog"
        get-container="body"
        close-icon="close"
        position="bottom"
    >
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          v-if="showTimeDialog"
          @confirm="confirm"
          @cancel="cancel"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
        />
    </van-popup>
  </div>
</template>

<script>
import { getFormateDate } from '@/utils/common'

export default {
  name: 'TimeChoose',
  data() {
    return {
      selector: '',
      start: getFormateDate(new Date(), 'yyyy-MM-dd'),
      end: getFormateDate(new Date(), 'yyyy-MM-dd'),
      minDate: new Date(),
      maxDate: new Date(),
      showTimeDialog: false,
      currentDate: new Date()
    }
  },
  props: {
    /*
     * 时间选择器的可选最小时间
     */
    min: {
      type: Date,
      default: () => new Date(new Date().getFullYear() - 10, 0, 1)
    },
    /*
     * 时间选择器的可选最大时间
     */
    max: {
      type: Date,
      default: () => new Date()
    },
    /*
     * 时间选择器的重置开始时间
     */
    startTime: {
      type: String,
      default: ''
    },
    /*
     * 时间选择器的重置结束时间
     */
    endTime: {
      type: String,
      default: ''
    }
  },
  watch: {
    startTime (val) {
      if (!val) return false
      this.start = val
    },
    endTime (val) {
      if (!val) return false
      this.end = val
    }
  },
  mounted() {
    console.log(this.min)
  },
  methods: {
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      } else if (type === 'day') {
        return `${val}日`
      }
      return val
    },
    confirm (data) {
      this[this.selector] = getFormateDate(new Date(data), 'yyyy-MM-dd')
      this.showTimeDialog = false
      this.$emit('confirm', {
        start: this.start,
        end: this.end
      })
    },
    cancel () {
      this.showTimeDialog = false
    },
    chooseTime (type) {
      this.selector = type
      this.currentDate = new Date(this[type])
      this.showTimeDialog = true
      if (type === 'end') {
        this.minDate = !this.start ? new Date() : new Date(this.start)
        this.maxDate = this.max
      } else if (type === 'start') {
        this.maxDate = !this.end ? new Date() : new Date(this.end)
        this.minDate = this.min
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.time-choose {
  .van-cell.van-field {
    padding: 5px 6px;
    background-color: #EFF5F9;
    /deep/ input {
      font-size: 14px;
      text-align: center;
    }
  }
  .to {
    text-align: center;
    line-height: 53px;
    color: #B9B9BB;
  }
}
</style>
