<template>
  <mu-form-item :label="currentConfig.label" :prop="currentConfig.key" :inline="currentConfig.inline"
                :tip="currentConfig.tip"
                :validators="currentConfig.validators" :trigger="['blur', 'change']">
    <el-date-picker class="mu-datePicker" :class="'mu-'+ currentConfig.size"
                    v-model="currentValue"
                    :type="currentConfig.mode"
                    :disabled="currentConfig.disabled"
                    :readonly="currentConfig.readonly"
                    :editable="currentConfig.editable"
                    :clearable="currentConfig.clearable"
                    :format="currentConfig.format"
                    :popper-class="currentConfig.mode == 'date' ? 'mu-datePicker' : 'mu-monthPicker'"
                    :value-format="currentConfig.valueFormat"
                    :placeholder="currentConfig.placeholder"
                    :picker-options="currentConfig.mode == 'date' ? pickerOptions : {}"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @change="handleChange"></el-date-picker>
  </mu-form-item>
</template>

<script lang="ts">
  import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator';
  // import { DtFormItem } from "src/components";

  type Size = 'small' | 'medium' | 'large';

  interface InputConfig {
    name?: string,
    size?: Size,
    disabled?: boolean,
    readonly?: boolean,
    placeholder?: string
    label?: string,
    key?: string,
    inline?: boolean,
    tip?: string,
    validators?: any,
    editable?: boolean,
    clearable?: boolean,
    mode?: string,
    format?: string,
    valueFormat?: string,
    pickerOptions?: any
  }

  @Component({
    name: 'mcDatepicker',
    components: {
      // DtFormItem
    }
  })
  export default class extends Vue {
    @Prop({ default: () => [] }) private value!: string | undefined;
    @Prop({ default: () => [] }) private config?: InputConfig;
    private currentValue: string = this.value;
    private defaultConfig: any = {
      size: 'medium',
      mode: 'date'
    };
    pickerOptions: any = {
      shortcuts: [{
        text: '今日',
        onClick(picker: any) {
          picker.$emit('pick', new Date());
        }
      }]
    };

    // 检测值
    @Watch("value")
    onValueChanged(val: string) {
      this.currentValue = val;
    }

    // 合并默认数据
    get currentConfig() {
      const result = this.config;
      Object.keys(this.defaultConfig).forEach((key: string) => {
        if (this.config[key] === undefined) result[key] = this.defaultConfig[key];
      });
      return result;
    }

    /**
     * 输入框值改变
     * @author JieShuai
     * @param value 值
     */
    @Emit('on-change')
    handleChange(value: string) {
      this.$emit('input', value);
    }

    /**
     * 失去焦点事件
     * @author JieShuai
     * @param any event 事件
     */
    handleBlur(event: any) {
      this.$emit('on-blur', event);
    }

    /**
     * 使input 获取焦点
     * @author tanxj
     * @param any event 事件
     */
    handleFocus(event: any) {
      this.$emit('on-focus', event);
    }

  }
</script>
