<!-- 试验区域-饲养间号 -->
<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" :label="item" :value="item" />
    </el-select>
  </div>
</template>

<script>
import { public_animalSpeciesList } from "@/api/business/public/public";
export default {
  name: "SelectCage",
  components: {},
  props: {
    value: {
      type: [Number, String, Array],
      default: '',
    },
    // 动物种属
    animalSpecies: {
      type: String,
      default: ''
    },
    readonly: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  watch: {
    animalSpecies: {
      immediate: true,
      handler(v) {
        this.getList();
      }
    },
    value: {
      immediate: true,
      handler(v) {
        if (!this.multiple) {
          this.selected = v ? v : ''
        } else {
          if (v) {
            //默认传的,分割的字符串，有传数组再改造
            let arr = v.split(',')
            let s = []
            _.forEach(arr, a => {
              s.push(a)
            })
            this.selected = s
          } else {
            this.selected = []
          }
        }
        this.getList();
      }
    }
  },
  data() {
    return {
      selected: '',
      list: [],
      queryParam: {
      }
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.list = []
      if (this.animalSpecies) {
        public_animalSpeciesList({ animalSpecies: this.animalSpecies }).then(response => {
          response.data.forEach(item => {
            if (this.list.indexOf(item.cage) < 0) {
              this.list.push(item.cage)
            }
          })
        })

      }

    },
    handleChange(val) {
      this.$emit('input', val)
      this.$emit('change', val)
    },
  }
};
</script>
