<template>
  <div class="zte-item-range">
    <label v-if="disabled || props.type === 'label'" class="label">
      {{ `${form[props.start] || ''} ${$t('至')} ${form[props.end] || ''}` }}
    </label>
    <template v-else-if="props.type === 'date'">
      <el-col :span="11">
        <el-form-item :prop="props.start">
          <el-date-picker
            v-model="form[props.start]"
            :type="props.picker || 'date'"
            :placeholder="placeholder"
            :picker-options="startPickerOptions"
            :value-format="dateFormat"
            style="width: 100%;">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2" style="text-align: center;">-</el-col>
      <el-col :span="11">
        <el-form-item :prop="props.end">
          <el-date-picker
            :placeholder="placeholder"
            v-model="form[props.end]"
            :type="props.picker || 'date'"
            :picker-options="endPickerOptions"
            :value-format="dateFormat"
            style="width: 100%;"
            >
          </el-date-picker>
        </el-form-item>
      </el-col>
    </template>
    <template v-else-if="props.type === 'num'">
      <el-col :span="11">
        <el-form-item :prop="props.start">
          <el-input
            :disabled="props.disabled"
            max="999999999999999"
            :min="props.min"
            maxlength="16"
            type="number"
            v-model.number="form[props.start]"
            clearable>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2" style="text-align: center;">至</el-col>
      <el-col :span="11">
        <el-form-item :prop="props.end">
          <el-input
            :disabled="props.disabled"
            max="999999999999999"
            :min="props.min"
            maxlength="16"
            type="number"
            v-model.number="form[props.end]"
            clearable>
          </el-input>
        </el-form-item>
      </el-col>
    </template>
  </div>
</template>

<script>
export default {
  name: 'zteItemRange',
  props: {
    props: {
      type: Object,
      default: () => ({}),
    },
    form: Object,
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
    same: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    startPickerOptions() {
      return {
        disabledDate: this.startDisabledDate,
      };
    },
    endPickerOptions() {
      return {
        disabledDate: this.endDisabledDate,
      };
    },
    dateFormat() {
      let format = '';
      if (this.props.type === 'date') {
        format = 'yyyy-MM-dd';
      }
      if (this.props.type === 'datetime') {
        format = 'yyyy-MM-dd HH:mm:ss';
      }
      return this.props.valueFormat || format;
    },
  },
  methods: {
    startDisabledDate(time) {
      let flag = false;
      if (this.props.minDate && this.form[this.props.end]) {
        flag = (
          this.same ?
            time.getTime() > new Date(`${this.form[this.props.end]} 00:00:00`).getTime() :
            time.getTime() >= new Date(`${this.form[this.props.end]} 00:00:00`).getTime()
          )
          || time.getTime() < new Date(this.props.minDate);
      } else if (this.form[this.props.end]) {
        flag = (
          this.same ?
            time.getTime() > new Date(`${this.form[this.props.end]} 00:00:00`).getTime() :
            time.getTime() >= new Date(`${this.form[this.props.end]} 00:00:00`).getTime()
          );
      } else if (this.props.minDate) {
        flag = time.getTime() < new Date(this.props.minDate);
      }
      return flag;
    },
    endDisabledDate(time) {
      let flag = false;
      if (this.props.minDate && this.form[this.props.end]) {
        flag = (
          this.same ?
            time.getTime() < new Date(`${this.form[this.props.start]} 00:00:00`).getTime() :
            time.getTime() <= new Date(`${this.form[this.props.start]} 00:00:00`).getTime()
          )
          || time.getTime() < new Date(this.props.minDate);
      } else if (this.form[this.props.start]) {
        flag = (
          this.same ?
            time.getTime() < new Date(`${this.form[this.props.start]} 00:00:00`).getTime() :
            time.getTime() <= new Date(`${this.form[this.props.start]} 00:00:00`).getTime()
          );
      } else if (this.props.minDate) {
        flag = time.getTime() < new Date(this.props.minDate);
      }
      return flag;
    },
  },
};
</script>
