<template>
    <div class="app-container">
        <div class="btn_wraps">
            <div class="btn" :class="{ active: tableActive == item.autokey }" v-for="item in tableData"
                :key="item.autokey" @click="selectItemChange(item.autokey)">
                {{ item.title }}
            </div>
        </div>
        <div class="form">
            <div class="preview_wrap">
                <div class="phone_wrap">
                    <div class="index_bg" v-if="tableActive == 'index_bg'">
                        <img class="bg" :src="selectItem.value">
                        <div class="menu_wrap">
                            <div class="menu_wrap_div">
                                <div class="left">
                                    <div class="icon_wrap">
                                        <i class="icon el-icon-coffee"></i>
                                    </div>
                                    <div class="info">
                                        <div class="t1">点餐</div>
                                        <div class="t2">在线点不排队</div>
                                    </div>
                                </div>
                                <div class="right">
                                    <div class="btn">
                                        <i class="icon el-icon-postcard"></i>
                                        <div class="info">
                                            <div class="t1">会员</div>
                                            <div class="t2">入会享权益</div>
                                        </div>
                                    </div>
                                    <div class="btn">
                                        <i class="icon el-icon-wallet"></i>
                                        <div class="info">
                                            <div class="t1">充值</div>
                                            <div class="t2">充值享更多优惠</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="my_bg" v-if="tableActive == 'my_bg'">
                        <img class="bg" :src="selectItem.value">
                        <div class="content">
                            <div class="item" style="display: flex;">
                                <div class="left">
                                    <div class="avatar">
                                        <i class="icon el-icon-s-custom"></i>
                                    </div>
                                    <span>微信用户</span>
                                </div>
                                <div class="ewm">
                                    <i class="icon el-icon-menu"></i>
                                </div>
                            </div>
                            <div class="item">
                                <div class="title" style="padding-bottom: 10px;">我的资产</div>
                                <div class="flex">
                                    <div class="btn">
                                        <i class="icon el-icon-s-finance"></i>
                                        <span class="name">储值</span>
                                        <span class="num">**</span>
                                    </div>
                                    <div class="btn">
                                        <i class="icon el-icon-s-ticket"></i>
                                        <span class="name">优惠券</span>
                                        <span class="num">**</span>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="title" style="padding-bottom: 10px;">我的功能</div>
                                <div class="row">
                                    <div class="left">
                                        <i class="icon el-icon-s-ticket"></i>
                                        <div class="label">我的优惠券</div>
                                    </div>
                                    <i class="arrow el-icon-arrow-right"></i>
                                </div>
                                <div class="row">
                                    <div class="left">
                                        <i class="icon el-icon-s-order"></i>
                                        <div class="label">我的订单</div>
                                    </div>
                                    <i class="arrow el-icon-arrow-right"></i>
                                </div>
                                <div class="row">
                                    <div class="left">
                                        <i class="icon el-icon-user-solid"></i>
                                        <div class="label">个人资料</div>
                                    </div>
                                    <i class="arrow el-icon-arrow-right"></i>
                                </div>
                                <div class="row">
                                    <div class="left">
                                        <i class="icon el-icon-s-management"></i>
                                        <div class="label">我的会员卡</div>
                                    </div>
                                    <i class="arrow el-icon-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="member_bg" v-if="tableActive == 'member_bg'">
                        <div class="card_wrap">
                            <div class="card">
                                <img class="bg" :src="selectItem.value">
                                <div class="content">
                                    <div class="ewm">
                                        <i class="icon el-icon-menu"></i>
                                    </div>
                                    <div class="title">{{ shopName }}会员卡 Lv.1</div>
                                    <div class="tips">
                                        <span>欢迎加入本店会员</span>
                                        <span>查看特权</span>
                                    </div>
                                    <div class="btm">
                                        <div class="item">
                                            <span>0.00</span>
                                            <span>储值</span>
                                        </div>
                                        <div class="item">
                                            <span>0</span>
                                            <span>积分</span>
                                        </div>
                                        <div class="item">
                                            <span>0</span>
                                            <span>优惠券</span>
                                        </div>
                                        <div class="item">
                                            <span>0</span>
                                            <span>权益卡</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="info_wrap">
                                <div class="avatar">
                                    <i class="icon el-icon-user"></i>
                                </div>
                                <div class="info">
                                    <div class="t1">感谢你2天陪伴</div>
                                    <div class="t2">您今天的幸运词： <span>林波微步</span> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="shopinfo_bg" v-if="tableActive == 'shopinfo_bg'">
                        <img class="bg" :src="selectItem.value">
                        <div class="shop_name">{{ shopName }}</div>
                        <img class="content" src="@/assets/images/shop_editor_bg.png" alt="">
                    </div>
                </div>
            </div>
            <div class="editor_wrap">
                <div class="header" style="padding-bottom: 20px;">
                    <div class="t1">
                        {{ selectItem.name }}
                    </div>
                    <div class="t2">注：点击图片更换</div>
                </div>
                <div class="form_item">
                    <el-upload :headers="headers" class="avatar-uploader" :action="qiNiuUploadApi"
                        :show-file-list="false" :on-success="handleSuccess" style="width: 200px;height: 200px;">
                        <img v-if="selectItem.value" :src="selectItem.value" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <!-- <div class="title" style="padding-left: 20px;">跳转路径</div>
                    <el-input style="width: 300px;margin-left: 20px;" />
                    <el-button type="primary" style="margin-left: 20px;">修改</el-button> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { tbShopExtend, addtbShopExtend, deletetbShopExtend, querytbShopExtend, edittbShopExtend } from '@/api/extend.js'
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
export default {
    computed: {
        ...mapGetters(["qiNiuUploadApi"])
    },
    data() {
        return {
            tableActive: 'index_bg',
            tableData: [],
            selectItem: {},
            headers: {
                Authorization: getToken()
            },
            imageUrl: '',
            shopName: localStorage.getItem('shopName')
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        // 刷新列表数据
        async doSubmit() {
            await edittbShopExtend({
                ...this.selectItem,
            })
            this.$message({
                message: '编辑成功',
                type: 'success'
            })
            this.getList()
        },
        handleSuccess(response, file, fileList) {
            this.selectItem.value = response.data[0];
            console.log("上传成功", this.form);
            this.doSubmit()
        },
        // 切换类型
        selectItemChange(key) {
            this.tableActive = key
            this.selectItem = { ...this.tableData.find(item => item.autokey == key) }
        },
        // 获取装修数据
        async getList() {
            try {
                let res = await tbShopExtend({
                    shopId: localStorage.getItem('shopId')
                })
                this.tableData = res.content

                this.selectItemChange(this.tableActive)
            } catch (error) {
                console.log(error);
            }
        }
    }
}
</script>

<style scoped lang="scss">
.btn_wraps {
    display: flex;
    $color: #40A9FF;
    gap: 30px;

    .btn {
        width: 100px;
        height: 40px;
        border: 1px solid $color;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 0 4px #40a9ff29;
        color: $color;
        cursor: pointer;

        &.active {
            background-color: $color;
            color: #fff;
        }
    }
}

.form {
    display: flex;
    padding-top: 30px;

    .preview_wrap {
        width: 317px;

        .phone_wrap {
            width: 100%;
            height: 686px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            .index_bg {
                .bg {
                    width: 100%;
                    height: 500px;
                    object-fit: cover;
                    position: relative;
                }

                .info {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    padding-top: 10px;

                    .t1 {
                        font-size: 14px;
                    }

                    .t2 {
                        font-size: 10px;
                        color: #999;
                        padding-top: 4px;
                    }
                }

                .menu_wrap {
                    padding: 0 20px;
                    margin-top: -50px;
                    position: relative;

                    .menu_wrap_div {
                        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                        display: flex;
                        padding: 20px 10px;
                        border-radius: 10px;
                        background-color: #fff;

                        .left {
                            flex: 1;
                            display: flex;
                            flex-direction: column;

                            .icon_wrap {
                                display: flex;
                                justify-content: center;

                                .icon {
                                    font-size: 34px;
                                }
                            }
                        }

                        .right {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            border-left: 1px solid #ddd;
                            padding-left: 20px;

                            .btn {
                                flex: 1;
                                display: flex;
                                align-items: center;

                                &:last-child {
                                    margin-top: 10px;
                                }


                                .icon {
                                    font-size: 30px;
                                }

                                .info {
                                    flex: 1;
                                    padding-top: 0;
                                }
                            }
                        }
                    }
                }
            }

            .my_bg {
                background-color: #f5f5f5;
                height: 100%;

                .bg {
                    width: 100%;
                    height: 180px;
                    object-fit: cover;
                    position: relative;
                }

                .content {
                    padding: 0 10px;
                    margin-top: -40px;
                    position: relative;

                    .item {
                        padding: 10px;
                        align-items: center;
                        justify-content: space-between;
                        background-color: #fff;
                        border-radius: 10px;
                        margin-bottom: 10px;

                        .left {
                            display: flex;
                            align-items: center;

                            .avatar {
                                width: 50px;
                                height: 50px;
                                background-color: #efefef;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-radius: 50%;

                                .icon {
                                    font-size: 24px;
                                    color: #ddd;
                                }
                            }

                            span {
                                margin-left: 10px;
                            }
                        }

                        .ewm {
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            background-color: #E3AD7F;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .icon {
                                font-size: 20px;
                                color: #fff;
                            }
                        }

                        .flex {
                            display: flex;

                            .btn {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                gap: 5px;

                                .icon {
                                    font-size: 28px;
                                }

                                .name {
                                    font-size: 14px;
                                }

                                .num {
                                    color: #E3AD7F;
                                }
                            }
                        }

                        .row {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 10px 0;

                            .left {
                                display: flex;
                                align-items: center;

                                .icon {
                                    font-size: 20px;
                                }

                                .label {
                                    font-size: 14px;
                                    margin-left: 10px;
                                }
                            }

                            .arrow {
                                font-size: 14px;
                                color: #999;
                            }
                        }
                    }
                }
            }

            .member_bg {
                height: 100%;
                background-color: #f5f5f5;
                padding: 10px;

                .card_wrap {
                    background-color: #fff;
                    border-radius: 10px;
                    overflow: hidden;

                    .card {
                        height: 144px;
                        position: relative;

                        .bg {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            object-fit: cover;
                            border-radius: 0 0 10px 10px;
                        }

                        .content {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            background-color: rgba(0, 0, 0, 0.3);
                            border-radius: 0 0 10px 10px;
                            color: #fff;
                            padding: 20px;
                            font-size: 14px;


                            .ewm {
                                width: 30px;
                                height: 30px;
                                border-radius: 50%;
                                background-color: #000;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                position: absolute;
                                top: 15px;
                                right: 20px;

                                .icon {
                                    font-size: 16px;
                                    color: #fff;
                                }
                            }

                            .title {
                                font-size: 16px;
                            }

                            .tips {
                                display: flex;
                                justify-content: space-between;
                                margin-top: 10px;
                                color: inherit;
                            }

                            .btm {
                                width: 100%;
                                display: flex;
                                position: absolute;
                                bottom: 20px;
                                left: 0;

                                .item {
                                    flex: 1;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;
                                }
                            }
                        }
                    }

                    .info_wrap {
                        padding: 20px 10px;
                        display: flex;
                        align-items: center;

                        .avatar {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            background-color: #efefef;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .icon {
                                color: #555;
                                font-size: 24px;
                            }
                        }

                        .info {
                            flex: 1;
                            padding-left: 10px;

                            .t1 {
                                font-size: 14px;
                            }

                            .t2 {
                                font-size: 10px;
                                color: #999;
                                padding-top: 6px;
                            }
                        }
                    }
                }
            }

            .shopinfo_bg {
                .bg {
                    width: 100%;
                    height: 120px;
                    object-fit: cover;
                }

                .shop_name {
                    padding: 10px 10px 0 10px;
                }

                .content {
                    width: 100%;
                    height: auto;
                    display: block;
                }
            }
        }
    }

    .editor_wrap {
        padding-left: 20px;

        .header {
            .t2 {
                color: #999;
                font-size: 12px;
                margin-top: 6px;
            }
        }

        .form_item {
            display: flex;
            align-items: center;

            .avatar {
                display: block;
                width: 200px;
                height: 200px;
                object-fit: cover;
            }

            .title {
                flex-shrink: 0;
            }
        }
    }
}
</style>