<template>
    <div>
        <Row>
            <Col span="8">
                <Form :model="product" :label-width="80">
                    <Form-item label="品 牌*">
                        <Select v-model="product.brandId" placeholder="请选择" :label-in-value="true" @on-change="selectBrand">
                            <Option v-for="brand in brands" :value="brand.brandId" :key="brand">{{ brand.brandName }}</Option>
                        </Select>
                    </Form-item>
                </Form>
            </Col>
        </Row>

        <Row>
            <Col span="8" v-if="show[1]">
            <Form :model="product" :label-width="80">
                <Form-item label="类目*">
                    <Select v-model="pickedSortId[1]" placeholder="一级类目" @on-change="selectSort1" :label-in-value="true">
                        <Option v-for="sort in sorts[1]" :value="sort.sortId" :key="sort">{{ sort.sortName }}</Option>
                    </Select>
                </Form-item>
            </Form>
            </Col>

            <Col span="8" v-if="show[2]">
            <Form :model="product">
                <Form-item>
                    <Select v-model="pickedSortId[2]" placeholder="二级类目" @on-change="selectSort2" :label-in-value="true">
                        <Option v-for="sort in sorts[2]" :value="sort.sortId" :key="sort">{{ sort.sortName }}</Option>
                    </Select>
                </Form-item>
            </Form>
            </Col>

            <Col span="8" v-if="show[3]">
            <Form :model="product">
                <Form-item>
                    <Select v-model="pickedSortId[3]" placeholder="三级类目" @on-change="selectSort3" :label-in-value="true">
                        <Option v-for="sort in sorts[3]" :value="sort.sortId" :key="sort">{{ sort.sortName }}</Option>
                    </Select>
                </Form-item>
            </Form>
            </Col>
        </Row>
        <span>{{this.sortName}}</span>
        <div>
            <Button type="primary" @click="nextStep">下一步</Button>
        </div>
    </div>
</template>

<script>
    import api from '../api'

    export default {
        props: ['step', 'product'],
        mounted : function() {
            this.shopId = this.$cookie.get('SHOP_ID');
            this.getBrand();
        },
        data() {
            return {
                brands: [],
                sorts: {
                    1: [],
                    2: [],
                    3: []
                },
                pickedSortId: {
                    1: '',
                    2: '',
                    3: ''
                },
                pickedLabel: {
                    1: '',
                    2: '',
                    3: ''
                },
                show: {
                    1: true,
                    2: false,
                    3: false
                },
                shopId: '',
                level: 1,
                sortId: '',
            }
        },
        methods: {
            nextStep: function() {
                this.step.value = 1;
                this.$router.push({name:'product.create.step2'});
            },
            selectSort1: function(value) {
                this.level = 2;
                this.sortId= this.pickedSortId[1];
                this.pickedLabel[1] = value.label;
                this.product.maxSortId = this.sortId;
                this.sorts[2] = [];
                this.sorts[3] = [];
                this.getSort();
            },
            selectSort2: function(value) {
                this.level = 3;
                this.sortId= this.pickedSortId[2];
                this.pickedLabel[2] = value.label;
                this.product.middleSortId = this.sortId;
                this.getSort();
            },
            selectSort3: function(value) {
                this.sortId= this.pickedSortId[3];
                this.pickedLabel[3] = value.label;
                this.product.smallSortId = this.sortId;
            },
            selectBrand: function(value) {
                console.log(value);
                this.product.brandName = value.label;
            },
            getBrand: function() {
                return api.getBrand(this.shopId).then((result) => {
                    if (result.code === 200) {
                        this.brands = result.data;
                    }
                });
            },
            getSort: function() {
                return api.getSort(
                        this.shopId,
                        this.product.brandId,
                        this.level,
                        this.sortId
                ).then((result) => {
                    if (result.code === 200 && result.data && result.data.length > 0) {
                        this.sorts[this.level] = result.data;
                        this.show[this.level] = true;
                    }
                });
            }
        },
        computed: {
            sortName: function() {
                return this.product.sortName = `${this.pickedLabel[1]}/${this.pickedLabel[2]}/${this.pickedLabel[3]}`
            }
        },
        watch: {
            'product.brandId': function() {
                this.level = 1;
                this.sortId = '';
                this.getSort();
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>