<template>
  <el-select
    v-model="selectVal"
    filterable
    style="width: 100%"
    v-bind="$attrs"
    v-on="$listeners"
    reserve-keyword
    remote
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading"
    clearable
  >
    <el-option
      v-for="item in dictList"
      :key="item.id"
      :value="item.id"
      :label="`${item.jobNumber}(${item.name})`"
    ></el-option>
  </el-select>
</template>

<script>
  import { getUserPage } from '@/api/system/organization';
  export default {
    model: {
      prop: 'value',
      event: 'updateVal'
    },
    props: {
      value: {
        type: [String, Number, Array],
        default: ''
      }
    },
    data () {
      return {
        loading: false,
        dictList: []
      };
    },
    computed: {
      selectVal: {
        set (val) {
          this.$emit(
            'selfChange',
            val,
            this.dictList.find((i) => i.id === val)
          );
          this.$emit('updateVal', val);
        },
        get () {
          return this.value;
        }
      }
    },
    created () {
      this.remoteMethod('');
    },
    methods: {
      async remoteMethod (query) {
        this.loading = true;
        getUserPage({ pageNum: 1, size: -1, jobNumber: query })
          .then((res) => {
            this.dictList = res.list;
          })
          .catch(() => {
            this.dictList = [];
          })
          .finally(() => {
            this.loading = false;
          });
      }
    }
  };
</script>
