<template>
  <el-select
    v-model="valueSync"
    filterable
    :clearable="clearable"
    :multiple="multiple"
    remote
    reserve-keyword
    :placeholder="$t('请输入关键词')"
    @change="(val) => $emit('change', val)"
    :remote-method="remoteMethod"
    @focus="onFocus"
    @clear="onClear"
    :loading="loading">
    <el-option
      v-for="(item, index) in list"
      :key="item.id"
      :label="`${item.name}`"
      :value="index">
    </el-option>
  </el-select>
</template>
<script>
import {competitorListAll, getCompetitor} from '@/api/ecw/customer'

export default {
  props: {
    value: [String, Number, Array, Boolean],
    multiple: Boolean,
    clearable: Boolean,
    placeholder: String,
  },
  data() {
    return {
      list: [],
      loading: false,
      valueSync: this.value
    }
  },
  watch: {
    index(val) {
      let id = null
      if (val){
        let data = this.list[val]
        console.log('选中的竞争对手', data)
        id = data.id
      }

      // let id = val !== '' && val !== null ? this.list[val].id : null
      this.$emit('input',  id)

    },
    value(val) {
      // console.log('初始化内容', val)
      this.init()
    },
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (!this.value) {
        this.index = null
        return
      }
      let index = this.list.findIndex(item => item.id == this.value)
      if (index < 0) {
        getCompetitor(this.value).then(res => {
          this.list.unshift(res.data)
          this.$nextTick(() => {
            this.index = 0
          })
        })
      } else this.index = index
    },
    onFocus() {
      this.$emit('focus')
      if (!this.list.length) {
        this.remoteMethod()
      }
    },
    onClear() {
      this.list = []
    },
    remoteMethod(keyword) {
      let params = {}
      params.searchKey = keyword
      this.loading = true
      competitorListAll(params)
        .then(res => {
          console.log('初始化内容', res),
            this.list = res.data
        })
        .finally(() => this.loading = false)
    }
  }
}
</script>