<template>
  <div>
    <el-select size="small" :value="first" :value-key="config.value" filterable :placeholder="placeholder"
               @change="doSelectFirst">
      <el-option v-for="item in arr"
                 :value="item[config.value]+''"
                 :label="item[config.label]"
                 :key="item[config.value]"/>
    </el-select>
    <el-select size="small" :value="second" :value-key="config.value" filterable :placeholder="placeholder"
               @change="doSelectSecond">
      <el-option v-for="item in arr"
                 :value="item[config.value]+''"
                 :label="item[config.label]"
                 :key="item[config.value]"/>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "SectionSelect",
  props: {
    value: {
      type: String,
      default: ''
    },
    arr: {
      type: Array,
      default: () => []
    },
    config: {
      type: Object,
      default: () => {
        return {
          label: 'label',
          value: 'value'
        }
      }
    },
    placeholder: {
      type: String,
      default: '请选择其它基础或组合规则'
    }
  },
  model: {
    prop: 'value',
    event: 'changeValue'
  },
  computed: {
    first() {
      if (this.value) {
        let temp = this.value.split(",")
        if (temp.length > 0) {
          return temp[0]
        }
      }
      return ''
    },
    second() {
      if (this.value) {
        let temp = this.value.split(",")
        if (temp.length > 1) {
          return temp[1]
        }
      }
      return ''
    },
  },
  methods: {
    doSelectFirst(value) {
      let arr = this.value.split(',')
      if (arr.length > 0) {
        arr[0] = value
      } else {
        arr = [value]
      }
      this.$emit('changeValue', arr.join(","))
    },
    doSelectSecond(value) {
      let arr = this.value.split(',')
      if (arr.length > 1) {
        arr[1] = value
      } else if (arr.length === 0) {
        arr = ['', value]
      } else {
        arr.push(value)
      }
      this.$emit('changeValue', arr.join(","))
    },
  }
}
</script>

<style scoped>

</style>
