<template>
  <div class="filter-operation">
    <el-select style="width: 100px" size="mini" clearable filterable v-model="select_value" placeholder="请选择" @change="changeKey">
      <el-option v-for="(filter_compare, index) in compare_list" :key="index" :label="filter_compare.label" :value="filter_compare.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'filter-Operation',
  props: {
    control_type: {
      type: String,
      default: 'Input',
      required: true
    }
  },
  data() {
    return {
      select_value: '',
      compare_list: [
        { value: '=', label: '等于' },
        { value: '>', label: '大于' },
        { value: '>=', label: '大于等于' },
        { value: '<', label: '小于' },
        { value: '<=', label: '小于等于' },
        { value: 'in', label: '包含' },
        { value: 'not in', label: '不包含' },
        { value: 'like ', label: 'like' },
        { value: 'not like ', label: 'not like' }
      ]
    }
  },
  watch: {
    control_type(newV, oldV) {
      console.log('watch->control_type')
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      let that = this
      that.select_value = ''
      let newV = that.control_type
      console.log('initData=>control_type:', newV)
      if (newV === 'Input') {
        that.compare_list = [
          { value: '=', label: '等于' },
          { value: '<>', label: '不等于' },
          { value: '>', label: '大于' },
          { value: '>=', label: '大于等于' },
          { value: '<', label: '小于' },
          { value: '<=', label: '小于等于' },
          { value: 'like ', label: '包含' },
          { value: 'not like ', label: '不包含' }
        ]
      } else if (newV === 'Multi-Select') {
        that.compare_list = [{ value: 'in', label: '包含' }, { value: 'not in', label: '不包含' }]
      } else if (newV === 'Input_btn') {
        that.compare_list = [{ value: 'in', label: '包含' }, { value: 'not in', label: '不包含' }]
      } else if (newV === 'Select') {
        that.compare_list = [
          { value: '=', label: '等于' },
          { value: '<>', label: '不等于' },
          // { value: '>', label: '大于' },
          // { value: '>=', label: '大于等于' },
          // { value: '<', label: '小于' },
          // { value: '<=', label: '小于等于' }
        ]
      } else if (newV === 'DatePicker') {
        that.compare_list = [{ value: 'between', label: '介于' }]
      } else if (newV === 'Radio') {
        that.compare_list = [{ value: '=', label: '等于' }, { value: '<>', label: '不等于' }]
      } else {
        that.compare_list = []
      }
    },
    changeKey() {
      let that = this
      console.log('选择的值:', that.select_value, that.control_type)
      if (that.select_value !== '') {
        console.log('filter-Operation:发出事件changeKey')
        that.$emit('changeKey', that.select_value)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.filter-operation {
  padding: 0 1px;
}
</style>
