<template>
  <el-col :xl="span" :lg="lgSpan" :md="mdSpan" :sm="smSpan" :xs="xsSpan" class="datePicker">
    <el-form-item :label="label" :rules="[...requireRule(!disabled &&required, label, validate,trigger), ...rules]"
                  :prop="prop">
      <el-date-picker v-model="$parent.model[prop]" :type="type"
                      :default-time="defaultTime"
                      :placeholder="placeholder ||'请选择'"
                      :start-placeholder="'开始日期'"
                      :picker-options="pickerBeginOption || datePickerOptions"
                      :value-format="!!valueFormat ? valueFormat : format"
                      range-separator="-"
                      :end-placeholder="'结束日期'" :disabled="disabled" @change="dateChanged" :clearable="clearable">
      </el-date-picker>
    </el-form-item>
  </el-col>
</template>

<script>
import mixin from '../../mixin'
import {compareDateWithAccuracy, isDate} from "../../../../utils/dateUtils";

/**
 * 返回格式化后的日期（范围）
 * 日期类型返回单个字符串，日期范围返回包含开始和结束日期的数组
 */
export default {
  name:'CustomDatePicker',
  mixins: [mixin],
  props: {
    type: {
      type: String,
      default: 'date'
    },
    defaultTime: {
      type: String,
      default: '00:00:00'
    },
    isHour: {
      type: Boolean,
      default: false
    },
    pickerBeginOption: {
      type: Object,
      default: null
    },
    clearable: {
      type: Boolean,
      default: true
    },

    valueFormat: {
      type: String,
      default: null
    },
    miniTime: {
      default: null
    },
    maxTime: {
      default: null
    },
    validate: {
      type: String
    },
    trigger: {
      type: String,
      default: 'blur'
    },
    rules: {
      type: Array,
      default: () => []
    },
    span: {
      type: Number,
      default: 6
    },
    lgSpan: {
      type: Number,
      default: 8
    },
    mdSpan: {
      type: Number,
      default: 8
    },
    smSpan: {
      type: Number,
      default: 12
    },
    xsSpan: {
      type: Number,
      default: 24
    }

  },
  data() {
    return {
      datePickerOptions: {
        disabledDate: time => {
          if (this.miniTime && !this.maxTime) {
            return compareDateWithAccuracy(time, this.isDate(this.miniTime) ? this.miniTime : new Date(this.miniTime)) <= 0
          }
          if (this.maxTime && !this.miniTime) {
            return compareDateWithAccuracy(time, this.isDate(this.maxTime) ? this.maxTime : new Date(this.maxTime)) >= 0
          }
          if (this.maxTime && this.miniTime) {
            return compareDateWithAccuracy(time, this.isDate(this.maxTime) ? this.maxTime : new Date(this.maxTime)) >= 0
              || compareDateWithAccuracy(time, this.isDate(this.miniTime) ? this.miniTime : new Date(this.miniTime)) <= 0
          }
          return false
        }
      }
    }
  },
  computed: {
    format() {
      switch (this.type) {
        case 'date':
        case 'daterange':
          return 'yyyy-MM-dd'
        case 'month':
          return 'yyyy-MM'
        case 'datetime':
          return 'yyyy-MM-dd HH:mm:ss'
      }
    }
  },
  methods: {
    isDate,
    dateChanged(value) {
      if (this.isHour) {
        value = value.substring(0, value.indexOf(':')) + ':00'
        this.$parent.model[this.prop] = value
      }
      this.$emit('change', value)
    }
  }
}
</script>
