<template>
  <el-select
    v-model="computedValue"
    filterable
    :placeholder="placeholder"
    :multiple="multiple"
    remote
    :remote-method="getOptions"
    @change="onChange"
    :clearable="clearable"
    :loading="loading"
  >
    <el-option v-for="item in options" :key="item.modelId" :label="item.modelName" :value="item.modelId" >
      <span style="float: left">{{ item.modelName }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.model }}</span>
    </el-option>
  </el-select>
</template>

<script>
import { listModel } from '@/api/system/model'

export default {
  name: "ModelSimpleSelect",
  props: {
    value: {
      type: [String, Array],
      default: null,
    },
    placeholder: {
      type: String,
      default: "请输入或选择型号",
    },
    multiple: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    computedValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  data() {
    return {
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        orderByColumn: 'sort',
        isAsc: 'asc'
      },
      options: []
    }
  },
  created() {
    this.getOptions(null);
  },
  methods: {
    getOptions(keyword) {
      this.queryParams.keyword = keyword;
      this.loading = true;
      listModel(this.queryParams).then(res => {
        if (res.code === 200) {
          this.options = res.rows;
        }
      }).finally(() => {
        this.loading = false;
      })
    },
    onChange(val) {
      this.$emit('change', val);
    }
  }
}
</script>
