<template>
  <div class="ai-select">
    <el-select
      style="width: 100%;"
      :clearable="clearable"
      :value="value"
      :size="$attrs.size || 'small'"
      v-bind="$attrs"
      v-on="$listeners">
      <el-option
        v-for="(item, index) in selectList"
        :key="index"
        :label="item.dictName"
        :value="item.dictValue">
        <slot :info="item"></slot>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'AiSelect',

  model: {
    prop: 'value',
    event: 'change'
  },
  watch: {
    instance: {
      deep: true,
      handler(v) {
        v && this.isAction && !this.options.toString() && this.getOptions()
      }
    }
  },
  props: {
    value: {
      type: [String, Number, Array]
    },

    clearable: {
      type: Boolean,
      default: true
    },

    selectList: {
      type: Array
    },

    width: {
      type: String,
      default: '216'
    },
    instance: Function,
    action: {default: ""},
    prop: {
      default: () => ({})
    }
  },
  data() {
    return {
      options: [],
      filter: ""
    }
  },
  computed: {
    selectWidth() {
      if (this.width.indexOf('px') > -1) {
        return this.width
      }
      return `${this.width}px`
    },
    isAction() {
      return !!this.action
    },
    actionOps() {
      return this.options.filter(e => !this.filter || e[this.actionProp.label].indexOf(this.filter) > -1)
    },
    actionProp() {
      return {
        label: 'label',
        value: 'id',
        ...this.prop
      }
    }
  },
  methods: {
    getOptions() {
      this.instance?.post(this.action, null, {
        params: {size: 999}
      }).then(res => {
        if (res?.data) {
          this.options = res.data.records || res.data
        }
      })
    }
  },
  created() {
    this.getOptions()
  }
}
</script>

<style lang="scss" scoped>
::v-deep .ai-select .el-select {
  width: 100%;
}
</style>
