<template>
    <div>
        <Form ref="product" :model="product" :label-width="70" :rules="ruleValidate">
            <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>

            <Row> <div class="create-item-title">商品基本信息</div> </Row>

            <Form-item label="品牌"> <span>{{product.brandName}}</span> </Form-item>

            <Form-item label="类目"> <span>{{sortName}}</span> </Form-item>

            <Form-item label="商品名称" prop="productName">
                <Input v-model="product.productName" placeholder="请输入..." style="width: 400px;"/>
            </Form-item>

            <Form-item label="商品卖点">
                <Input v-model="product.phrase" type="textarea" :rows="4" placeholder="请输入..." style="width: 400px;"/>
            </Form-item>

            <Form-item label="商家商品编码" prop="factoryCode">
                <Input v-model="product.factoryCode" placeholder="请输入..." style="width: 400px;"/>
            </Form-item>

            <Form-item label="货品年" prop="goodsYears">
                <Date-picker :value="product.goodsYears" @on-change="clickGoodsYear" type="year" placeholder="选择年" style="width: 400px">
                </Date-picker>
            </Form-item>

            <Form-item label="货品季" prop="goodsSeason">
                <SelectSeason v-model="product.goodsSeason"></SelectSeason>
            </Form-item>

            <Form-item label="上市日期" prop="expectSaleTimeStr">
                <Date-picker :value="product.expectSaleTimeStr" @on-change="clickSaleDate" type="date" placeholder="选择日期" style="width: 400px"></Date-picker>
            </Form-item>

            <Form-item label="性别" prop="gender">
                <RadioGender v-model="product.gender"></RadioGender>
            </Form-item>

            <Form-item label="适销季" prop="seasons">
                <RadioSeason v-model="product.seasons"></RadioSeason>
            </Form-item>

            <Form-item label="年龄层" prop="ageLevel">
                <CheckboxAge v-model="product.ageLevel"></CheckboxAge>
            </Form-item>

            <Row>
                <div class="create-item-title">商品规格
                    <span class="create-group-sub-title">（颜色名称只能填写中文，最多5个汉字。款型编码和条码只能填写英文和数字，不区分大小写）</span>
                </div>
            </Row>

            <Form-item label="颜色" prop="selectColor">
                <CheckboxColor v-model="product.selectColor" @on-add="addColor" @on-remove="removeColor"></CheckboxColor>
            </Form-item>

            <Form-item label="尺寸" prop="selectSize">
                <CheckboxSize v-model="product.selectSize" :sort-id="product.smallSortId" @on-add="addSize" @on-remove="removeSize"></CheckboxSize>
            </Form-item>

            <Form-item >
                <TableCreateGoodSize ref="sellerGoods" v-model="table.data"></TableCreateGoodSize>
            </Form-item>

            <Row> <div class="create-item-title">商品价格</div> </Row>

            <Form-item label="吊牌价" prop="retailPrice">
                <Input v-model="product.retailPrice" :number="true" placeholder="请输入..." style="width: 400px;"/>
            </Form-item>

            <Form-item label="销售价" prop="salesPrice">
                <Input v-model="product.salesPrice" :number="true" placeholder="请输入..." style="width: 400px;"/>
            </Form-item>
        </Form>

        <div style="text-align: center">
            <Button type="primary" @click="nextStep(1)" size="large">下一步</Button>
            <Button type="primary" @click="nextStep(0)" size="large">保存并退出</Button>
        </div>
    </div>
</template>

<script>
import _ from 'lodash';
import api from 'product-create/api';
import service from 'product-create/service';
import {CheckboxAge, CheckboxColor, CheckboxSize} from 'components/checkbox';
import {RadioSeason, RadioGender} from 'components/radio';
import {SelectSeason} from 'components/select';
import {ExamplePop} from 'components/pop';
import {TableCreateGoodSize} from 'components/table';

const makeColor = () => {
    return {
        factoryCode: '',
        factoryGoodsName: '',
        goodsColorImage: '',
        goodsName: '',
        colorId: '',
        isDefault: 'Y',
        goodsSizeList: []
    };
};

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

        const validateMustLessRetailPrice = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('不能为空'));
            }

            if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
            } else {
                if (value > +this.product.retailPrice) {
                    callback(new Error('必须小于等于吊牌价'));
                } else {
                    callback();
                }
            }
        };

        const validateRetailPrice = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('不能为空'));
            }

            if (!Number.isInteger(value)) {
                callback(new Error('请输入整数，不能有小数点'));
            } else if (value > 99999) {
                callback(new Error('价格不能大于5位'));
            } else {
                callback();

            }
        };

        const validateColor = (rule, value, callback) => {
            if (_.isEmpty(value)) {
                return callback(new Error('颜色不能为空'));
            } else {
                callback();
            }
        };

        const validateSize = (rule, value, callback) => {
            if (_.isEmpty(value)) {
                return callback(new Error('尺码不能为空'));
            } else {
                callback();
            }
        };

        return {
            self: this,
            colors: [],
            table: {
                data: [],
                selectedSizes: [],
                selectedColors: [],
                showValidateColor: false,
                showValidateSize: false,
                showValidateOtherProp: false,
                showValidateTable: false,
            },
            ruleValidate: {
                productName: [
                    { required: true, message: '商品名不能为空', trigger: 'blur'}
                ],
                goodsYears: [
                    { required: true, message: '货品年不能为空', trigger: 'change', type: 'string'}
                ],
                goodsSeason: [
                    { required: true, message: '货品季不能为空', trigger: 'change', validator: validateEmpty}
                ],
                expectSaleTimeStr: [
                    { required: true, message: '请选择日期', trigger: 'change', type: 'string'}
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'change'}
                ],
                seasons: [
                    { required: true, message: '不能为空', trigger: 'change'}
                ],
                ageLevel: [
                    { required: true, message: '不能为空', trigger: 'change'}
                ],
                retailPrice: [
                    { required: true, trigger: 'blur', validator: validateRetailPrice},
                ],
                salesPrice: [
                    { required: true, trigger: 'blur', validator: validateMustLessRetailPrice},
                ],
                selectColor: [
                    { required: true, trigger: 'NONE', validator: validateColor},
                ],
                selectSize: [
                    { required: true, trigger: 'NONE', validator: validateSize},
                ],
            },
            years: 2018
        };
    },
    mounted: function() {
    },
    methods: {
        beforeSubmit: function() {
            const handleColor = (color) => {
                let newColor = makeColor();

                newColor.goodsName = color.goodsName.name;
                newColor.isDefault = color.goodsName.isDefault ? 'Y' : 'N';

                newColor.factoryGoodsName = color.factoryGoodsName || color.goodsName.name;
                newColor.factoryCode = color.factoryCode;

                newColor.goodsColorImage = color.goodsColorImage.value;
                newColor.colorId = color.colorId;

                let goodsSizeList = [];

                color.operator.forEach((op, i) => {
                    if (!op.value) {
                        return;
                    }

                    let goodsSize = {};

                    goodsSize.sizeId = color.sizeId[i].id;
                    goodsSize.factoryCode = color.sizeCode[i].name;
                    goodsSizeList.push(goodsSize);
                });

                newColor.goodsSizeList = goodsSizeList;

                return newColor;
            };

            this.refreshTable();
            this.product.sellerGoodsInfoStr = JSON.stringify(this.table.data.map(handleColor));
        },
        submit: function() {
            return this.validate().then(() => {
                this.beforeSubmit();
                return api.saveBaseProductInfo(this.product);
            }, () => {
                this.$Message.error('请填写必填项!');
            });
        },
        nextStep: function(go) {
            this.$Loading.start();
            this.submit().then((result) => {
                this.$Loading.finish();

                if (result.code === 200) {
                    this.$Notice.success({
                        title: '新建商品基础信息成功！'
                    });

                    this.product.productId = result.data.id;
                    this.product.productSkn = result.data.productSkn;
                    this.product.goods = result.data.sellerGoodList.map(service.handleGoods);

                    if (go) {
                        this.goNext();
                    } else {
                        this.saveAndQuit();
                    }

                } else {
                    this.$Notice.error({
                        title: result.message,
                        desc: result.data.join('\n')
                    });
                }
            }).catch(() => {
                this.$Loading.finish();
            });
        },
        goNext: function() {
            this.step.value = 2;
            this.$router.push({name: 'product.create.step3'});
        },
        saveAndQuit: function() {
            this.$router.push({name: 'product.offsale'});
        },
        clickGoodsYear: function(value) {
            this.product.goodsYears = value;
        },
        clickSaleDate: function(value) {
            this.product.expectSaleTimeStr = value;
        },
        initDefault: function() {
            let init = _.some(this.table.data, (c) => {
                return c.goodsName.isDefault;
            });

            if (init) {
                return;
            }

            if (_.isEmpty(this.table.data)) {
                return;
            }

            _.first(this.table.data).goodsName.isDefault = true;
        },
        addColor: function(color) {
            this.refreshTable();
            this.addColorData(color);
            this.table.selectedColors.push(color);
            this.initDefault();
        },
        removeColor(color) {
            let findColorIndex = this.table.selectedColors.findIndex((c) => {
                return c.id === color.id;
            });

            if (findColorIndex !== -1) {
                this.removeColorData(color);
                this.table.selectedColors.splice(findColorIndex, 1);
            }
        },
        addColorData: function(color) {
            let newColor = {
                goodsName: {
                    name: color.colorName,
                    isDefault: false,
                },
                factoryGoodsName: '',
                goodsColorImage: {
                    value: '',
                    showValidate: false,
                    validate: false
                },
                factoryCode: '',
                colorId: color.id,
                sizeId: [],
                sizeCode: [],
                operator: []
            };

            if (this.table.selectedSizes.length > 0) {
                this.table.selectedSizes.forEach((size) => {
                    this.addSizeData(newColor, size);
                });
            }

            this.table.data.push(newColor);
        },
        removeColorData: function(color) {
            let index = this.table.data.findIndex((d) => {
                return d.colorId === color.id;
            });

            this.table.data.splice(index, 1);
        },
        addSize: function(sizes) {
            this.refreshTable();
            let changeSize = _.first(sizes);

            this.table.selectedSizes.push(changeSize);

            this.table.data.forEach((c) => {
                this.addSizeData(c, changeSize);
            });

        },
        removeSize: function(sizes) {
            this.refreshTable();

            let changeSize = _.first(sizes);

            this.table.data.forEach((c) => {
                this.removeSizeData(c, changeSize);
            });
        },
        removeSizeData: function(color, findSize) {
            let index = color.sizeId.findIndex((s) => {
                return s.id === findSize.id;
            });

            if (index !== -1) {
                color.sizeId.splice(index, 1);
                color.sizeCode.splice(index, 1);
                color.operator.splice(index, 1);
                this.table.selectedSizes.splice(index, 1);
            }
        },
        addSizeData: function(color, findSize) {
            color.sizeId.push({
                id: findSize.id,
                name: findSize.sizeName
            });

            color.sizeCode.push({
                name: '',
                validate: false,
                showValidate: false
            });

            color.operator.push({
                value: false
            });
        },
        refreshTable() {
            this.$refs.sellerGoods.syncData();
        },
        validateOtherProps: function() {
            return new Promise((resolve, reject) => {
                this.$refs.product.validate((valid) => {
                    if (valid) {
                        this.table.showValidateOtherProps = false;
                        resolve(true);
                    } else {
                        this.table.showValidateOtherProps = true;
                        resolve(false);
                    }
                });
            });
        },
        validateTable: function() {
            let _this = this;

            return new Promise(function(resolve, reject) {
                let errors = [];

                _this.table.data.forEach((color, i) => {
                    let operators = color.operator;
                    let sizeCodes = color.sizeCode;

                    operators.forEach((o, j) => {
                        if (o.value) {
                            if (!sizeCodes[j].name) {
                                sizeCodes[j].showValidate = true;
                                sizeCodes[j].validate = true;
                                errors.push({row: i, index: j, message: '不能为空'});
                            } else {
                                sizeCodes[j].showValidate = false;
                            }
                        }
                    });

                    let enableCoverOperator = _.some(operators, o => o.value);

                    if (enableCoverOperator && !color.goodsColorImage.value) {
                        color.goodsColorImage.showValidate = true;
                        color.goodsColorImage.validate = true;
                        errors.push({row: i, message: '商品封面不能为空', field: 'goodsColorImage.name'});
                    } else {
                        color.goodsColorImage.showValidate = false;
                    }
                });

                if (errors.length !== 0) {
                    _this.table.showValidateTable = false;
                    return resolve(false);
                } else {
                    _this.table.showValidateTable = true;
                    return resolve(true);
                }

            });
        },
        validateColor: function() {
            let _this = this;

            return new Promise((resolve, reject) => {
                if (_this.table.selectedColors.length === 0) {
                    this.table.showValidateColor = true;
                    return resolve(false);
                }

                this.table.showValidateColor = false;
                return resolve(true);
            });
        },
        validateSize: function() {
            return new Promise((resolve, reject) => {
                if (this.table.selectedSizes.length === 0) {
                    this.table.showValidateSize = true;
                    return reject(false);
                }

                this.table.showValidateSize = false;
                return resolve(true);
            });
        },
        validate: function() {
            this.refreshTable();
            return Promise.all([
                this.validateOtherProps(),
                this.validateColor(),
                this.validateSize(),
                this.validateTable()
            ]).then((valid) => {
                if (valid[0] && valid[1] && valid[2] && valid[3]) {
                    return Promise.resolve();
                } else {
                    return Promise.reject();
                }
            });
        }
    },
    computed: {
        sortName: function() {
            return this.product.maxSortName + '/' + this.product.middleSortName + '/' + this.product.smallSortName;
        }
    },
    components: {
        CheckboxAge,
        RadioSeason,
        RadioGender,
        SelectSeason,
        CheckboxColor,
        CheckboxSize,
        ExamplePop,
        TableCreateGoodSize
    }
};
</script>

<style lang="scss">

</style>