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

<script>
    import _ from 'lodash';
    import service from 'product-service';

    export default {
        name: 'SelectBrand',
        props: {
            value: {
                type: [Number, String],
                default: 0
            }
        },
        data() {
            return {
                brandId: this.value,
                optionList: []
            };
        },
        watch: {
            value(val) {
                this.brandId = val;
            }
        },
        created() {
            const err_msg = '获取品牌列表失败。';

            service.getBrand().then((res) => {
                let code = _.get(res, 'data.code');

                if (code === 200) {
                    this.optionList = res.data.data;
                    return;
                }
                return this.$Message.error(err_msg);
            });
        },
        methods: {
            selectChange(val) {
                this.$emit('input', val);
            }
        }
    };
</script>

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