<template>
  <el-select
    :key="multiple + optionMode"
    v-model="selVal"
    class="rc-select"
    :clearable="clearable"
    filterable
    :multiple="multiple"
    :placeholder="placeholder"
    @change="changeEvent"
  >
    <el-option
      v-for="(item, index) in selectOption"
      :key="index"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>
<script>
import { apiMap } from '../../fieldConfig/apis'
export default {
  name: 'RcSelect',
  components: {},
  props: {
    value: {
      type: [Array, String, Number]
    },
    placeholder: String,
    clearable: {
      type: Boolean,
      default: true
    },
    options: {
      type: Array,
      required: true,
      default() {
        return [
          {
            label: '选项一',
            value: 'a'
          },
          {
            label: '选项二',
            value: 'b'
          }
        ]
      }
    },
    label: {
      type: String,
      default: 'label'
    },
    keyVal: {
      type: String,
      default: 'value'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: false
    },
    optionMode: {
      type: String,
      default() {
        return 'static'
      }
    },
    optionApi: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      selVal: this.value,
      selectOption: []
    }
  },
  computed: {
  },
  watch: {
    value(newVal) {
      this.selVal = newVal
    },
    selVal(val) {
      this.$emit('input', val)
    },
    optionMode(val) {
      this.value = this.multiple ? [] : ''
      switch (val) {
        case 'static': this.selectOption = this.options; return
        case 'origin': this.originOptions(this.optionApi); return
      }
    },
    optionApi: {
      deep: true,
      handler(newVal) {
        this.value = this.multiple ? [] : ''
        this.originOptions(newVal)
      }
    },
    multiple(val) {
      const arr = []
      this.value = val ? arr : ''
    }
  },
  created() {},
  beforeMount() {
    if (this.optionMode === 'origin') {
      this.originOptions(this.optionApi)
    } else {
      this.selectOption = this.options
    }
  },
  mounted() {},
  methods: {
    originOptions(config) {
      if (config.mode === 'builtIn') {
        if (config.builtIn === '') {
          return
        } else {
          apiMap[config.builtIn]().then((res) => {
            if (res.data instanceof Array) {
              const optionArray = []
              res.data.forEach(item => {
                optionArray.push({
                  label: item.label || item.name,
                  value: item.value || item.businessId || item.id
                })
              })
              this.selectOption = optionArray
            } else {
              this.selectOption = []
            }
          })
          // apiMap[config.builtIn](this, '', (res) => {
          //   if (res.data instanceof Array) {
          //     const optionArray = []
          //     res.data.forEach(item => {
          //       optionArray.push({
          //         label: item.label || item.name,
          //         value: item.value || item.businessId || item.id
          //       })
          //     })
          //     this.selectOption = optionArray
          //   } else {
          //     this.selectOption = []
          //   }
          // })
        }
      } else {
      }
    },
    changeEvent(selectVal) {
      // DONE: 处理多选时的判断
      if (this.multiple && selectVal instanceof Array) {
        const selectLabel = []
        selectVal.forEach(val => {
          // val 为 option 的value
          this.selectOption.some(option => {
            if (option.value === val) {
              selectLabel.push(option.label)
              // 终止循环
              return true
            }
          })
        })
        this.$emit('changeObj', JSON.stringify(selectLabel))
      } else {
        this.selectOption.some(option => {
          if (option.value === selectVal) {
            this.$emit('changeObj', JSON.stringify(option))
            // 终止循环
            return true
          }
        })
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
  .rc-select {
    &.el-select {
      width 202px
    }
  }
</style>
