<template>
    <div>
        <Row>
            <Form :label-width="100">
                <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>
                    <Col>
                    <div class="create-item-title">商品颜色主图
                        <span class="create-group-sub-title">（商品正面图默认为用户选择商品颜色和展示使用。用户从不同频道查看商品，优先展示频道封面图）
                            <a href="javascript: void 0;" @click="onClickShowExample">查看色卡图片示例</a>
                        </span>
                    </div>
                    </Col>
                </Row>
                <image-goods-main v-model="product.goods"></image-goods-main>
                <Row>
                    <Col>
                    <div class="create-item-title">商品推荐短语
                        <span class="create-group-sub-title">（默认在前台商品详情页显示）</span>
                    </div>
                    </Col>
                </Row>
                <div>
                    <input-length v-model="product.recommendPhrase" :maxlength="500" placeholder="最多500个字符"></input-length>
                </div>
                <Row>
                    <Col>
                    <div class="create-item-title">商品描述
                        <span class="create-group-sub-title">（详情页内容）</span>
                    </div>
                    </Col>
                </Row>

                <Row>
                    <Col>
                        <editor :content="desc" @change="updateProductDesc"></editor>
                    </Col>
                </Row>

                <Row>
                    <Col>
                        <div class="create-item-title">商品属性
                            <span class="create-group-sub-title">（请认真选择所列的属性项，所填内容会对商品搜索、智能推荐等功能产生影响，从而影响商品曝光展示）</span>
                        </div>
                    </Col>
                </Row>

                <Row v-for="(attr, index) in model.productStandardRelationStr" :key="index">
                    <Col span="8" v-if="attr.inputType === 'select'">
                        <Form-item :label="attr.attributeName">
                            <Select v-model="attr.model" :placeholder="'请选择' + attr.attributeName" :label-in-value="true">
                                <Option v-for="name in attr.idNameList" :value="name.id" :key="name.id">{{name.text}}</Option>
                            </Select>
                        </Form-item>
                    </Col>

                    <Col v-else>
                        <Form-item :label="attr.attributeName">
                            <Checkbox-group v-model="attr.model">
                                <Checkbox v-for="name in attr.idNameList" :label="name.id" :key="naname.idme">
                                    <span>{{name.text}}</span>
                                </Checkbox>
                            </Checkbox-group>
                        </Form-item>
                    </Col>
                </Row>

                <Row v-for="(attr, index) in model.attributeProValuesOne" :key="index">
                    <Col span="8" v-if="attr.inputType === 'select'">
                        <Form-item :label="attr.attributeName">
                            <Select v-model="attr.model" :placeholder="'请选择' + attr.attributeName">
                                <Option v-for="name in attr.idNameList" :value="name.id" :key="name.id">{{name.text}}</Option>
                            </Select>
                        </Form-item>
                    </Col>

                    <Col v-else>
                        <Form-item :label="attr.attributeName">
                            <Checkbox-group v-model="attr.model">
                                <Checkbox v-for="name in attr.idNameList" :label="name.id" :key="name.id">
                                    <span>{{name.text}}</span>
                                </Checkbox>
                            </Checkbox-group>
                        </Form-item>
                    </Col>
                </Row>

                <Row v-for="(attr, index) in model.attributeProValuesTwo" :key="index">
                    <Col span="8" v-if="attr.inputType === 'select'">
                        <Form-item :label="attr.attributeName">
                            <Select v-model="attr.model" :placeholder="'请选择' + attr.attributeName">
                                <Option v-for="name in attr.idNameList" :value="name.id" :key="name.id">{{name.text}}</Option>
                            </Select>
                        </Form-item>
                    </Col>

                    <Col v-else>
                        <Form-item :label="attr.attributeName">
                            <Checkbox-group v-model="attr.model">
                                <Checkbox v-for="name in attr.idNameList" :label="name.id" :key="name.id">
                                    <span>{{name.text}}</span>
                                </Checkbox>
                            </Checkbox-group>
                        </Form-item>
                    </Col>
                </Row>

                <Row v-if="model.productMaterial">
                    <Col>
                    <Form-item :label="model.productMaterial.attributeName">
                        <Checkbox-group v-model="model.productMaterial.model">
                            <Checkbox v-for="name in model.productMaterial.idNameList" :label="name.id" :key="name.id">
                                <span>{{name.text}}</span>
                            </Checkbox>
                        </Checkbox-group>
                    </Form-item>
                    </Col>
                </Row>

            </Form>
        </Row>

        <Row>
            <Col>
                <div style="text-align: center">
                    <Button type="primary" @click="nextStep" size="large">保存并退出</Button>
                </div>
            </Col>
        </Row>

        <modal-example ref="example"></modal-example>
    </div>
</template>

<script>
import xss from 'xss';
import ProductCreateService from 'services/product/product-create-service';
import {step3} from '../store';

export default {
    props: ['step', 'product'],
    created() {
        this.productCreateService = new ProductCreateService();
    },
    data() {
        return step3.call(this);
    },
    mounted: function() {
        this.maxSortId = this.product.maxSortId;
        this.smallSortId = this.product.smallSortId;
        this.getAllAttr(this.smallSortId, this.maxSortId);
    },
    methods: {
        nextStep: function() {
            this.$Loading.start();
            this.submit().then((result) => {
                this.$Loading.finish();

                if (result.code === 200) {
                    this.$Notice.success({title: '保存成功'});
                    this.$router.push({name: 'product.offsale'});
                } else {
                    this.$Notice.error({
                        title: '网销信息更新失败',
                        desc: result.message
                    });
                }
            });
        },
        updateProductDesc: function(c) {
            this.desc = c;
        },
        getAllAttr: function(smallSortId, maxSortId) {
            return this.productCreateService.getAllAttr(smallSortId, maxSortId).then((result) => {
                this.model.productStandardRelationStr = this.productCreateService.addNoneItem(result[0]);
                this.model.attributeProValuesOne = this.productCreateService.addNoneItem(result[1]);
                this.model.attributeProValuesTwo = this.productCreateService.addNoneItem(result[2]);
                this.model.productMaterial = result[3];
            });
        },
        introCheckSensitive() {
            let contentModel = {
                desc: this.desc
            };

            return new Promise((resolve, reject) => {
                this.productCreateService.sensitiveWord(contentModel).then((resData) => {
                    if (resData.code === 200) {
                        if (resData.data && resData.data.desc && resData.data.desc.length > 0) {
                            this.$Notice.error({
                                title: '商品简介存在违禁词',
                                desc: resData.data.desc
                            });
                            reject();
                        } else {
                            resolve();
                        }

                    } else {
                        this.$Notice.error({
                            title: '商品简介文字校验错误',
                            desc: resData.message
                        });
                        reject();
                    }
                });
            });
        },
        submit: function() {
            return this.introCheckSensitive().then(() => {
                let submitData = this.beforeSubmit();

                return this.productCreateService.updateNetInfo(submitData);
            }, () => {});
        },
        beforeSubmit: function() {
            let result = {
                productSkn: this.product.productSkn,
                id: this.product.productId,
                productIntro: xss(this.desc),
                goodsImagesReqStr: JSON.stringify(this.handleImage()),
                productStandardRelationStr: JSON.stringify(this.handleRelation()),
                attributeProValuesOne: JSON.stringify(this.handleOne()),
                attributeProValuesTwo: JSON.stringify(this.handleTwo()),
                productMaterial: this.handleMaterial(),
                recommendPhrase: xss(this.product.recommendPhrase),
            };

            return result;
        },
        handleRelation: function() {
            return this.productCreateService.handleRelation(this.model.productStandardRelationStr);
        },
        handleOne: function() {
            return this.productCreateService.handleValue(this.product.productSkn, this.model.attributeProValuesOne);
        },
        handleTwo: function() {
            return this.productCreateService.handleValue(this.product.productSkn, this.model.attributeProValuesTwo);
        },
        handleMaterial: function() {
            return this.model.productMaterial.model.join(',');
        },
        handleImage: function() {
            return this.productCreateService.handleColorImage(this.product);
        },
        uploadSuccess: function(data, file) {
            let colorIndex = data.goodIndex;
            let imageIndex = data.imageIndex;

            this.product.goods[colorIndex].goodsImage[imageIndex].imageUrl = file.url;
        },
        uploadRemove: function(data) {
            let colorIndex = data.goodIndex;
            let imageIndex = data.imageIndex;

            this.product.goods[colorIndex].goodsImage[imageIndex].imageUrl = '';
        },
        onClickShowExample: function() {
            this.$refs.example.show();
        }
    }
};
</script>