<template>
  <!-- 月份选择 -->
  <a-month-picker
    :style="`width:${record.options.width}`"
    v-if="
      record.type === 'date' &&
        record.options.format === 'YYYY-MM' &&
        record.options.range === false
    "
    :disabled="record.options.disabled || record.options.readOnly"
    :placeholder="$locale(record.options.placeholder)"
    :allowClear="record.options.clearable"
    :format="record.options.format"
    @change="handleSelectChange"
    :value="date"
    :disabledDate="disabledDate"
  />
  <!-- 日期选择 -->
  <a-date-picker
    :style="`width:${record.options.width}`"
    v-else-if="record.type === 'date' && record.options.range === false"
    :disabled="record.options.disabled || record.options.readOnly"
    :show-time="record.options.showTime"
    :allowClear="record.options.clearable"
    :placeholder="$locale(record.options.placeholder)"
    :format="record.options.format"
    @change="handleSelectChange"
    :value="date"
    :disabledDate="disabledDate"
  />

  <!-- 范围日期选择 -->
  <a-range-picker
    :style="`width:${record.options.width}`"
    v-else-if="record.type === 'date' && record.options.range === true"
    :show-time="record.options.showTime"
    :disabled="record.options.disabled || record.options.readOnly"
    :allowClear="record.options.clearable"
    :placeholder="record.options.rangePlaceholder"
    :format="record.options.format"
    @change="handleSelectChange"
    :value="date"
  />
</template>
<script>
import moment from "moment";
import LocleUtil from "../utils/LocleUtil";
export default {
  name: 'k-date-picker',
  // eslint-disable-next-line vue/require-prop-types
  props: ["record", "value", "form"],
  data() {
    return {
      // date: undefined
      preItem: '',
      postItem: ''
    };
  },
  created() {
    if (this.record && this.record.options) {
      this.preItem = this.record.options.preItem
      this.postItem = this.record.options.postItem
    }
  },
  computed: {
    date() {
      if (
        !this.value ||
        (this.record.options.range && this.value.length === 0)
      ) {
        return undefined;
      } else if (this.record.options.range) {
        return this.value.map(item => moment(item, this.record.options.format));
      } else {
        return moment(this.value, "YYYY-MM-DD HH:mm:ss");
      }
    }
  },
  methods: {
    $locale(params) {
      return LocleUtil.getLocale(params)
    },
    handleSelectChange(val, timeString) {
      let date;
      if (!val || (this.record.options.range && val.length === 0)) {
        date = "";
      } else if (this.record.options.range) {
        date = val.map(item => item.format(this.record.options.format));
      } else {
        date = moment(timeString, this.record.options.format).format("YYYY-MM-DD HH:mm:ss");
      }
      this.$emit("change", date);
      this.$emit("input", date);
    },
    disabledDate(currentDate) {
      if (!currentDate) {
        return false;
      }
      //对日期做限制，当前日期之前
      if (this.record.options.currentDateBefore) {
        const current = moment(new Date(), 'YYYY-MM-DD HH:mm:ss');
        if (current.valueOf() <= currentDate.valueOf()) {
          return true
        }
      }
      //对日期做限制，当前日期之后
      if (this.record.options.currentDateAfter) {
        const current = moment(new Date(), 'YYYY-MM-DD HH:mm:ss');
        if (current.valueOf() > currentDate.valueOf()) {
          return true
        }
      }
      if (this.form && this.preItem) {
        const preValue = this.form.getFieldValue(this.preItem)
        if (preValue) {
          const startValue = moment(preValue, 'YYYY-MM-DD HH:mm:ss');
          if (startValue.valueOf() > currentDate.valueOf()) {
            return true
          }
        }
      }
      if (this.form && this.postItem) {
        const postValue = this.form.getFieldValue(this.postItem)
        if (postValue) {
          const endValue = moment(postValue, 'YYYY-MM-DD HH:mm:ss');
          if (currentDate.valueOf() > endValue.valueOf()) {
            return true
          }
        }
      }
      return false
    }
  }
};
</script>
