<template>
    <Select
        v-model="brandId"
        @on-change="selectChange"
        filterable
        remote
        :remote-method="queryBrands"
        :loading="loading"
        clearable>
        <Option v-for="option in optionList" :value="option.id" :key="option.id">{{option.text}}</Option>
    </Select>
</template>

<script>
    import _ from 'lodash';
    import BrandService from 'services/product/brand-service';

    export default {
        name: 'select-search-brand',
        props: {
            value: {
                type: [Number, String],
                default: 0
            }
        },
        created() {
            this.brandService = new BrandService();
        },
        data() {
            return {
                brandId: this.value,
                loading: false,
                optionList: []
            };
        },
        watch: {
            value(val) {
                this.brandId = val || '';
            }
        },
        methods: {
            queryBrands(query) {
                if (query) {
                    this.loading = true;
                    this.brandService.getBrandNames({
                        nameOrId: query
                    }).then((res) => {
                        this.loading = false;
                        this.optionList = res.data;
                    }, () => {
                        this.loading = false;
                    });
                } else {
                    this.optionList = [];
                }
            },
            selectChange(brandId) {
                this.$emit('input', brandId);
                this.$emit('change', _.find(this.optionList, {brandId}));
            }
        }
    };
</script>

<style lang="scss" scoped>
    .field-label {
        line-height: 32px;
    }
</style>