<template>
  <div class="cell">
    <!-- 输入框 -->
    <el-input v-if="control_type === 'Input'" :disabled="disabled" @change="changKey" size="mini" v-model="select_value"></el-input>
    <!-- 输入框+按钮 -->
    <el-input v-if="control_type === 'Input_btn'" disabled clearable size="mini" v-model="select_value_display">
      <el-button slot="append" icon="el-icon-search" @click="selectClick"></el-button>
    </el-input>
    <!-- 树型控件 -->
    <el-input v-if="control_type === 'Input_tree'" disabled clearable size="mini" v-model="select_value_display">
      <el-button slot="append" icon="el-icon-search" @click="selectClick"></el-button>
    </el-input>
    <!-- 下拉单选 -->
    <!-- <el-select
      style="width: 260px"
      v-if="control_type === 'Select'"
      :disabled="disabled"
      size="mini"
      v-model="select_value"
      clearable
      filterable
      @change="changKey"
      placeholder="请选择"
    >
      <el-option v-for="(option, index) in options" :key="index" :label="option.label" :value="option.value"></el-option>
    </el-select> -->
    <!-- 下拉多选 -->
    <el-select
      style="width: 260px"
      v-if="control_type === 'Select'"
      size="mini"
      multiple
      :disabled="disabled"
      collapse-tags
      clearable
      filterable
      v-model="select_value"
      @change="changKey"
      placeholder="请选择"
    >
      <el-option v-for="(option, index) in options" :key="index" :label="option.label" :value="option.value"></el-option>
    </el-select>
    <!-- 日期选择 -->
    <el-date-picker
      style="width: 260px"
      v-if="control_type === 'DatePicker'"
      v-model="select_value"
      size="mini"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :disabled="disabled"
      @change="changKey"
    ></el-date-picker>
    <!-- 单选 -->
    <el-radio-group v-if="control_type === 'Radio'" @change="changKey" v-model="select_value" size="mini">
      <el-radio-button label="true">是</el-radio-button>
      <el-radio-button label="false">否</el-radio-button>
    </el-radio-group>
    <DialogMultiple :table_name="fk_table_name" :show_dialog="show_dialog" :filter_data="filter_data" @dialogClose="dialogClose" @dialogConfig="dialogConfig"></DialogMultiple>
    <DialogSingleTree
      :is_check="true"
      :show_dialog="show_dialog_tree"
      :table_name="fk_table_name"
      :filter_data="filter_data"
      @dialogConfig="dialogConfig"
      @dialogClose="dialogClose"
    ></DialogSingleTree>
  </div>
</template>

<script>
import flame from '../../api/flame.js';
export default {
  name: 'filter-value',
  components: {},
  props: {
    // 控件类型
    control_type: {
      type: String,
      default: 'Input',
      required: true
    },
    // 操作的表名
    table_name: {
      type: String,
      required: true
    },
    // 字段的数据类型
    field_type: {
      type: String,
      default: 'VARCHAR'
    },
    // 表对应的字段对应的外键表名
    fk_table_name: {
      type: String,
      default: ''
    },
    // 是否禁用控件
    disabled: {
      type: Boolean,
      default: false
    },
    //
    key_id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show_dialog: false,
      show_dialog_tree: false,

      filter_data: [],
      select_value: '',
      select_value_display: '',
      options: [{ value: '', label: '没有获取到相应的值' }]
    };
  },
  watch: {
    fk_table_name(newV, oldV) {
      console.log(newV, oldV);
      let that = this;
      if (newV != '') {
        console.log('fk_table_name:', newV, oldV);
      }
    },
    key_id(newV, oldV) {
      let that = this;
      console.log('key_id', newV);
      that.initData();
    },
    immediate: true
  },
  computed: {},
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let that = this;
      console.log('key_id', that.key_id, that.control_type, that.select_value_display);
      let newV = that.key_id;
      that.select_value = '';
      that.select_value_display = '';
      // that.$forceUpdate();

      if (that.control_type === 'Select' || that.control_type === 'Multi-Select') {
        if (newV !== '') {
          that.getCombox(newV);
        }
      }
    },
    // 清除输入的值
    clear() {
      this.select_value = '';
      this.select_value_display = '';
    },
    changKey() {
      let that = this;

      console.log('changeKey:', that.select_value, that.field_type);
      let ret_value = that.select_value;
      let select_value_list = ('' + that.select_value).replace(' ', ',').split(',');
      console.log('select_value_list.length', select_value_list.length, select_value_list);

      // 如果是字符类型
      if (that.field_type.toLowerCase() === 'varchar') {
        if (select_value_list.length === 1) {
          // 如果值不为空时 用like
          if (that.select_value != '') {
            ret_value = { like: that.select_value };
          } else {
            // 如果值为空时返回
            ret_value = that.select_value;
          }
        } else {
          // 如果是多个值时
          ret_value = select_value_list;
        }
        // 如果是数字类型
      } else if (
        that.field_type.toLowerCase() === 'BIGINT'.toLowerCase() ||
        that.field_type.toLowerCase() === 'INTEGER'.toLowerCase() ||
        that.field_type.toLowerCase() === 'TINYINT'.toLowerCase() ||
        that.field_type.toLowerCase() === 'DECIMAL'.toLowerCase() ||
        that.field_type.toLowerCase() === 'NUMERIC'.toLowerCase()
      ) {
        // 如果两个数，就取>=第一个值，<=第二个值
        if (select_value_list.length === 2) {
          ret_value = { '>=': select_value_list[0], '<=': select_value_list[1] };
        } else if (select_value_list.length === 1) {
          ret_value = that.select_value;
        } else {
          ret_value = select_value_list;
        }
        // 如果是日期类型
      } else if (
        that.field_type.toLowerCase() === 'DATETIME'.toLowerCase() ||
        that.field_type.toLowerCase() === 'DATE'.toLowerCase() ||
        that.field_type.toLowerCase() === 'TIMESTAMP'.toLowerCase()
      ) {
        ret_value = { '>=': that.select_value[0], '<=': that.select_value[1] };
      }

      // if(that.select_value!=='')
      // {
      console.log('触发事件changeKey', ret_value);
      that.$emit('changeKey', ret_value);
      // }
    },
    // 如果是下拉，则会自动获取下拉的值
    getCombox(str_keyid) {
      let that = this;
      let commit_data = {
        action: 'action_get_com_box_by_flame',
        param: { key_id: str_keyid }
      };
      flame.getCombox(commit_data, res => {
        that.options = [];
        console.log('res=', res);
        res.items.forEach(e => {
          that.options.push({ value: e.value, label: e.label });
        });
      });
    },
    selectClick() {
      let that = this;
      console.log('control_type', that.control_type);
      if (that.control_type === 'Input_tree') {
        that.show_dialog_tree = true;
      } else {
        that.show_dialog = true;
      }
    },
    dialogClose(val) {
      let that = this;
      if (that.control_type === 'Input_tree') {
        that.show_dialog_tree = false;
      } else {
        that.show_dialog = false;
      }
    },
    // 选择的值
    dialogConfig(val) {
      let that = this;
      if (that.control_type === 'Input_tree') {
        that.show_dialog_tree = false;
      } else {
        that.show_dialog = false;
      }
      // that.show_dialog = false;
      that.select_value = '';
      that.select_value_display = '';
      console.log('val', val, val.length);
      let length = val.length;

      val.forEach(element => {
        that.select_value += element.value + ',';
        that.select_value_display += element.lable + ',';
      });
      if (length > 1) {
        that.select_value_display = val[0].lable + '等' + length + '个';
      } else {
        that.select_value_display = that.select_value_display.substr(0, that.select_value_display.length - 1);
      }
      console.log('select_value_display', that.select_value_display);
      that.select_value = that.select_value.substr(0, that.select_value.length - 1);

      if (that.select_value !== '') {
        let select_value_arr = that.select_value.split(',');
        console.log('filter-Operation:触发了changeKey事件 select_value_arr:', select_value_arr);
        that.$emit('changeKey', select_value_arr);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.cell {
  width: 260px;
  padding: 0 5px;
  margin: 0 20px 1px 0;
  display: flex;
  align-items: center;
}
</style>
