<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="50" :rules="ruleValidate">
            <Form-item label="品牌" prop="brandId">
                <Select v-model="formData.brandId" placeholder="请选择" style="width: 300px;">
                    <Option v-for="brand in brands" :value="brand.brandId" :key="brand">{{ brand.brandName }}</Option>
                </Select>
            </Form-item>

            <Form-item label="类目" prop="sortId">
                <SelectCategory v-model="formData.sortId" style="width: 300px;">
                </SelectCategory>
            </Form-item>
        </Form>

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

<script>

import api from 'product-create/api';
import _ from 'lodash';
import {SelectBrand, SelectCategory} from 'components/select';

export default {
    props: ['step', 'product'],
    mounted: function() {
        this.getBrand();
    },
    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: [],
            },
            ruleValidate: {
                brandId: [
                    { 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'});
        },
        getBrand: function() {
            return api.getBrand().then((result) => {
                if (result.code === 200) {
                    this.brands = result.data;

                    if (this.brands.length === 1) {
                        this.formData.brandId = this.brands[0].brandId;
                    }
                }
            });
        }
    },
    watch: {
        'formData.brandId': function(newValue) {
            this.product.brandId = newValue;
            this.product.brandName = _.find(this.brands, {brandId: newValue}).brandName;
        },
        'formData.sortId': function(newValue) {
            this.product.maxSortId = newValue[0].value;
            this.product.middleSortId = newValue[1].value;
            this.product.smallSortId = newValue[2].value;

            this.product.maxSortName = newValue[0].label;
            this.product.middleSortName = newValue[1].label;
            this.product.smallSortName = newValue[2].label;
        }
    },
    components: {
        SelectBrand,
        SelectCategory
    }
};

</script>

<style lang="scss" scoped>

$prefix: product-create;

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


</style>