<template>
    <LayoutBody>
        <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"
                            @on-success="uploadImageSuccess"
                            @on-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" :data="tableData"></Table>
            </Form-item>
            <Form-item>
                <Button type="primary" @click="submit">提交</Button>
            </Form-item>
        </Form>
    </LayoutBody>
</template>

<script>

    import service from 'shop-service';

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

    export default {
        created() {
            service.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: this.shopData.shopIntro
                };

                return result;
            },
            submit: function() {
                let newShop = this.beforeSubmit();

                this.$Loading.start();
                service.saveBaseShopInfo(newShop).then((result) => {
                    this.$Loading.finish();

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

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

<style lang="scss">

    .upload-item {
        float: left;
    }

    .upload-img-tip {
        float: left;
        margin-top: 112px;
        padding-left: 20px;
        color: #c90;
        line-height: 1;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
    }

    .upload-item-img {
        display: inline-block;
        height: 126px;
        width: 124px;
        border: 2px solid #e8e8e8;
        box-sizing: border-box;
    }

</style>