<template>
  <div class="filter-area">
    <template>
      <div class="filter">
        <!-- <el-checkbox class="checkbox" v-model="checked" size="mini">并且</el-checkbox> -->
        <FilterKey :table_name="table_name" :number="number" @changeKey="changKey"></FilterKey>
        <!-- <FilterOperation :control_type="control_type" @changeKey="changeOperation"></FilterOperation> -->
        <FilterValue ref="filtervalue" 
        :key_id="key_id" 
        :table_name="table_name" 
        :fk_table_name="fk_table_name" 
        :field_type="field_type" 
        :control_type="control_type" @changeKey="changeValue"></FilterValue>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'filter-field',
  props: {
    table_name: {
      type: String,
      required: true
    },
    number: {
      type: Number,
      default: 1
    },
    // 用于接收外面的额外参数
    str_tag:{
      type:String,
      default:''
    }
  },
  
  components: {},
  data() {
    return {
      field_name: '',
      field_operation: '',
      field_value: '',
      control_type: '',
      fk_table_name: '',
      key_id: '',
      field_type:'',
      checked: true
    };
  },
  computed: {
    // 操作and 或者 or
    link_type: function() {
      let temp_link_type = 'and';
      if (this.checked === true) {
        temp_link_type = 'and';
      } else {
        temp_link_type = 'or';
      }
      return temp_link_type;
    }
  },
  methods: {
    // 清除输入的值
    clear() {
      let that = this;
      that.$refs.filtervalue.clear();
      that.field_value='';
    },
    // 判断对象的类型，（暂时没有用到）
   typeObj(obj){
          var type=Object.prototype.toString.call(obj);
          if(type=='[object Array]'){
            return 'Array';
          }else if(type=='[object  Object]'){
            return 'Object';
          }else if (type === '[object String]'){
            return 'String'
          }
          else {
            return "String"
          }
    },
    // 得到过滤条件
    getFilter(){
      let that = this;
      console.log('====field_type',that.field_type,'field_name=',that.field_name,'field_value=',that.field_value, 'field_operation=',that.field_operation);
      if (that.field_name !== '' && that.field_value!='') {
        let filter = {
          field_name: that.field_name,
          // field_operation: that.field_operation,
          field_value: that.field_value,
          // link_type: that.link_type,
          // str_tag:that.str_tag,
        };
        return filter;
      } else {
        return null;
      }
      
    },
    changKey(value) {
      console.log('filter_fieldChange:', value);
      // that.$refs.filtervalue.clear();
      let that = this;
      if (value !== undefined) {
        that.control_type = value.control_type;
        that.key_id = value.key_id;
        that.field_name = value.field_name;
        that.fk_table_name = value.fk_table_name;
        // 数据类型
        that.field_type = value.field_type;
      } else {
        that.field_name = '';
        that.fk_table_name = '';
      }

      // console.log('field_name:', that.field_name);

      that.changeClick();
      // that.$emit('change', {
      //   field_name: that.field_name,
      //   field_operation: that.field_operation,
      //   field_value: that.field_value,
      //   link_type: that.link_type
      // });
    },
    changeOperation(value) {
      let that = this;
      that.field_operation = value;
      that.changeClick();
      // console.log('field_operation:', that.field_operation);
      // that.$emit('change', {
      //   field_name: that.field_name,
      //   field_operation: that.field_operation,
      //   field_value: that.field_value,
      //   link_type: that.link_type
      // });
    },
    changeClick() {
      let that = this;
      
      if (that.field_name !== ''  && that.field_operation !== '') {
        that.$emit('change', {
          field_name: that.field_name,
          field_operation: that.field_operation,
          field_value: that.field_value,
          link_type: that.link_type,
          str_tag:that.str_tag,
        });
      }
    },
    changeValue(val) {
      let that = this;
      that.field_value = val;
      console.log('changeValue',val);
      console.log('====changeValue',that.field_type,'field_name=',that.field_name,'field_value=',that.field_value, 'field_operation=',that.field_operation);
      that.changeClick();
      // that.$emit('change', {
      //   field_name: that.field_name,
      //   field_operation: that.field_operation,
      //   field_value: that.field_value,
      //   link_type: that.link_type
      // });
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-area {
  .filter {
    width: 100%;
    display: flex;
    .checkbox {
      margin-top: 1px;
    }
    .checkbox:last-of-type {
      margin-right: 1px;
    }
  }
}
</style>
