/**
*Desc:
*Create by: jug
*Create time:2023/6/8/10:29
*/
<template>
  <div style="margin: 10px 0">
<!--    <vi-title style="display:flex;align-items: center;margin:10px 0" title="过滤条件匹配："></vi-title>-->
    <enum-select v-model="matchMethod" :clearable="false" enum="MatchMethod" label="description"
                 style="width: 300px"
                 value="name"></enum-select>

    <div v-for="(r,index) in rules" :key="r.name +index" style="margin: 5px 0">
      <div style="display: flex;column-gap: 10px">
        <el-select v-model="r.name" clearable filterable placeholder="请选择字段">
          <el-option
              v-for="column in columnInfos"
              :key="column.COLUMN_NAME"
              :label="column.COLUMN_COMMENT"
              :value="column.COLUMN_NAME">
          </el-option>
        </el-select>

        <el-select v-model="r.cnd" clearable filterable placeholder="请选择条件">
          <el-option
              v-for="column in cnds"
              :key="column.value"
              :label="column.description"
              :value="column.value">
          </el-option>
        </el-select>

        <div style="width: 300px">
          <el-input v-model="r.value" placeholder="请输入值"></el-input>
        </div>

        <div class="start" style="display: flex;align-items: center;column-gap: 10px;">
          <el-button type="danger" @click="rules.splice(index,1)">-</el-button>
        </div>

      </div>
    </div>

    <el-button size="small" type="primary" @click="rules.push({})">添加条件</el-button>
  </div>
</template>

<script>
module.exports = {
  name: "UserCnd",
  props: {},
  components: {'enum-select': httpVueLoader('/components/plugins/EnumSelect.vue?v=1.0.0'),},
  data() {
    return {
      columnInfos: [],
      rules: [
        {}
      ],
      cnds: [
        {value: "=", desc: "等于"},
        {value: "!=", desc: "不等于"},
      ],
      matchMethods: [],
      matchMethod: "AND"
    }
  },
  watch: {
    matchMethod(val) {
      this.$emit('cnd', {matchMethod: val, rules: this.rules})
    },
    rules(val) {
      this.$emit('cnd', {matchMethod: this.matchMethod, rules: val})
    }
  },
  methods: {
    async getColumnInfo() {
      const {data, msg, code} = await $.post('/platform/activity/basic/scope/getUserTableColumnInfo')
      if (code !== 0) {
        this.$notify.warning(msg)
        return
      }
      this.columnInfos = data
    }
  },
  created() {
    this.getColumnInfo()
    getEnumOptions('MatchMethod').then(res => this.matchMethods = res)
    getEnumOptions('ConditionalOperational').then(res => this.cnds = res)
  }
}
</script>

<style scoped>

</style>