<template>
  <div class="bio-date-picker" :class="type" @click="showPicker" v-if="itemList">
    <el-input
      prefix-icon="el-icon-date"
      v-model="itemList.value"
      :disabled="disabled"
      clearable
      @change="dataChange"
      @clear="clearInput">
    </el-input>
    <el-date-picker
      ref="date"
      class="the-picker"
      :format="formatV"
      :value-format="formatV"
      :disabled="disabled"
      v-model="pickerValue"
      :type="type"
      @change="pickerChange"
      @blur="pickerBlur">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'BioDatePicker',

  props: {
    innerValue: {
      type: Object
    },
    itemList: {
      type: Object,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'date'
    }
  },

  data() {
    return {
      pickerValue: ''
    };
  },

  computed: {
    formatV() {
      let _format = '';

      if (this.itemList) _format = this.itemList.sysformat || this.itemList.format || '';
      if (this.innerValue) _format = _format || this.innerValue.sysformat || this.innerValue.format || '';

      return _format;
    }
  },

  created() {
    if (this.dateCheck()) this.pickerValue = this.itemList.value;
  },

  methods: {
    isTrue(o) {
      let flag = o && o !== 'null' && o !== 'undefined' && o !== 'false' && o !== 'NaN';
      return flag || flag === 0;
    },

    showPicker(e) {
      if (!this.disabled && e.target.className.indexOf('el-input__clear') < 0) {
        this.$refs.date.showPicker();

        if (this.itemList.value === '') {
          this.pickerValue = '';
        } else if (this.dateCheck()) {
          this.pickerValue = this.itemList.value;
        }
      }
    },

    pickerChange() {
      this.$set(this.itemList, 'value', this.pickerValue);
      this.$emit('selectChange');
    },

    pickerBlur() {
      if (!this.pickerValue && !this.itemList.value) {
        this.$set(this.itemList, 'value', this.pickerValue);
      }
    },

    dataChange() {
      this.$emit('selectChange');
    },

    clearInput() {
      this.$refs.date.hidePicker();
    },

    // 校验时间格式
    dateCheck() {
      let flag = this.isTrue(this.itemList.value);
      let format = this.itemList.sysformat || this.itemList.format || '';
      let formatArr = format.split('-');
      let value = this.itemList.value || '';
      let valueArr = value.split('-');

      if (flag && new Date(this.itemList.value).toDateString() !== 'Invalid Date') {
        if (formatArr.length !== valueArr.length) flag = false;
        valueArr.map(item => { if (item === '') flag = false; });
      } else {
        flag = false;
      }
      return flag;
    }
  }
};
</script>

<style lang="scss">
.bio-date-picker {
  position: relative;

  .the-picker {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -99;
  }
}

.inner-box {
  .bio-date-picker.date {
    width: 110px;
  }

  .the-picker.date {
    width: 110px;
  }

  .bio-date-picker.datetime {
    width: 143px;
  }

  .the-picker.datetime {
    width: 143px;
  }
}

</style>
