<template>
  <el-form-item>
    <el-select class="setPadding" placeholder="请选择类型" clearable  :value="condition.column" @input="handleColumnChange">
      <el-option v-for="type in columnTypes" :key="type.key" :label="type.value" :value="type.key">
      </el-option>
    </el-select>

    <el-select class="setPadding2"
               v-if="condition.column === 'DefaultMemberScore' || condition.column === 'DefaultMemberLevel'"
               placeholder="" :value="condition.operator" @input="handleOperatorChange">
      <el-option v-for="type in operatorTypes2" :key="type.key" :label="type.value" :value="type.key">
      </el-option>
    </el-select>
    <el-select class="setPadding2" v-if="condition.column === 'MemberType' || condition.column === 'MemberGroup'"
               placeholder="" :value="condition.operator" @input="handleOperatorChange">
      <el-option v-for="type in operatorTypes1" :key="type.key" :label="type.value" :value="type.key">
      </el-option>
    </el-select>

    <!-- 权限操作对象选中"积分条件" -->
    <el-checkbox-group style="display: inline-block" v-if="condition.column === 'MemberGroup'" :value="conditionValue" @input="handleValueChange">
      <el-checkbox :label="item.key" :key="item.key" v-for="item in memberGroups">{{item.value}}</el-checkbox>
    </el-checkbox-group>

    <el-input class="setPadding2"
              v-if="condition.column === 'DefaultMemberScore'"
              :value="conditionValue" @input="handleValueChange"></el-input>

    <!-- 权限操作对象选中"浏览用户类型" -->
    <el-radio-group v-if="condition.column === 'MemberType'" :value="conditionValue" @input="handleValueChange">
      <el-radio class="radio" :label="a.key" :key="a.key" v-for="a in memberTypes">{{a.value}}</el-radio>
    </el-radio-group>
    <el-select class="setPadding2" placeholder=""
               v-if="condition.column === 'DefaultMemberLevel'"
               :value="conditionValue" @input="handleValueChange">
      <el-option v-for="type in memberLevelTypes" :key="type.key" :label="type.value" :value="type.key">
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  props: {
    index: { // 行索引
      type: String,
      required: false
    },
    columnTypes: { // 筛选条件类型集合
      type: Array,
      required: true
    },
    operatorTypes1: {// 筛选条件范围集合
      type: Array,
      required: true
    },
    operatorTypes2: { // 筛选条件范围集合
      type: Array,
      required: true
    },
    memberGroups: {
      type: Array,
      required: true
    },
    memberTypes: {
      type: Array,
      required: true
    },
    memberLevelTypes: {
      type: Array,
      required: true
    },
    condition: { // 行数据集合
      type: Object,
      required: true
    }
  },
  methods: {
    handleColumnChange(val) {
      // 判断是否为已有数据
      this.$emit('changeCondition', {
        column: val,
        operator: '',
        type: '',
        value: []
      })
    },
    handleOperatorChange(val) {
      this.$emit('changeCondition', {
        column: this.condition.column,
        operator: val,
        type: this.condition.type,
        value: this.condition.value ? this.condition.value : []
      })
    },
    handleValueChange(val) {
      let value = val
      if (typeof val === 'string') {
        value = []
        value.push(val)
      }

      this.$emit('changeCondition', {
        column: this.condition.column,
        operator: this.condition.operator,
        type: this.condition.type,
        value: value
      })
    }
  },
  computed: {
    conditionValue() {
      switch (this.condition.column) {
        case 'MemberGroup':
          return this.condition.value && this.condition.value.length
            ? (Array.isArray(this.condition.value) ? this.condition.value : this.condition.value.split(','))
            : []
        case 'DefaultMemberScore':
          return this.condition.value && this.condition.value.length
            ? (Array.isArray(this.condition.value) ? this.condition.value.join('') : this.condition.value)
            : ''
        case 'MemberType':
          return this.condition.value && this.condition.value.length
            ? (Array.isArray(this.condition.value) ? this.condition.value[0] : this.condition.value)
            : ''
        case 'DefaultMemberLevel':
          return this.condition.value && this.condition.value.length
            ? (Array.isArray(this.condition.value) ? this.condition.value[0] : this.condition.value)
            : ''
        default:
          return this.condition.value || []
      }
    }
  }
}
</script>
<style>
.setPadding {
  width: 120px;
}

.setPadding2 {
  width: 120px;
}
</style>
