<template>
    <div>
        <Row>
            <div class="create-group">
                <span class="create-group-indicator"></span>
                <span class="create-group-title">类目选择</span>
                <span class="create-group-sub-title">（指定商品的类目）</span>
            </div>
        </Row>

        <Form ref="product" :model="product" :label-width="70" :rules="ruleValidate">

        <Row>
            <Col span="8">
                    <Form-item label="品牌" prop="brandId">
                        <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>
            </Col>
        </Row>

        <Row>
            <Col span="8" v-if="show[1]">
                <Form-item label="类目" prop="maxSortId">
                    <Select v-model="product.maxSortId" 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>
            </Col>

            <Col span="8" v-if="show[2]">
                <Form-item prop="middleSortId">
                    <Select v-model="product.middleSortId" 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>
            </Col>

            <Col span="8" v-if="show[3]">
                <Form-item prop="smallSortId">
                    <Select v-model="product.smallSortId" 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>
            </Col>
        </Row>

        </Form>

        <Row>
            <div class="product-create__step1-next">
                <Button size="large" type="primary" @click="nextStep">下一步</Button>
            </div>
        </Row>
    </div>
</template>

<script>

import api from '../api';

export default {
    props: ['step', 'product'],
    mounted: function() {
        this.getBrand();
    },
    data() {

        const validateEmpty = (rule, value, callback) => {
            if (!value) {
                return callback(new Error());
            } else {
                return callback()
            }
        };

        return {
            brands: [],
            sorts: {
                1: [],
                2: [],
                3: []
            },
            pickedSortId: {
                1: '',
                2: '',
                3: ''
            },
            pickedLabel: {
                1: '',
                2: '',
                3: ''
            },
            show: {
                1: true,
                2: false,
                3: false
            },
            level: 1,
            sortId: '',
            formValidate: {
                brandId: '',
                maxSortId: '',
                middleSortId: '',
                smallSortId: ''
            },
            ruleValidate: {
                brandId: [
                    { required: true, message: '品牌不能为空', trigger: 'change', validator: validateEmpty}
                ],
                maxSortId: [
                    { required: true, message: '一级类目不能为空', trigger: 'change', validator: validateEmpty}
                ],
                middleSortId: [
                    { required: true, message: '二级类目不能为空', trigger: 'change', validator: validateEmpty}
                ],
                smallSortId: [
                    { required: true, message: '三级类目能为空', trigger: 'change', validator: validateEmpty}
                ]
            }
        };
    },
    methods: {
        nextStep: function() {
            this.$refs['product'].validate((valid) => {
                if (valid) {
                    this.goNext()
                }
            });
        },
        goNext: function() {
            this.step.value = 1;
            this.$router.push({name: 'product.create.step2'});
        },
        selectSort1: function(value) {
            this.level = 2;
            this.sortId = this.product.maxSortId;
            this.pickedLabel[1] = value.label;
            this.sorts[2] = [];
            this.sorts[3] = [];
            this.getSort();
        },
        selectSort2: function(value) {
            this.level = 3;
            this.sortId = this.product.middleSortId;
            this.pickedLabel[2] = value.label;
            this.getSort();
        },
        selectSort3: function(value) {
            this.sortId = this.product.smallSortId;
            this.pickedLabel[3] = value.label;
        },
        selectBrand: function(value) {
            this.product.brandName = value.label;
        },
        getBrand: function() {
            return api.getBrand().then((result) => {
                if (result.code === 200) {
                    this.brands = result.data;
                }
            });
        },
        getSort: function() {
            return api.getSort(
                    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;
                }
            });
        }
    },
    watch: {
        'product.brandId': function() {
            this.level = 1;
            this.sortId = '';
            this.getSort();
        },
        'pickedLabel.3': function() {
            this.product.sortName = `${this.pickedLabel[1]}/${this.pickedLabel[2]}/${this.pickedLabel[3]}`;
        }
    }
};

</script>

<style lang="scss" scoped>

$prefix: product-create;

.#{product-create}__step1-next {
    text-align: center;
    display: block;
    margin: 20px 0;
}


</style>