<template>
  <div class="intelligence-select" :style="getStyles">
    <el-select
      v-model="selectVal"
      v-bind="$attrs"
      :placeholder="placeholder"
      :remote="remote"
      :remote-method="remoteMethod"
      v-on="$listeners"
    >
      <el-option
        v-for="(item) in list"
        :key="item[code]"
        :label="item[label]"
        :value="item[code]"
      >
        <template v-if="label2">
          <span style="float: left">{{ item[label] }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item[label2] }}</span>
        </template>
      </el-option>
    </el-select>
  </div>
</template>

<script>
import options from '../../../lib/mixin/options'

/**
 * @displayName lls-select
 */
export default {
  name: 'LlsSelect',
  mixins: [options],
  props: {
    /**
     * @model
     */
    value: {
      type: [String, Number, Array],
      default: ''
    },
    /**
     * 下拉显示绑定的字段
     */
    label: {
      type: String,
      default: 'name'
    },
    /**
     * 下拉要显示两栏， 第二栏绑定的字段
     */
    label2: {
      type: String,
      default: ''
    },
    /**
     * 下拉选项值绑定的字段
     */
    code: {
      type: String,
      default: 'id'
    },
    /**
     * placeholder
     */
    placeholder: {
      type: String,
      default: '请选择'
    },
    /**
     * 样式集合
     */
    styles: {
      type: Object,
      default: () => ({
        '--color': 'rgba(82,186,255,0.2)',
        '--backgroundColor': 'rgba(82,186,255,0.2)',
        '--borderColor': 'rgba(204, 238, 255, 0.7)',
        '--height': '0.28rem'
      })
    }
  },
  data() {
    return {
      selectVal: this.value,
      type: '', // 下拉类型
      name: '' // 数组名
    }
  },
  computed: {
    getStyles() {
      return this.styles
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.selectVal = newVal
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    async remoteMethod(val) {
      if (this.type == 'api') {
        this.getList(val)
      } else if (this.type == 'fun') {
        this.list = await this.name(val)
      }
      /**
       * 启用远程搜索 输入关键字进行查找
       * @property {String} val  输入的值
       */
      this.$emit('remoteMethod', val)
    },
    clear() {
      if (this.type == 'api') {
        this.getList('')
      }
      /**
       * 可清空的单选模式下用户点击清空按钮时触发
       */
      this.$emit('clear')
    }
  }
}
</script>

<style lang="scss">
.intelligence-select {
  width: 100%;
  .el-select {
    width: 100%;
  }
  .el-input__inner {
    background: var(--backgroundColor);
    border: 0.01rem solid var(--borderColor);
    border-radius: 0.02rem;
    height: var(--height);
    line-height: var(--height);
    color: #CCEEFF;
    font-size: 0.14rem;
  }
  .el-input__icon {
    line-height: 0;
  }
}
</style>
