<template>
  <el-container>
    <el-dialog v-if="dialogFilterVisible" title="字段筛查" center :visible.sync="dialogFilterVisible" width="300px" style="padding: 0;margin: 0;">
      选择（ {{ total }} | {{ select }} ） <el-link type="success" style="float: right;" @click="showCustomFilter">自定义</el-link><div style="clear: right;" />
      <el-tree
        ref="tree"
        :data="treeData"
        style="height: 300px;overflow-y: auto;margin: 0;padding: 0;"
        show-checkbox
        node-key="id"
        :default-expanded-keys="['___']"
        @check="treeChecked"
      />
      <div style="margin-top:10px;float: right;">
        <el-button type="success" @click="setFilter">确认</el-button>
        <el-button type="danger" @click="dialogFilterVisible=false">取消</el-button>
      </div>
      <div style="clear:right;" />
    </el-dialog>
    <el-dialog
      title="自定义筛选"
      :visible.sync="dialogCustomVisible"
      width="400px"

    >
      <!--       :before-close="handleClose"-->
      <el-row>
        <el-col :span="6">
          <el-select v-model="customOperator1" placeholder="请选择">
            <el-option
              v-for="item in operatorOptions"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-col>
        <el-col :span="18">
          <el-select
            v-model="customWord1"
            style="width: 100%;"
            filterable
            clearable
            allow-create
            default-first-option
            placeholder="请输入内容"
          >
            <el-option
              v-for="item in filterOptions"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-radio v-model="customOperator" style="margin-right: 10px;" label="与">与</el-radio>
        <el-radio v-model="customOperator" label="或">或</el-radio>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-col :span="6">
          <el-select v-model="customOperator2" placeholder="请选择" clearable>
            <el-option
              v-for="item in operatorOptions"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-col>
        <el-col :span="18">
          <el-select
            v-model="customWord2"
            style="width: 100%;"
            filterable
            clearable
            allow-create
            default-first-option
            placeholder="请输入内容"
          >
            <el-option
              v-for="item in filterOptions"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCustomVisible = false">取 消</el-button>
        <el-button type="primary" @click="setCustomFilter">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
  export default {
    name: 'TbFilter',
    props: {
      list: Array,
      filter: Object
    },
    data() {
      return {
        total: 0,
        select: 0,
        sourceList: [],
        treeData: [{ 'id': '___', 'label': '全部', 'children': [] }],
        columnProperty: '',
        dialogFilterVisible: false,
        dialogCustomVisible: false,
        column: {},

        operatorOptions: [{
          label: '大于'
        }, {
          label: '大于等于'
        }, {
          label: '等于'
        }, {
          label: '小于'
        }, {
          label: '小于等于'
        }, {
          label: '不等于'
        }, {
          label: '包含'
        }, {
          label: '不包含'
        }],
        filterOptions: [],
        customOperator1: '等于',
        customWord1: '',
        customOperator: '',
        customOperator2: '',
        customWord2: ''
      }
    },
    mounted() {
    }, methods: {
      treeChecked() {
        this.select = this.$refs.tree.getCheckedKeys(true).length
      },
      showFilter(column) {
        this.dialogFilterVisible = true
        this.column = column
        this.column.order = null
        this.columnProperty = column['property']
        const items = {}
        this.treeData[0]['children'] = []

        const temp = JSON.parse(JSON.stringify(this.filter))
        delete temp[this.columnProperty]
        const calcList = this.doFilter(temp, this.sourceList.length != 0 ? this.sourceList : this.list)
        for (const i in calcList) {
          let val = calcList[i][this.columnProperty]
          if (val==null|| val===undefined) {
            val='';
          }
          // if ( val === undefined) continue
          const checked = this.filter[this.columnProperty] && this.filter[this.columnProperty].indexOf(val) !== -1
          items[val] = items[val] || checked
        }

        for (const key in items) {
          this.treeData[0]['children'].push({ 'id': key, 'label': key })
          if (items[key] || !this.filter[this.columnProperty]) {
            this.$nextTick(() => { this.$refs.tree.setChecked(key, true, true) })
          }
        }
        this.total = this.treeData[0]['children'].length
        this.$nextTick(() => { this.select = this.$refs.tree.getCheckedKeys(true).length })
      },
      setFilter() {
        let selectVals = this.$refs.tree.getCheckedKeys(true)
        if (selectVals.length === 0) {
          this.$message({ message: '请选择至少一个条件！', type: 'warning' })
          return
        }
        console.log(this.column)
        if (this.total === selectVals.length) {
          this.column.title = this.column.title.split(' ')[0]
          selectVals = null
        } else {
          this.column.title = this.column.title.split(' ')[0] + ' (' + selectVals.length + ')'
        }
        this.$emit('execFilter', this.columnProperty, selectVals)
        this.dialogFilterVisible = false
      },
      doFilter(f, l) {
        this.sourceList = l
        if (!l) return l
        l = l.filter(t => {
          for (const k in f) {
            console.log(f[k])
            console.log(t[k])
            if(t[k]===undefined || t[k]===null)t[k]=''
            if (f[k] && f[k].length !== 0 && f[k].indexOf(t[k]) === -1) {
              return false
            }
            // if (f[k].indexOf(t[k]) === -1) {
            //   return false
            // }

          }
          return true
        })
        return l
      },
      showCustomFilter() {
        this.customWord1 = ''
        this.customWord2 = ''
        this.customOperator1 = '等于'
        this.customOperator2 = ''
        this.customOperator = '与'
        this.dialogCustomVisible = true
        this.filterOptions = this.treeData[0]['children']
      },
      setCustomFilter() {
        this.dialogCustomVisible = false
        this.$refs.tree.setChecked({ 'id': '___' }, false, true)
        for (const i in this.treeData[0]['children']) {
          const item = this.treeData[0]['children'][i]
          if (this.customOperator2) {
            const r1 = this.wordCalc(item.label, this.customWord1, this.customOperator1)
            const r2 = this.wordCalc(item.label, this.customWord2, this.customOperator2)
            if (this.customOperator === '与' && (r1 && r2)) {
              this.$refs.tree.setChecked(item, true, true)
            } else if (this.customOperator === '或' && (r1 || r2)) {
              this.$refs.tree.setChecked(item, true, true)
            }
          } else {
            if (this.wordCalc(item.label, this.customWord1, this.customOperator1)) {
              this.$refs.tree.setChecked(item, true, true)
            }
          }
        }
        this.setFilter()
      },
      wordCalc(word1, word2, option) {
        if (option === '大于') {
          return word1 > word2
        } else if (option === '大于等于') {
          return word1 >= word2
        } else if (option === '等于') {
          return word1 === word2
        } else if (option === '小于') {
          return word1 < word2
        } else if (option === '小于等于') {
          return word1 <= word2
        } else if (option === '不等于') {
          return word1 !== word2
        } else if (option === '包含') {
          return word1.indexOf(word2) !== -1
        } else if (option === '不包含') {
          return word1.indexOf(word2) === -1
        }
      }
    }
  }
</script>

<style scoped>

</style>
