<template>
  <el-select
    v-model="_value"
    :size="size" 
    :placeholder="placeholder || '活动人数'"
    :loading="loading"
    reserve-keyword
    filterable
    clearable
  >
    <el-option 
      v-for="item in list" 
      :key="item.id" 
      :value="item.id" 
      :label="getLabel(item)"
    />
  </el-select>
</template>


<script>
import asyncRequest from "@/apis/components/search"
export default {
  name:'SearchPeopleNumber',
  props:['size', 'value' , 'placeholder', 'level'],
  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)
        }
    }
  },
  mounted(){
    this.onFetch()
  },
  methods:{
    getLabel(item){
      console.log(item)
      const {max, min } = item
      if(Number(max) === 0){
        return `${min}+人`
      }

      return `${min} ~ ${max}人`
    },
    async onFetch(keyword = ""){
      const {code, data} = await asyncRequest.peoNum({ name: keyword })
      if(code !== 1) return
      this.list = data.list
    }
  }
}
</script>
