<template>
  <el-form-item  :label-width="labelWidth" :label="label" :rules="requireRule(required, label)" :prop="prop">
    <el-date-picker
      v-model="$parent.model[prop]"
      :type="type"
      :value-format="format"
      :start-placeholder="startPlaceholder"
      range-separator="至"
      :end-placeholder="endPlaceholder"
      :picker-options="pickerBeginOption || datePickerOptions"
      :disabled="disabled"
      @change="arrayToStr"
      :clearable="clearable"
      :style="width?{width:width}:{}"
    >
    </el-date-picker>
  </el-form-item>
</template>

<script>
import mixin from './mixin'
// import {compareDateWithAccuracy, isDate} from "../../../../utils";
import {compareDateWithAccuracy, isDate} from "@/utils/dateUtils";
export default {
  mixins: [mixin],
  props: {
    type: {
      type: String,
      default: 'daterange',
    },
    startDt:{
      type: String,
      default: '',
    },
    endDt:{
      type: String,
      default: '',
    },
    propStart:{
      type: String,
      default: 'beginTime',
    },
    propEnd:{
      type: String,
      default: 'endTime',
    },
    pickerBeginOption: {
      type: Object,
      default: null
    },
    labelWidth:{
      type: String
    },
    width:{
      type: String
    },
    miniTime:{
      default: false
    },
    maxTime:{
      default: false
    },
    defaultValue:{
      type: Array,
      default:() => []
    },
    miniAble:{
      type: Boolean,
      default: true
    },
    maxAble:{
      type: Boolean,
      default: true
    },
    showModel:{
      type: Boolean,
      default: true
    },
  },
  computed:{
    format() {
      switch (this.type) {
        case 'daterange':
          return 'yyyy-MM-dd'
        case 'monthrange':
          return 'yyyy-MM'
        case 'datetimerange':
          return 'yyyy-MM-dd HH:mm:ss'
      }
    },
    startPlaceholder(){
      switch (this.type) {
        case 'daterange':
          return '开始日期'
        case 'monthrange':
          return '开始月份'
        case 'datetimerange':
          return '开始时间'
      }
    },
    endPlaceholder(){
      switch (this.type) {
        case 'daterange':
          return '结束日期'
        case 'monthrange':
          return '结束月份'
        case 'datetimerange':
          return '结束时间'
      }
    },

  },
  methods: {
    isDate,
    arrayToStr(e){
      if (!!e) {
        // this.$parent.model.startDt = ""
        // this.$parent.model.endDt = ""
        this.$parent.model[this.propStart] = ""
        this.$parent.model[this.propEnd] = ""
        if(this.type == 'daterange'){
          this.$parent.model[this.propStart] =  e[0] + " 00:00:00"
          this.$parent.model[this.propEnd] = e[1] + " 23:59:59"
        }else{
          this.$parent.model[this.propStart] =  e[0]
          this.$parent.model[this.propEnd] = e[1]
        }
      }else{
        this.$parent.model[this.propStart] = undefined
        this.$parent.model[this.propEnd] = undefined
      }

      // 如果不需要model，并且存在prop的话
      if (!this.showModel) {
        delete this.$parent.model[this.prop];
      }

      this.$emit('change');
    },
  },
  mounted() {
      if(this.defaultValue != null && this.defaultValue != '' && this.defaultValue.length >0
      && (this.$parent.model[this.prop] == null || this.$parent.model[this.prop] == '' || this.$parent.model[this.prop] == undefined || this.$parent.model[this.prop].length == 0)){
      this.$parent.model[this.prop] = this.defaultValue
      if(this.type == 'daterange'){
        this.$parent.model[this.propStart] = this.defaultValue[0] + " 00:00:00"
        this.$parent.model[this.propEnd] = this.defaultValue[1]  + " 23:59:59"
      }else{
        this.$parent.model[this.propStart] = this.defaultValue[0]
        this.$parent.model[this.propEnd] = this.defaultValue[1]
      }

    }
  },
  data(){
    return{
      datePickerOptions: {
        disabledDate: time => {
          //只有最小时间限制
          if(this.miniTime && !this.maxTime){
            if(this.maxAble){
              return  compareDateWithAccuracy(time,this.isDate(this.miniTime)? this.miniTime :new Date(this.miniTime),this.compareType)  < 0
            }else{
              return  compareDateWithAccuracy(time,this.isDate(this.miniTime)? this.miniTime :new Date(this.miniTime),this.compareType)  <= 0
            }
          }
          //只有最大时间限制
          if (this.maxTime && !this.miniTime){
            if(this.miniAble){
              return  compareDateWithAccuracy(time,this.isDate(this.maxTime) ? this.maxTime :new Date(this.maxTime),this.compareType)  > 0
            }else{
              return  compareDateWithAccuracy(time,this.isDate(this.maxTime) ? this.maxTime :new Date(this.maxTime),this.compareType)  >= 0
            }
          }
          if (this.maxTime && this.miniTime){
            //填入时间都可使用
            if(this.miniAble && this.maxAble){
              return  compareDateWithAccuracy(time,this.isDate(this.maxTime) ? this.maxTime : new Date(this.maxTime),this.compareType)  > 0
                || compareDateWithAccuracy(time,this.isDate(this.miniTime)? this.miniTime :new Date(this.miniTime),this.compareType)  < 0
            }else if(this.miniAble && !this.maxAble){
              return  compareDateWithAccuracy(time,this.isDate(this.maxTime) ? this.maxTime : new Date(this.maxTime),this.compareType)  >= 0
                || compareDateWithAccuracy(time,this.isDate(this.miniTime)? this.miniTime :new Date(this.miniTime),this.compareType)  < 0
            }else if(!this.miniAble && this.maxAble){
              return  compareDateWithAccuracy(time,this.isDate(this.maxTime) ? this.maxTime : new Date(this.maxTime),this.compareType)  >  0
                || compareDateWithAccuracy(time,this.isDate(this.miniTime)? this.miniTime :new Date(this.miniTime),this.compareType)  <= 0
            }else if(!this.miniAble && !this.maxAble){
              return  compareDateWithAccuracy(time,this.isDate(this.maxTime) ? this.maxTime : new Date(this.maxTime),this.compareType)  >= 0
                || compareDateWithAccuracy(time,this.isDate(this.miniTime)? this.miniTime :new Date(this.miniTime),this.compareType)  <= 0
            }
          }
          return false
        }
      }
    }
  }
}
</script>
<style lang='scss' scoped>
 .detail-form .el-input, .detail-form .el-input, .detail-form .number .el-form-item__content, .detail-form .el-input__inner {
  width: 240px!important;
}
</style>
