<template>
    <Select v-model="brandId" @on-change="selectChange" clearable>
        <Option v-for="option in optionList" :value="option.brandId" :key="option.brandId">
            {{option.brandName}}
        </Option>
    </Select>
</template>

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

    export default {
        name: 'select-brand',
        props: {
            value: {
                type: [Number, String],
                default: 0
            }
        },
        created() {
            this.brandService = new BrandService();

            this.brandService.getBrand().then((res) => {
                this.optionList = res.data;
            });
        },
        data() {
            return {
                brandId: this.value,
                optionList: []
            };
        },
        watch: {
            value(val) {
                this.brandId = val;
            }
        },
        methods: {
            selectChange(brandId) {
                this.$emit('input', brandId);
                this.$emit('change', _.find(this.optionList, {brandId}));
            }
        }
    };
</script>

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