<template>
  <mu-form-item :label="currentConfig.label" :prop="currentConfig.key" :inline="currentConfig.inline"
                :tip="currentConfig.tip" :validators="currentConfig.validators" trigger="change">
    <el-input class="mu-input select-prepend" :class="'mu-'+ currentConfig.size"
              v-model="currentValue"
              :type="currentConfig.type"
              :name="currentConfig.name"
              :maxlength="currentConfig.maxlength"
              :minlength="currentConfig.minlength"
              :placeholder="config.placeholder"
              :disabled="currentConfig.disabled"
              @change="handleChange"
              @focus="handleFocus"
              @blur="handleBlur">
      <template slot="suffix" v-if="currentConfig.suffix">{{currentConfig.suffix}}</template>
      <mu-select v-model="sValue" slot="prepend" @on-change="handleSelectChange"
                 :config="{size: currentConfig.size, key: currentConfig.selectKey,
                 options:currentConfig.options, placeholder: currentConfig.selectPlaceholder }"></mu-select>
      <template slot="append" v-if="currentConfig.append">{{currentConfig.append}}</template>
    </el-input>
  </mu-form-item>
</template>

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

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

  interface InputConfig {
    name: string,
    size?: Size,
    disabled?: boolean,
    placeholder?: string
    label?: string,
    inline?: boolean,
    tip?: string,
    key?: string;
    validators?: any,
    type?: string
    maxlength?: string,
    minlength?: string,
    prepend?: string,
    append?: string,
    suffix?: string,
    options?: any,
    selectKey?: string,
    selectPlaceholder?: string
  }

  @Component({
    name: 'mcSelectInput'
  })
  export default class extends Vue {
    @Prop({ default: () => [] }) private value!: any;
    @Prop({ default: () => [] }) private select!: string;
    @Prop({ default: () => [] }) private config!: InputConfig;
    currentValue: string = this.value;
    sValue: string = this.select;
    defaultConfig: any = {
      options: [],
      size: 'medium',
      placeholder: '请输入'
    };

    // 合并默认数据
    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;
    }

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

    // 检测值
    @Watch("select")
    onSelectValueChanged(val: string) {
      this.sValue = val;
    }

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

    /**
     * select改变
     * @author tanxj
     * @param value 值
     */
    @Emit('on-select-change')
    handleSelectChange(value: string) {
      this.$emit('update:select', value);
      this.$emit('select', value, this.config.selectKey);
    }

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

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

