<template>
  <mu-form v-model="value" class="filter-container">
    <mu-row>
      <mu-col v-for="(column, index) in currentConfig.columns" :config="{span: column}"
              :class="{'bar-right': index === 1 }" :key="index"
              v-if="currentConfig.configOption[index===0 ? 'left': 'right']">
        <template v-for="(field, cIndex) in currentConfig.configOption[index===0 ? 'left': 'right']">
          <mu-btn class="search-btn" :config="getBtnConfig(field)" v-if="field.type === 'btn'" :key="cIndex"
                  :class="{clearfix: field.clearfix}" @click="field.onClick(field)"></mu-btn>
          <Field :config="field" class="search-item" :key="cIndex" v-else-if="field.type !== 'custom'"
                 :class="{clearfix: field.clearfix}"
                 v-model="value[field.key]" @on-change="onDataUpdate" :currentValue="value"
                 :style="{width: field.width || ((field.column / 12) * 100 + '%')}"></Field>
          <component class="search-item" v-else :is="getCurrentComp(field)" :title="field" :key="cIndex"></component>
        </template>
      </mu-col>
    </mu-row>
  </mu-form>
</template>
<script lang="ts">
  import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
  import { FilterConfig } from './types';
  import Field from '../form/field'
  // import DtCol from "@/components/Grid/Col.vue";

  type valueConfig = {
    setFieldsValue: Function,
    setReset: Function,
    reinitialize: Function
  }

  @Component({
    components: { Field }
  })
  export default class DtFilterBar extends Vue {
    @Prop({ default: () => [] }) private value: any;
    @Prop({ default: () => [] }) private config: FilterConfig;
    @Prop() private extension?: (value: valueConfig) => any;
    defaultValue = JSON.parse(JSON.stringify(this.value || []));

    private defaultConfig: any = {
      columns: [6, 6]
    };

    mounted() {
      const params = {
        setFieldsValue: this.setFieldsValue,
        setReset: this.setReset,
        reinitialize: this.reinitialize,
        setDisabled: (options: any) => {
          Object.keys(options).forEach((key: string) => {
            (this.config.configOption.left || []).forEach((item: any, index: number) => {
              if (item.key === key) this.$set(this.config.configOption.left[index], 'disabled', options[key]);
            });
            (this.config.configOption.right || []).forEach((item: any, index: number) => {
              if (item.key === key) this.$set(this.config.configOption.right[index], 'disabled', options[key]);
            });
          });
        }
      };
      this.extension && this.extension(params);
    }

    setFieldsValue(value) {
      Object.keys(value).forEach(key => {
        this.value[key] = value[key]
      })
    }

    setReset() {
      this.$emit('input', JSON.parse(JSON.stringify(this.defaultValue || [])))
    }

    reinitialize(value) {
      this.defaultConfig = JSON.parse(JSON.stringify(value || []));
      this.$emit('input', value);
    }


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

    /**
     * 获取当前组件
     */
    getCurrentComp(fieldItem: any) {
      const self = this;
      return {
        template: fieldItem.custom(fieldItem, self.value),
        props: ['title'],
        data() {
          return {
            config: fieldItem,
            form: self.value
          };
        }
      };
    }

    /**
     * 数据更新
     */
    onDataUpdate(options: any) {
      this.value[options.key] = options.value;
      this.handleChange(this.value, options.key);
    }

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

    /**
     * 获取当前按钮配置信息
     * @param field
     */
    getBtnConfig(field: any) {
      const field1 = JSON.parse(JSON.stringify(field));
      field1.type = field.btnType;
      return field1;
    }

  }
</script>

<style lang="scss" scoped>
  .filter-container {
    margin: 0 -8px;

    .search-btn {
      margin: 0 8px;
    }

    .search-item {
      min-width: 120px;
      height: 36px;
      float: left;
      padding: 0 8px 8px 8px;
    }

    .search-btn {
      float: left;
    }

    .bar-right {
      .search-item {
        float: right;
      }
    }

    .clearfix {
      clear: both;
    }
  }
</style>
