<template>
  <a-range-picker
    v-model="modelValue"
    style="width: 100%"
    :mode="[modeType, modeType]"
    :show-time="isShowTime"
    :open="isOpen"
    :format="format"
    :placeholder="placeholder"
    :disabled="!isEdit(prop)"
    @openChange="isOpen = !isOpen"
    @panelChange="panelChangeOne"
    @change="onChange"
    @ok="onOk"
  />
</template>

<script>
import moment from 'moment'
import { formatDate } from '@/utils/util'
import { isEdit } from '@/components/hrhx/approval/utils/set-form-control'

export default {
  name: 'TRangePicker',
  /**
   * 日期选择
   * @description 时间段日期选择
   * @property {Array<string>|Object} value v-model语法糖
   * @property {String} mode 日期模式[time|date|month|year|decade]
   * @property {Array<string>} placeholder 日期框提示信息
   * @property {String} prop 需要通过 isEdit 校验的字段
   * @author Matrix
   */
  props: {
    value: {
      type: [Array, Object],
      default: () => [null, null]
    },
    mode: {
      type: String,
      required: false,
      default: 'second'
    },
    placeholder: {
      type: Array,
      required: false,
      default: () => ['开始时间', '结束时间']
    },
    prop: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      modelValue: this.value,
      modeType: 'date',
      isOpen: false,
      format: 'YYYY-MM-DD',
      isShowTime: false,
      dateTime: []
    }
  },
  watch: {
    value: {
      handler(val) {
        const [start, end] = val
        if (start && end) this.modelValue = [moment(start, this.format), moment(end, this.format)]
      },
      immediate: true
    },
    mode: {
      handler(type) {
        switch (type) {
          case 'year':
            this.modeType = 'year'
            this.format = 'YYYY'
            this.isShowTime = false
            break
          case 'month':
            this.modeType = 'month'
            this.format = 'YYYY-MM'
            this.isShowTime = false
            break
          case 'hour':
            this.modeType = 'date'
            this.format = 'YYYY-MM-DD HH'
            this.isShowTime = { format: this.format.split(' ')[1] }
            break
          case 'minute':
            this.modeType = 'date'
            this.format = 'YYYY-MM-DD HH:mm'
            this.isShowTime = { format: this.format.split(' ')[1] }
            break
          case 'second':
            this.modeType = 'date'
            this.format = 'YYYY-MM-DD HH:mm:ss'
            this.isShowTime = { format: this.format.split(' ')[1] }
            break
          default:
            this.modeType = 'date'
            this.format = 'YYYY-MM-DD'
            this.isShowTime = false
            break
        }
        const [start, end] = this.value
        if (!start || !end) {
          const date = {
            start: null,
            end: null
          }
          this.$emit('input', [date.start, date.end])
          this.$emit('change', date)
        } else {
          const date = {
            start: formatDate(start, this.format),
            end: formatDate(end, this.format)
          }
          this.$emit('input', [date.start, date.end])
          this.$emit('change', date)
        }
      },
      immediate: true
    }
  },
  methods: {
    isEdit,

    /**
     * 日期面板发生变化回调
     * @param {Moment} value
     * @param {Array<string>} mode
     * @author Matrix
     */
    panelChangeOne(value, mode) {
      const date = {
        start: value[0].format(this.format),
        end: value[1].format(this.format)
      }
      this.$emit('input', [date.start, date.end])
      this.$emit('change', date)
      switch (this.mode) {
        case 'year':
          // open: [null, 'year'] | close: ['year', null]
          this.isOpen = mode[1] === 'year'
          break
        case 'month':
          // open: ['date', 'month'] | close: ['month', 'date']
          this.isOpen = mode[1] === 'month'
          break
      }
    },

    /**
     * 日期面板变化时的回调
     * @param {Array<moment, moment>} value
     * @param {Array<string, string>} dateString
     * @author Matrix
     * @since 2022/09/16
     */
    onChange(value, dateString) {
      if (['hour', 'minute', 'second'].includes(this.mode)) {
        this.dateTime = value.length === 0 ? [null, null] : dateString
        const date = {
          start: this.dateTime[0],
          end: this.dateTime[1]
        }
        this.$emit('input', [date.start, date.end])
        this.$emit('change', date)
      } else {
        const date = {
          start: !dateString[0] ? null : dateString[0],
          end: !dateString[1] ? null : dateString[1]
        }
        this.$emit('input', [date.start, date.end])
        this.$emit('change', date)
      }
    },

    /**
     * 确认按钮回调
     * @author Matrix
     * @since 2022/09/16
     */
    onOk() {
      const dateTime = this.dateTime
      const date = {
        start: dateTime[0],
        end: dateTime[1]
      }
      this.$emit('input', [dateTime[0], dateTime[1]])
      this.$emit('change', date)
    }
  }
}
</script>

<style scoped>
::v-deep .ant-input-disabled {
  color: rgba(0, 0, 0, 0.65);
  background-color: #fff;
}
</style>
