<template>
    <layout-body>
        <Form :label-width="100" v-if='shopData' ref="shopData" :model="shopData">
            <Form-item label="店铺名称：">
                <span>{{shopData.shopName}}</span>
            </Form-item>
            <Form-item label="店铺类型：">
                <span>{{SHOPNATURE[shopData.shopNature]}}</span>
            </Form-item>
            <Form-item label="店铺域名：">
                <span>{{shopData.shopDomain}}</span>
            </Form-item>
            <Form-item label="店铺LOGO：">
                <div class="upload-item">
                    <div class="upload-item-img">
                        <drag-file-upload
                            :bucket="bucket"
                            :default-file="shopData.shopLogo"
                            @success="uploadImageSuccess"
                            @remove="uploadImageRemove">
                        </drag-file-upload>
                    </div>
                </div>
                <em class="upload-img-tip">尺寸要求150px＊150px&nbsp;&nbsp;不大于500KB</em>
            </Form-item>
            <Form-item label="店铺简介：">
                <editor :content="shopData.shopIntro" @change="updateData">
                </editor>
            </Form-item>
            <Form-item label="品牌－供应商：">
                <Table :columns="tableCols" width="700" :data="tableData"></Table>
            </Form-item>
            <Form-item>
                <Button type="primary" @click="submit">保存</Button>
            </Form-item>
        </Form>
    </layout-body>
</template>

<script>
    import xss from 'xss';
    import _ from 'lodash';
    import ShopService from 'services/shop/shop-service';

    const SHOPNATURE = {
        1: '旗舰店',
        2: '专卖店',
        3: '初始状态（异常情况）'
    };

    export default {
        created() {
            this.shopService = new ShopService();
            this.shopService.getShop().then((res) => {
                this.shopData = res.data;
                this.tableData = JSON.parse(res.data.shopRelationList || '[]');
            }, (error) => {
                this.$Message.error(error.message);
            });
        },
        data() {
            return {
                SHOPNATURE,
                shopData: null,
                tableCols: [
                    {
                        title: '品牌',
                        key: 'brandName',
                        align: 'center',
                    },
                    {
                        title: '供应商',
                        key: 'supplierName',
                        width: 300,
                        align: 'center'
                    }
                ],
                tableData: null,
                bucket: 'yhb-img01'
            };
        },
        methods: {
            updateData: function(content) {
                this.shopData.shopIntro = content;
            },

            uploadImageSuccess: function(attach, file) {

                this.shopData.shopLogo = file.url;
            },
            uploadImageRemove: function() {
                this.shopData.shopLogo = '';
            },
            beforeSubmit: function() {
                let result = {
                    shopDomain: this.shopData.shopDomain,
                    shopLogo: this.shopData.shopLogo,
                    shopName: this.shopData.shopName,
                    shopNature: this.shopData.shopNature,
                    shopRelationList: this.shopData.shopRelationList,
                    shopsId: this.shopData.shopsId,
                    shopsType: this.shopData.shopsType,
                    shopIntro: xss(this.shopData.shopIntro)
                };

                return result;
            },
            checkSensitiveWord: function() {
                let contentModel = {
                    shopIntro: this.shopData.shopIntro
                };

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

                        } else {
                            this.$Notice.error({
                                title: '店铺简介文字校验错误',
                                desc: resData.message
                            });
                            reject();
                        }
                    });
                });
            },
            save: function() {
                this.$Loading.start();

                let newShop = this.beforeSubmit();

                return this.shopService.saveBaseShopInfo(newShop).then((result) => {
                    this.$Loading.finish();

                    if (result.code === 200) {
                        this.$Notice.success({
                            title: '修改成功',
                            desc: '该店铺保存成功！'
                        });

                    } else {
                        this.$Notice.error({
                            title: '保存错误',
                            desc: result.message
                        });
                    }
                });
            },
            submit: function() {
                this.checkSensitiveWord().then(() => {
                    this.save();
                }, () => {});
            }
        }
    };
</script>

<style lang="scss">

    .upload-img-tip {
        color: #c90;
        display: block;
    }

    .upload-item-img {
        display: inline-block;
        width: 124px;
        box-sizing: border-box;
    }

</style>