<template>
  <div>
    <a-date-picker
      v-model="modelValue"
      style="width: 100%"
      :show-time="showTime"
      :placeholder="placeholder"
      :mode="mode"
      :open="isOpen"
      :format="format"
      :disabled="!isEdit(prop) || disabled"
      @openChange="isOpen = !isOpen"
      @panelChange="panelChangeOne"
      @change="dateChange"
    />
  </div>
</template>

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

export default {
  name: 'TDatePicker',
  /**
   * 组件属性列表
   * @property {String} value - 当前选中的日期
   * @property {String} mode - 日期选择框的类型，可选值为 date | month | year
   * @property {String} placeholder - 日期选择框的提示文字
   * @property {String} prop - 需要通过 isEdit 校验的字段
   * @author Matrix
   */
  props: {
    value: {
      type: [String, Object],
      default: null
    },
    mode: {
      type: String,
      required: false,
      default: 'date'
    },
    placeholder: {
      type: String,
      required: false,
      default: '请选择日期'
    },
    prop: {
      type: String,
      required: false,
      default: ''
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      modelValue: this.value,
      // 控制日期选择框是否打开
      isOpen: false,
      // 日期格式化
      format: 'YYYY-MM-DD',
      showTime: false,
      types: {
        // moment 格式化
        moment: {
          year: 'YYYY',
          month: 'YYYY-MM',
          date: 'YYYY-MM-DD',
          time: 'YYYY-MM-DD HH:mm',
          dateTime: 'YYYY-MM-DD HH:mm:ss'
        },
        // utils/formatDate 自定义方法格式化
        format: {
          year: 'yyyy',
          month: 'yyyy-MM',
          date: 'yyyy-MM-dd',
          time: 'yyyy-MM-dd HH:mm',
          dateTime: 'yyyy-MM-dd HH:mm:ss'
        }
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.modelValue = val ? moment(val, this.format) : val
      },
      immediate: true
    },
    mode: {
      handler(key) {
        this.format = this.types.moment[key || 'dateTime']
        if (key === 'time' || key === 'dateTime') {
          this.showTime = true
        } else {
          this.showTime = false
        }
        if (this.modelValue) {
          const date = formatDate(this.modelValue._d, this.types.format[this.mode])
          this.$emit('input', date)
        }
      },
      immediate: true
    }
  },
  methods: {
    isEdit,

    /**
     * 日期面板变化时的回调
     * @param {Object} value
     * @author Matrix
     */
    panelChangeOne(value) {
      const date = formatDate(value._d, this.types.format[this.mode])
      this.$emit('input', date)
      this.isOpen = !this.isOpen
    },

    /**
     * 清除时间的回调
     * @param {Moment} date
     * @param {Object} dateString
     * @author Matrix
     */
    dateChange(date, dateString) {
      if (['date', 'time', 'dateTime'].includes(this.mode) && dateString) {
        this.$emit('input', dateString)
      } else {
        this.$emit('input', null)
      }
      this.$emit('change') // 消除验证
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .ant-input-disabled {
  color: rgba(0, 0, 0, 0.65);
  background-color: #fff !important;
  cursor: text;
  .ant-calendar-range-picker-input {
    cursor: text;
  }
}
</style>
