<template>
  <div>
    <el-select style="width:100%" v-model="selected" :placeholder="$t('form.placeholderSelect')"  :disabled="readonly" :multiple="multiple" @change="handleChange" :filterable="filterable">
      <el-option v-for="item in list"  :key="item.id" :label="item.mc" :value="item.id" />
    </el-select>
  </div>
</template>

<script>
import { public_zcgList } from "@/api/business/public/public";
export default {
  name: "SelectZcg",
  components: {},
  props: {
    value: {
      type: [Number, String , Array],
      default: '',
    },
    readonly: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(v) {
        if(!this.multiple){
          this.selected = v ? parseInt(v) : ''
        }else{
          if(v){
            //默认传的,分割的字符串，有传数组再改造
            let arr = v.split(',')
            let s = []
            _.forEach(arr,a=>{
              s.push(parseInt(a))
            })
            this.selected = s
          }else{
            this.selected = []
          }
        }
      }
    },
    storeId: {
      immediate: true,
      handler(v) {
        this.queryParam.storeId = v
        this.getList()

      }
    },
  },
  data() {
    return {
      selected: '',
      list: [],
      queryParam:{
        storeId:''
      }
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.list = []
      public_zcgList(this.queryParam).then(response => {
        this.list = response.data || []
      })
    },
    handleChange(val) {
      this.$emit('input', this.multiple ? (val && val.length>0 ? val.join(','): ''):(val || ''))
      //默认传的,分割的字符串，有传数组再改造
      let res;
      if(this.multiple){
        res = this.list.filter(item=> {
          return  val.includes(item.id)
        })
      }else {
        res = this.list.find(item=> item.id === val)
      }
      this.$emit('change', res)
    },
  }
};
</script>
