<template>
  <div class="filter-column">
    <table>
      <tr>
        <td class="column">
          <el-select placeholder="" v-model="selected.column" @change="changeSelectData" @visible-change="visibleChange">
            <el-option label="" value=""></el-option>
            <el-option v-for="item in dataModel.conditionColumns" :key="item.key" :label="item.value" :value="item.key"></el-option>
          </el-select>
        </td>
        <td class="operator">
          <el-select placeholder="" v-model="selected.operator" @change="1">
            <el-option v-for="item in dataModel.operatorColumns" :key="item.key" :label="item.value" :value="item.key"></el-option>
          </el-select>
        </td>
        <td v-if="selected.column==='Attribute'" class="valueColumns">
          <el-checkbox-group v-model="attributeSelected" @change="onCheckboxChange">
            <el-checkbox v-for="item in dataModel.valueColumns" :label="item.key" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </td>
        <td class="value" v-if="selected.column==='Author'||selected.column==='Keyword'||selected.column==='Source'||selected.column==='Tag'||selected.column==='Title'">
          <el-input v-model="selected.value" placeholder=""></el-input>
        </td>
        <td v-if="selected.column==='PublishDate'" class="value">
          <el-date-picker v-model="selected.value" type="datetime" placeholder="选择日期"></el-date-picker>
        </td>
        <td v-if="selected.column==='TopFlag'||selected.column==='BranchInnerCode'" class="value">
          <el-select placeholder="" v-model="selected.value" @change="1">
            <el-option v-for="item in dataModel.valueColumns" :key="item.key" :label="item.value" :value="item.key"></el-option>
          </el-select>
        </td>
        <td v-if="selected.column===undefined||selected.column===''" class="textValue">
          <el-input v-model="dataModel.textValue" placeholder=""></el-input>
        </td>
      </tr>
    </table>
  </div>
</template>

<style scoped>
  .filter-column .column {
    width: 130px;
  }

  .filter-column .operator {
    width: 150px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .filter-column .value .el-date-editor,
  .filter-column .value .el-select {
    width: 190px;
  }

  .filter-column .el-checkbox {
    margin-left: 10px;
  }
</style>

<script>
export default {
  props: ['dataModel', 'selected'],
  data() {
    return {
      operatorColumns: [],
      attributeSelected: [],
      visibleChangeFlag: false
    }
  },
  methods: {
    visibleChange(isShow) {
      this.visibleChangeFlag = isShow
    },
    changeSelectData(key) {
      if (key === '') {
        this.selected.value = ''
        this.selected.operator = ''
      } else {
        if (this.visibleChangeFlag) {
          this.selected.value = ''
          this.selected.operator = ''
        }
        this.dataModel.conditionColumns.forEach(function (value, index) {
          if (value.key.toString() === key.toString()) {
            if (this.dataModel.autoblockcondition['column' + (index + 1)]) {
              this.dataModel.operatorColumns = JSON.parse(
                this.dataModel.autoblockcondition['column' + (index + 1) + 'Operator']
              )
              this.dataModel.valueColumns = JSON.parse(
                this.dataModel.autoblockcondition['column' + (index + 1) + 'Value']
              )
            }
          }
        }, this)
      }
    },
    loadAttributeSelected() {
      if (this.selected.column === 'Attribute' && this.selected.value) {
        this.attributeSelected = this.selected.value.split(',')
      }
    },
    onCheckboxChange(val) {
      if (this.selected.column === 'Attribute') {
        this.selected.value = val.join(',')
      }
    }
  },
  watch: {
    selected(value) {
      this.loadAttributeSelected()
    }
  },
  created() {
    this.loadAttributeSelected()
  }
}
</script>
