<script>
import util from 'eoss-ui/src/utils/util';
const formats = {
  date: 'yyyy-MM-dd',
  month: 'yyyy-MM',
  datetime: 'yyyy-MM-dd HH:mm:ss',
  time: 'HH:mm:ss',
  week: 'yyyy年第WW周',
  timerange: 'HH:mm:ss',
  daterange: 'yyyy-MM-dd',
  monthrange: 'yyyy-MM',
  datetimerange: 'yyyy-MM-dd HH:mm:ss',
  year: 'yyyy',
  halfyear: 'bb',
  quarter: 'qq'
};
export default {
  name: 'EsDatePicker',
  inheritAttrs: false,
  inject: {
    esForm: {
      default: ''
    }
  },
  props: {
    value: [String, Array, Number, Date],
    display: {
      type: Boolean,
      default: true
    },
    hide: {
      type: Boolean,
      default: false
    },
    range: {
      type: Boolean,
      default: false
    },
    // 提交数据时是否转成时间戳
    timestamp: {
      type: Boolean,
      default: false
    },
    unlinkPanels: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'date'
    },
    rangeSeparator: {
      type: String,
      default: '-'
    },
    format: String,
    readonly: Boolean,
    plain: Boolean,
    default: Boolean,
    setFormKeys: Array
  },
  data() {
    return {
      date: ''
    };
  },
  computed: {
    models: {
      get() {
        return this.value ? this.value : this.dae;
      },
      set(val) {
        return val;
      }
    },
    formats() {
      return this.format ? this.format : formats[this.dateType];
    },
    dateType() {
      return (this.type === 'datetime' ||
        this.type === 'dater' ||
        this.type === 'month') &&
        this.range
        ? this.type + 'range'
        : this.type;
    },
    config() {
      return this.range ||
        this.type === 'datetimerange' ||
        this.type === 'daterange' ||
        this.type === 'monthrange'
        ? {
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间',
            unlinkPanels: this.unlinkPanels
          }
        : {};
    },
    class() {
      return this.range ||
        this.type === 'datetimerange' ||
        this.type === 'daterange' ||
        this.type === 'monthrange'
        ? 'es-date-picker-range'
        : '';
    }
  },
  watch: {
    models: {
      deep: true,
      handler(val) {
        if (
          this.setFormKeys &&
          this.esForm &&
          this.dateType.indexOf('range') > -1
        ) {
          let obj = this.esForm.models;
          this.setFormKeys.forEach((item, index) => {
            if (val && val.length) {
              obj[item] = val[index];
            } else {
              delete obj[item];
            }
          });
          this.esForm.models = obj;
        }
      }
    },
    'esForm.models': {
      deep: true,
      handler(val) {
        if (
          this.setFormKeys &&
          this.dateType.indexOf('range') > -1 &&
          !util.isExist(this.value)
        ) {
          this.date = this.setFormKeys.map((item) => {
            return val[item] || '';
          });
        }
      }
    }
  },
  mounted() {},
  methods: {
    getData(val) {
      if (val) {
        if (
          typeof val === 'number' ||
          (typeof val === 'string' && this.format)
        ) {
          return this.dateFormat(val);
        }
        if (Array.isArray(val)) {
          val
            .map((item) => {
              if (item) {
                return typeof item === 'number' ||
                  (typeof item === 'string' && this.format)
                  ? this.dateFormat(item)
                  : item;
              }
              return '';
            })
            .join(this.rangeSeparator);
        }
        return val;
      }
      return '';
    },
    dateFormat(date) {
      let newDate = '';
      switch (this.dateType) {
        case 'year':
          newDate = util.formatDate(date, this.formats);
          break;
        case 'halfyear':
          newDate = util.formatDate(date, this.formats);
          break;
        case 'month':
          newDate = util.formatDate(date, this.formats);
          break;
        case 'time':
          newDate = util.formatDate(date, this.formats);
          break;
        case 'datetime':
          newDate = util.formatDate(date, this.formats);
          break;
        case 'quarter':
          newDate = util.formatDate(date, this.formats);
          break;
        default:
          newDate = util.formatDate(date, this.formats);
      }
      return newDate;
    },
    showPicker() {
      this.$refs.elDate.showPicker();
    }
  },
  render(h) {
    if (!this.hide) {
      if (this.readonly) {
        return h(
          'div',
          { class: ['es-input__inner', { 'es-plain': this.plain }] },
          [this.getData(this.models)]
        );
      }
      return h('el-date-picker', {
        class: ['es-date-picker', this.class],
        attrs: {
          ...this.$attrs,
          ...this.config,
          type: this.dateType,
          valueFormat: this.timestamp ? 'timestamp' : this.formats,
          rangeSeparator: this.rangeSeparator,
          format: this.formats,
          editable: false,
          value: this.models
        },
        ref: 'elDate',
        on: this.$listeners,
        directives: [
          {
            name: 'show',
            value: this.display
          }
        ]
      });
    } else {
      return '';
    }
  }
};
</script>
