<template>
  <div>
    <div>
      <v-banner>
        数据过滤
        <template v-slot:actions>
          <v-btn
            text
            color="primary"
            @click="queryOperate(1)"
          >
            <v-icon left>mdi-plus</v-icon>
            新增
          </v-btn>
      </template>
      </v-banner>
      <div class="mt-3">
        <div v-if="filterObj.query && !filterObj.query.length" class="emptyClass"> 未添加数据 </div>
        <div v-for="(val, index) of filterObj.query" :key="index" class="d-flex mt-3">
          <v-autocomplete
            class="input-width-m ml-3"
            v-model="val.dbColumn"
            :items="metaData"
            item-text="title"
            item-value="dbColumn"
            placeholder="请选择数据字段"
            dense hide-details outlined
            label="数据字段"
            @change="handleFilterChange('query', val)"
          />
          <v-autocomplete
            class="input-width-m ml-3"
            v-model="val.compare"
            :items="typeArr"
            item-text="label"
            item-value="value"
            placeholder="请选择过滤条件"
            dense hide-details outlined
            @change="handleFilterChange('query', val)"
          />
          <v-text-field
            class="input-width-m ml-3"
            v-model="val.value"
            dense hide-details outlined
            placeholder="请输入字段内容"
            label="字段内容"
            @change="handleFilterChange('query', val, '输入字段内容')"
          />
          <div class="flex-shrink-1 ml-3">
            <v-btn text color="error" @click="queryOperate(2, index, val)">移除</v-btn>
          </div>
        </div>
      </div>
      <v-banner>
        字段排序
        <template v-slot:actions>
          <v-btn
            text
            color="primary"
            @click="sortOperate(1)"
          >
            <v-icon left>mdi-plus</v-icon>
            新增
          </v-btn>
      </template>
      </v-banner>
      <div class="mt-3">
        <div v-if="filterObj.orders && !filterObj.orders.length" class="emptyClass"> 未添加数据 </div>
        <div v-for="(val, index) of filterObj.orders" :key="index+'key'" class="d-flex justify-space-between align-center mt-3">
          <v-autocomplete
            class="input-width-m ml-3"
            v-model="val.column"
            :items="metaData"
            item-text="title"
            item-value="dbColumn"
            placeholder="请选择过滤字段"
            dense hide-details outlined
            label="元数据成员"
            @change="handleFilterChange('orders', val)"
          />
          <div style="height: 100%;" class="d-flex align-center">
            <span class="ml-3">逆序</span>
            <v-switch
              dense hide-details class="mt-0 ml-2 pa-0"
              v-model="val.asc"
              color="primary"
              @change="handleFilterChange('orders', val)"
            ></v-switch>
            <span>正序</span>
          </div>
          <div class="flex-shrink-1 ml-3">
            <v-btn text color="error" @click="sortOperate(2, index, val)">移除</v-btn>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'otherSetting',
  components: {},
  // props: {
  //   metaData: {
  //     type: Array,
  //     default: () => []
  //   }
  // },
  data () {
    return {
      valid: false,
      filterObj: {
        orders: [], // { column: '', asc: true }
        query: [] // { dbColumn: '', compare: '>', value: '' }
      },
      metaData: [],
      typeArr: [
        { label: '大于', value: '>' },
        { label: '等于', value: '=' },
        { label: '大于等于', value: '>=' },
        { label: '小于', value: '<' },
        { label: '小于等于', value: '<=' },
        { label: '包含', value: 'like' }
      ]
    }
  },
  computed: {},
  created () {
  },
  mounted () {
  },
  methods: {
    queryOperate (num, index, val) {
      if (num === 1) this.filterObj.query.push({ dbColumn: '', compare: '>', value: '' })
      else if (num === 2) {
        this.filterObj.query.splice(index, 1)
        this.handleFilterChange('query', val)
      }
    },
    sortOperate (num, index, val) {
      if (num === 1) this.filterObj.orders.push({ column: '', asc: true })
      else if (num === 2) {
        this.filterObj.orders.splice(index, 1)
        this.handleFilterChange('orders', val)
      }
    },
    handleFilterChange (type, val, special) {
      if (special === '输入内容' && val.dbColumn) return this.$emit('filterChange')
      if (type === 'query' && (!val.dbColumn || !val.value)) return
      if (type === 'orders' && !val.column) return
      // console.log('触发过滤', type, val)
      this.$emit('filterChange')
    },
    getFilterObj () {
      const obj = {}
      obj.query = this.filterObj.query?.filter(f => f.dbColumn && f.compare && f.value !== '') || []
      obj.orders = this.filterObj.orders?.filter(_e => !_e.dbColumn).map(_e => {
        const { column, ...item } = _e
        return {
          ...item,
          column: '`' + column.replace(/`/g, '') + '`'
        }
      }) || []
      return obj
    },
    clearFilterObj () {
      this.filterObj = { orders: [], query: [] }
      // 不能返回this.filterObj否则下次修改filterObj会带上空值导致接口报错，使用getFilterObj传递filterObj
      return { orders: [], query: [] }
    },
    setFilterObj (obj) {
      // orders传给后端需要拼接 ``
      if (obj.orders && obj.orders.length) obj.orders.forEach(e => { e.column = e.column.replace(/`/g, '') })
      this.filterObj = obj
    }
  }
}
</script>
<style lang="scss" scoped>
.emptyClass {
  text-align: center;
  color: #666;
}
</style>
