<template>
    <div class="mu-searchItem">
        <mu-row>
            <mu-col :config="{span: 4}">
                <mu-select v-model="selectValue"
                        :config="{ options: currentOptions }"
                        @on-change="selectChange">
                        </mu-select>
            </mu-col>
            <mu-col class="searchField" :config="{span: 8}">
                <template v-if="type === ''">
                    <mu-input v-model="inputValue" :config="{disabled: true}" />
                </template>
                <template v-else-if="type === 'inputNumber'">
                    <mu-col :config="{span: 6}">
                        <mu-select :config="{ options: filterSelectData}"
                                    v-model="equalValue"
                                    @on-change="onEqualUpdate"></mu-select>
                    </mu-col>
                    <mu-col :config="{span: 6}">
                        <mu-input-number v-model="inputValue"
                                        :config="currentItem"
                                        @on-change="onDataUpdate"></mu-input-number>
                    </mu-col>
                </template>
                <template v-else-if="type === 'datePicker'">
                    <mu-col :config="{span: 6}">
                        <mu-select :config="{ options: filterSelectData}"
                                    v-model="equalValue"
                                    @on-change="onEqualUpdate"></mu-select>
                    </mu-col>
                    <mu-col :config="{span: 6}">
                        <mu-datepicker v-model="inputValue"
                                        :config="currentItem"
                                        @on-change="onDataUpdate"></mu-datepicker>
                    </mu-col>
                </template>
                <template v-else-if="type === 'timePicker'">
                    <mu-col :config="{span: 6}">
                        <mu-select :config="{ options: filterSelectData}"
                                    v-model="equalValue"
                                    @on-change="onEqualUpdate"></mu-select>
                    </mu-col>
                    <mu-col :config="{span: 6}">
                        <mu-timepicker v-model="inputValue"
                                        :config="currentItem"
                                        @on-change="onDataUpdate"></mu-timepicker>
                    </mu-col>
                </template>
                <Field v-else :config="currentItem" v-model="inputValue" :currentValue="inputValue"
               @on-change="onDataUpdate"></Field>
            </mu-col>
        </mu-row>
    </div>
</template>

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

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

  interface InputConfig {
    size?: Size,
    type: string,
    placeholder?: string,
    width: number,
    maxheight: number,
    items: any[]
  }

  @Component({
    name: 'mcSearchItem',
    components: { Field }
  })

  export default class extends Vue {
    @Prop({ type: Array, default: () => [] }) private value!: any;
    @Prop({ default: () => [] }) private config!: InputConfig;
    // private currentValue: string = this.value || '';
    private inputValue: any = '';
    private type: string = '';
    private selectValue: any = this.value[0];
    private equalValue: any = this.value[1];
    private currentItem: any = {};
    private defaultConfig: any = {
      value: '',
      size: 'medium',
      placeholder: '请输入',
      clearable: true
    };
    private filterSelectData: any = [{
          "label": "大于",
          "value": 0
        }, {
          "label": "大于等于",
          "value": 1
        }, {
          "label": "等于",
          "value": 2
        }, {
          "label": "小于",
          "value": 3
        }, {
          "label": "小于等于",
          "value": 4
        }, {
          "label": "不等于",
          "value": 5
        }
    ];

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

    get currentOptions() {
        const options = [];
        this.config.items.forEach((v, i) => {
            options.push({
                'label': v.label,
                'value': i
            })
        });
        return options
    }

    // 检测值
    @Watch("selectValue")
    onSelectValueChanged(val: any) {
        this.currentItem = this.currentConfig.items[val];
    }

    @Watch("type")
    onTypeChange(val: string) {
        const types = ['inputNumber', 'datePicker', 'timePicker'];
        this.inputValue = types.includes(val) ? this.value[2] : this.value[1];
        if (this.currentItem.multiple && typeof this.inputValue === 'string') {
          this.inputValue = this.inputValue ? [this.inputValue] : [];
        }
    }

    @Watch("value")
    onWatchChange(val: any) {
        this.selectValue = val[0] === '' ? 0 : val[0];
        this.equalValue = val[1];
        this.inputValue = this.type.includes(val) ? val[2] : val[1];
        if (this.currentItem.multiple && typeof this.inputValue === 'string') {
          this.inputValue = this.inputValue ? [this.inputValue] : [];
        }
    }
    /**
     * 数据更新
     */
    onDataUpdate(options: any) {

        let value = options;
        if (options instanceof Object) {
            value = options.value
        }
        this.$emit("nextSelectChange", {
            value: value,
            type: this.type
        })
    }

    onEqualUpdate(val: any) {
        this.$emit("equalSelectChange", val)
    }
    selectChange(value: number) {
        const current = this.config.items[value];
        this.inputValue = current['multiple'] ? [] : '';
        switch (current['type']) {
            case 'text': this.type = 'text'; break;
            case 'select': this.type = 'select'; break;
            case 'cascader': this.type = 'cascader'; break;
            case 'selectTree': this.type = 'selectTree'; break;
            case 'selectTable': this.type = 'selectTable'; break;
            case 'inputNumber': this.type = 'inputNumber'; break;
            case 'datePicker': this.type = 'datePicker'; break;
            case 'timePicker': this.type = 'timePicker'; break;
        }
        // 子组件切换  emit父组件
        this.$emit('selectChange', {
            value: this.selectValue,
            type: this.type
        })
    }

  }
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">
.mu-searchHigh {
    .mu-form-item .item-label {
        display: none;
    }
}
</style>
