<template>
  <div v-if="!isRemoveSelf" style="max-width: 600px">
    <el-row :gutter="20">
      <el-col :span="9">
        <!--字段-->
        <el-select
          :value="field"
          filterable
          style="width: 100%"
          @input="fieldInput"
          @change="filterChange"
        >
          <el-option
            v-for="(item, index) in filterConfig"
            :key="index"
            :label="item.fieldLabel"
            :value="item.fieldValue"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        <!--表达式-->
        <el-select :value="exp" style="width: 100%" @input="expInput">
          <el-option
            v-for="item in expOptions"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="9">
        <!--数字-->
        <el-input-number
          v-if="
            selectedItem.fieldType === 'number' &&
            exp != 'in' &&
            exp != 'not in'
          "
          style="width: 100%"
          :controls="false"
          :value="value"
          @input="valueInput"
        />
        <el-input
          v-else-if="
            selectedItem.fieldType === 'number' &&
            (exp == 'in' || exp == 'not in')
          "
          style="width: 100%"
          :controls="false"
          :value="value"
          @input="valueInput"
        />
        <!--日期-->
        <el-date-picker
          v-else-if="selectedItem.fieldType === 'date'"
          style="width: 100%"
          :value="value"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          @input="valueInput"
        />
        <!--日期时间-->
        <el-date-picker
          v-else-if="selectedItem.fieldType === 'datetime'"
          style="width: 100%"
          :value="value"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          @input="valueInput"
        />
        <!--月份-->
        <el-date-picker
          v-else-if="selectedItem.fieldType === 'month'"
          style="width: 100%"
          :value="value"
          type="month"
          placeholder="选择月份"
          value-format="yyyy-MM"
          @input="valueInput"
        />
        <!--字典-->
        <!-- <el-select
          v-else-if="selectedItem.fieldType === 'dict'"
          style="width: 100%"
          :value="value"
          @input="valueInput"
        >
          <el-option
            v-for="item in selectedItem.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <!--文本-->
        <el-input
          v-else-if="exp != 'is null' && exp != 'is not null'"
          style="width: 100%"
          :value="value"
          @input="valueInput"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    filterConfig: {
      type: Array,
      required: true
    },

    field: String,
    exp: String,
    value: {
      type: [Number, String, Date]
    }
  },
  data() {
    return {
      expsRule: {
        equal: { text: '等于', value: '=' },
        notEqual: { text: '不等于', value: '<>' },
        greaterThan: { text: '大于', value: '>' },
        lessThan: { text: '小于', value: '<' },
        equalOrGreaterThan: { text: '大于等于', value: '>=' },
        equalOrLessThan: { text: '小于等于', value: '<=' },
        in: { text: '在其内', value: 'in' },
        notIn: { text: '不在其内', value: 'not in' },
        has: { text: '包含', value: 'like' },
        nohas: { text: '不包含', value: 'not like' },
        empty: { text: '为空', value: 'is null' },
        noEmpty: { text: '不为空', value: 'is not null' }
      },

      selectedItem: {},
      expOptions: [],

      isRemoveSelf: false
    }
  },
  computed: {
    /**
     * 字段类型与表达式配置
     */
    fieldTypeRules() {
      return {
        number: {
          rules: [
            this.expsRule.equal,
            this.expsRule.notEqual,
            this.expsRule.greaterThan,
            this.expsRule.lessThan,
            this.expsRule.equalOrGreaterThan,
            this.expsRule.equalOrLessThan,
            this.expsRule.in,
            this.expsRule.notIn
          ]
        },
        text: {
          rules: [
            this.expsRule.has,
            this.expsRule.nohas,
            this.expsRule.empty,
            this.expsRule.noEmpty
          ]
        },
        date: {
          rules: [
            this.expsRule.equal,
            this.expsRule.notEqual,
            this.expsRule.greaterThan,
            this.expsRule.lessThan,
            this.expsRule.equalOrGreaterThan,
            this.expsRule.equalOrLessThan
          ]
        },
        datetime: {
          rules: [
            this.expsRule.equal,
            this.expsRule.notEqual,
            this.expsRule.greaterThan,
            this.expsRule.lessThan,
            this.expsRule.equalOrGreaterThan,
            this.expsRule.equalOrLessThan
          ]
        },
        month: {
          rules: [
            this.expsRule.equal,
            this.expsRule.notEqual,
            this.expsRule.greaterThan,
            this.expsRule.lessThan,
            this.expsRule.equalOrGreaterThan,
            this.expsRule.equalOrLessThan
          ]
        },
        dict: {
          // rules: [this.expsRule.equal, this.expsRule.notEqual]
          rules: [
            this.expsRule.has,
            this.expsRule.nohas,
            this.expsRule.empty,
            this.expsRule.noEmpty
          ]
        }
      }
    }
  },
  watch: {},
  created() {
    const items = this.filterConfig.filter(filterItem => {
      return filterItem.fieldValue === this.field
    })

    if (items.length > 0) {
      this.selectedItem = items[0]
    } else {
      this.selectedItem = this.filterConfig[0]
      this.$emit('update:field', this.selectedItem.fieldValue)
    }

    this.expOptions = this.fieldTypeRules[this.selectedItem.fieldType].rules

    if (items.length === 0) {
      this.$emit('update:exp', this.expOptions[0].value)
    }
  },
  methods: {
    // 切换字段时，重置表达式及输入值
    filterChange(val) {
      const items = this.filterConfig.filter(filterItem => {
        return filterItem.fieldValue === val
      })
      this.selectedItem = items[0]
      this.expOptions = this.fieldTypeRules[this.selectedItem.fieldType].rules
      this.$emit('update:exp', this.expOptions[0].value)
      this.$emit('update:value', '')
    },
    fieldInput(e) {
      this.$emit('update:field', e)
    },
    expInput(e) {
      this.$emit('update:exp', e)
      if (e === 'is null' || e === 'is not null') {
        this.$emit('update:value', '')
      }
    },
    valueInput(e) {
      this.$emit('update:value', e)
    },
    removeSelf() {
      // 删除自己
      this.isRemoveSelf = true
    }
  }
}
</script>
<style scoped></style>
