<template>
    <LayoutBody>
        <Form :label-width="100">
            <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
                            :default-file="shopData.shopLogo"
                            :id="{goodIndex:1, imageIndex: 1}"
                            @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 _ = require('lodash');

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

    export default {
        created() {
            service.getShop().then((res) => {

                this.shopData = res.data;
                this.tableData = JSON.parse(res.data.shopRelationList);

//                console.log(res);
                console.log(res.data.shopLogo);
            }, (error) => {
                this.$Message.error(error.message);
            });
        },
        data() {
            return {
                SHOPNATURE,
                shopData: {},
                tableCols: [
                    {
                        title: '品牌',
                        key: 'brandName',
                        align: 'center',
                    },
                    {
                        title: '供应商',
                        key: 'supplierName',
                        width: 300,
                        align: 'center'
                    }
                ],
                tableData: []
            };
        },
        methods: {
            updateData(c) {
                this.content = c;
            },

            //上传图片
            uploadImageSuccess: function (attach, file) {
                let colorIndex = attach.goodIndex;
                let imageIndex = attach.imageIndex;

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

                this.product.goods[colorIndex].goodsImage[imageIndex].imageUrl = '';
            },

            //提交
            beforeSubmit: function () {

//            newShop.expectSaleTimeStr = this.product.expectSaleTimeStr;
//
//            newShop.sellerGoodsInfoStr = JSON.stringify(this.handleColor());

            },
            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: '该店铺保存成功！'
                        });

                        this.$router.push({name: 'shop'});
                    } 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>