<template>
  <el-select
    v-model="_value"
    :size="size" 
    remote
    :remote-method="onFetch"
    placeholder="请选择店铺"
    :loading="loading"
    reserve-keyword
    filterable
    clearable
  >
    <el-option 
      :key="id" 
      :value="id" 
      :label="store_name" 
      v-for="{ id, store_name, status } in list" 
      :disabled="openOptionDisbaled && Number(status) === 0"
    />
  </el-select>
</template>
<script>
import asyncRequest from "@/apis/components/search"

export default {
  name:'SearchStore',
  props:['size', 'value','openOptionDisbaled'],
  data(){
    return {
      loading: false,
      list: []
    }
  },
  computed:{
    _value:{
      get(){
        return this.value
      },
      set(newVal){
        const current = this.list.find(({id}) => id === newVal)
        this.$emit('update:value', newVal)
        this.$emit('change', current)
      }
    }
  },
  methods:{
    async onFetch(keyword){
      const {code, data} = await asyncRequest.store({store_name: keyword})
      if(code !== 1) return
      this.list = data.list
    }
  }
}
</script>
