<template>
    <el-select
        v-model="brandIds"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请选择电梯品牌"
        :loading="loading"
        :collapse-tags="true"
        @change="onChange"
        style="width:100%;"
        :multiple-limit="3"
    >
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
</template>
<script>
import { queryLifeBrandList } from '@/apps/mobile/api/databank/index';
export default {
    data() {
        return {
            options: [],
            brandIds: [],
            loading: false,
        };
    },
    props: {
        value: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    created: function(){
        this.queryAllElevatorBrands()
        
    },
    methods: {
        queryAllElevatorBrands() {
            let obj = {
                pageNum: 1,
                pageSize: 5000,
                name: null,
            };
            queryLifeBrandList(obj)
                .then(res => {
                    this.options = res.data.records;
                    this.$nextTick(()=>{
                        this.brandIds = this.value;
                    })
                })
                .catch();
        },
        onChange(val) {
            this.$emit('input', this.brandIds);
        },
        getSelectedItem() {
            return this.options.filter(item=>{
                return this.brandIds.indexOf(item.id) > -1 
            })
        }
    },
};
</script>
