<template>
  <div class="filter-bar">
    <div class="filter-bar-left">
      <div class="filter-list">
        <div class="filter-list-one">
          <FilterField ref="f0" :table_name="table_name" str_tag="f0" :number="1" @change="changeFilterField"></FilterField>
          <el-button type="primary" @click="addFilterClick" size="mini">+</el-button>
        </div>
        <div v-for="(field, index) in filter_list" :key="field.key">
          <div class="filter-list-one" v-if="is_hide">
            <FilterField :table_name="table_name" :ref="field.key" :str_tag="field.key" :number="index + 2" @change="changeFilterField"></FilterField>
            <el-button type="primary" @click="subFilterClick(field.key)" size="mini">-</el-button>
          </div>
        </div>
      </div>
      <el-button-group class="button-group">
        <el-button type="primary" @click="clickOk" icon="el-icon-search" size="mini">查询</el-button>
        <el-button type="primary" @click="clickClear" icon="el-icon-close" size="mini">清除</el-button>
      </el-button-group>
    </div>
    <div class="filter-bar-right">
      <el-button type="text" size="mini" @click="hideClick" v-if="filter_list.length > 0">{{ right_button_text }}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'filter-bar',
  props: {
    table_name: {
      type: String,
      required: true
    }
  },
  components: {},
  data() {
    return {
      filed_name: '',
      is_hide: true,
      right_button_text: '收起',
      filter_list: []
      // filter_values: []
    };
  },
  computed: {},
  methods: {
    // 收起/展开
    hideClick() {
      let that = this;
      that.is_hide = !that.is_hide;
      if (that.is_hide === true) {
        that.right_button_text = '收起';
      } else {
        that.right_button_text = '展开';
      }
    },
    // 生成UUID
    guid() {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      }
      return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4();
    },
    // 增加查询条件
    addFilterClick() {
      let that = this;
      that.is_hide = false;
      that.hideClick();
      let uid = that.guid();
      console.log('uid=', uid);
      that.filter_list.push({ key: uid });
    },
    // // 删除指定的filter_key的查询条件
    // subfilter(filter_key) {
    //   let that = this;
    //   let index = -1;
    //   console.log('filter_key',filter_key);
    //   for (let i = 0; i < that.filter_values.length; i++) {
    //     if (that.filter_values[i].key === filter_key) {
    //       index = i;
    //       break;
    //     }
    //   }
    //   // 删除之前filter_values;
    //   console.log('删除之前filter_values:', that.filter_values,'index',index);
    //   if (index !== -1) {
    //     that.filter_values.splice(index, 1);
    //   }
    //   console.log('删除之后filter_values:', that.filter_values);
    // },
    // 删除自己增加的查询条件
    subFilterClick(filter_key) {
      let that = this;
      let index = -1;
      console.log('删除的filer_key之前', filter_key);
      console.log('filter_list删除之前:', that.filter_list);
      let temp_list = [];
      for (let i = 0; i < that.filter_list.length; i++) {
        if (that.filter_list[i].key === filter_key) {
          index = i;
          break;
        }
      }
      console.log('index:', index, 'filer_key', filter_key);
      if (index !== -1) {
        that.filter_list.splice(index, 1);
      }
      console.log('that.filter_list删除之后:', that.filter_list);
    },

    changeFilterField(val) {
      // console.log('changeFilterField ===> val:', val);
      // let that = this;
      // let find = false;
      // let filter_key = val.str_tag;
      // // 先删除自己上一次增加的查询条件
      // that.subfilter(filter_key);
      // // 查找同样的查询条件是否已经处理存在
      // for (let i = 0; i < that.filter_values.length; i++) {
      //   let filter_value = that.filter_values[i];
      //   if (filter_value.field_operation === val.field_operation && filter_value.field_name === val.field_name && filter_value.field_value === val.field_value) {
      //     find = true;
      //     break;
      //   }
      // }
      // if (find === false) {
      //   that.filter_values.push({
      //     link_type: val.link_type,
      //     field_name: val.field_name,
      //     field_operation: val.field_operation,
      //     field_value: val.field_value,
      //     key: val.str_tag
      //   });
      // }
      // console.log('filer_values:', that.filter_values);
    },
    // 点查询按钮的触发
    clickOk() {
      let that = this;
      let filter_data = [];
      let filter0 = that.$refs.f0.getFilter();
      if (filter0 !== null) {
        filter_data.push(filter0);
      }
      // console.log('filter0', filter0);
      for (let i = 0; i < that.filter_list.length; i++) {
        // console.log('refs,i',i,that.$refs[that.filter_list[i].key]);
        let filter = that.$refs[that.filter_list[i].key][0].getFilter();
        // console.log('filter===', filter);
        if (filter !== null) {
          filter_data.push(filter);
        }
      }
      console.log('filter_data=====', filter_data);
      if (filter_data.length >=0) {
        that.$emit('search', filter_data);
      }
    },
    // 清除输入的值
    clickClear() {
      let that = this;
      that.$refs.f0.clear();
      for (let i = 0; i < that.filter_list.length; i++) {
        // console.log('refs,i',i,that.$refs[that.filter_list[i].key]);
        that.$refs[that.filter_list[i].key][0].clear();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-bar {
  display: flex;
  justify-content: space-between;
  padding: $spacing-small;
  background-color: white;
  .filter-bar-left {
    display: flex;
    // padding: $spacing-normal;
    .filter-list {
      .filter-list-one {
        display: flex;
        margin-bottom: $spacing-mini;
      }
    }
    .button-group {
      margin-left: $spacing-small;
    }
  }
  .filter-bar-right {
    margin-right: $spacing-small;
  }
}
</style>
