<template>
  <div class="filter-key">
    <el-select style="width: 140px" size="mini" filterable clearable v-model="select_value" placeholder="请选择" @clear="clear" @change="changeKey">
      <el-option v-for="filter_key in key_list" :key="filter_key.field_name" :label="filter_key.label" :value="filter_key.field_name"></el-option>
    </el-select>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
  name: 'filter-filed-key',
  props: {
    table_name: {
      type: String,
      required: true
    },
    number: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      select_value: '',
      key_list: []
    };
  },
  computed: {
    ...mapGetters('global', ['getOneTableInfoByTableName', 'flameTableInfoItems', 'getOneTableInfoItemByTableName'])
  },
  watch: {
    flameTableInfoItems(val) {
      // this.getFiled();
    },
    table_name(newV,oldV){
      let that = this;
      console.log('newV=========',newV);
      if(newV!=''){
        that.getField();
      }
    }
  },
  mounted() {
     this.getField();
  },
  methods: {
    
    clear(){
      let that = this;
      that.$emit('changeKey', {field_name:''});
    },
    changeKey(filter_key) {
      let that = this;
      let select_item;
      let find = false;
      for (let i = 0; i < that.key_list.length; i++) {
        let element = that.key_list[i];
        if (element.field_name === filter_key) {
          select_item = element;
          find = true;
          break;
        }
      }
      if (find) {
        console.log('filter-key:触发事件changeKey',filter_key,select_item);
        that.$emit('changeKey', select_item);
      }
    },
    // 获取下拉列表
    getField() {
      let that = this;
      console.log('filter-key，table_name:', that.table_name);
      
      let default_select_value = null;
      let temp = that.getOneTableInfoItemByTableName(that.table_name);
      console.log('getOneTableInfoItemByTableName===:', temp);
      that.key_list = [];
      let k = 0;
      let find = false;
      temp.forEach(element => {
        if (element.is_display_search===true ) {
          let field_type_arry = element.field_type.split('(')
          let field_type = field_type_arry[0];
          that.key_list.push({
            field_name: element.field_name,
            label: element.field_description,
            control_type: element.web_ui_control_type,
            key_id: element.flame_id,
            search_sort: element.search_sort,
            is_fk: element.is_fk,
            fk_table_name: element.fk_table_name,
            fk_sql: element.fk_sql,
            fk_table_name_filed: element.fk_table_name_filed,
            fk_table_display_filed_name: element.fk_table_display_filed_name,
            field_type:field_type
          });
          k++;
          if (k === that.number) {
            default_select_value= element.field_name;
            find = true;
          }
        }
      });
      if(find===true){
        that.select_value = default_select_value;
        console.log(" Number:", that.number,'select_value=',default_select_value);
        that.changeKey(default_select_value);
        
        // that.$emit('changeKey', element);
        // console.log(" Number:'", that.number, k);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.filter-key {
  padding: 0 1px;
}
</style>
