<template>
    <el-select
        v-model="brandIds"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请选择电梯品牌"
        :remote-method="remoteMethod"
        :loading="loading"
        collapse-tags
        @change="change"
        @visible-change="visibleChange"
        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: {
        brandsId: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    methods: {
        queryAllElevatorBrands() {
            let obj = {
                pageNum: 1,
                pageSize: 5000,
                name: null,
            };
            queryLifeBrandList(obj)
                .then(res => {
                    console.log(res);
                    this.options = res.data.records;
                })
                .catch();
        },
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                let obj = {
                    pageNum: 1,
                    pageSize: 5000,
                    name: query,
                };
                queryLifeBrandList(obj)
                    .then(res => {
                        console.log(res);
                        this.options = res.data.records.filter(item => {
                            return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
                        });
                        this.loading = false;
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            } else {
                this.options = [];
                this.queryAllElevatorBrands();
            }
        },
        change(value) {
            this.$emit('changeBrands', value);
        },
        visibleChange(booleans) {
            this.queryAllElevatorBrands();
        },
    },
    watch: {
        brandsId(value) {
            if (value) {
                this.brandIds = value;
            }
        },
    },
};
</script>
