<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="formData" :model="formData" :label-width="70" :rules="ruleValidate">
            <Form-item label="品牌" prop="brandId">
                <select-brand v-model="formData.brandId" @change="selectBrand" :selectWhenOnlyOne="true" style="width: 300px;"></select-brand>
            </Form-item>

            <Form-item label="销售类型" prop="sellType">
                <select-sell-type v-model="formData.sellType" style="width: 300px;" :brandId="formData.brandId" @change="selectSellType">
                </select-sell-type>
            </Form-item>

            <Form-item label="类目" prop="sortId">
                <select-category :value="formData.sortId" @input="selectSort" style="width: 300px;">
                </select-category>
            </Form-item>
        </Form>

        <Button  type="primary" @click="nextStep">下一步</Button>
    </div>
</template>

<script>

export default {
    props: ['step', 'product'],
    data() {
        const validateEmpty = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('品牌不能为空'));
            }

            callback();
        };

        const validateValue = (rule, value, callback) => {
            let max = value[0];
            let mid = value[1];
            let min = value[2];

            if (!max || !max.value) {
                return callback(new Error('一级类目不能为空'));
            } else if (!mid.value) {

                return callback(new Error('二级类目不能为空'));
            } else if (!min.value) {

                return callback(new Error('三级类目不能为空'));
            } else {
                return callback();
            }
        };

        return {
            brands: [],
            formData: {
                brandId: '',
                sortId: [],
                sellType: ''
            },
            ruleValidate: {
                brandId: [
                    { required: true, message: '品牌不能为空', trigger: 'change', validator: validateEmpty}
                ],
                sellType: [
                    { required: true, message: '销售类型不能为空', trigger: 'change', validator: validateEmpty}
                ],
                sortId: [
                    { required: true, trigger: 'NONE', validator: validateValue},
                ],
            }
        };
    },
    methods: {
        nextStep: function() {
            this.$refs.formData.validate((valid) => {
                if (valid) {
                    this.goNext();
                } else {
                    this.$Message.error('请填写必填项!');
                }
            });
        },
        goNext: function() {
            this.step.value = 1;
            this.$router.push({name: 'product.create.step2'});
        },
        selectBrand(brand) {
            this.product.brandId = brand.brandId;
            this.product.brandName = brand.brandName;
        },
        selectSort(sorts) {
            this.formData.sortId = sorts;
            this.product.maxSortId = sorts[0].value;
            this.product.middleSortId = sorts[1].value;
            this.product.smallSortId = sorts[2].value;

            this.product.maxSortName = sorts[0].label;
            this.product.middleSortName = sorts[1].label;
            this.product.smallSortName = sorts[2].label;
        },
        selectSellType(sellerType) {
            this.product.sellType = sellerType;
        }
    }
};

</script>

<style lang="scss" scoped>
$prefix: product-create;

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