<template>
    <div class="serviceAdd-wrap">
        <div class="ml12 mr12 overFlow-wrap">
            <PromptText text="如何添加服务？" :type="1" class="add-info">
                <template #next_desc>
                    <div class="alert-more flex gap12" :class="alertShow ? '' : 'alert-more-hide'" @click="handleAlert">
                        <div v-if="alertShow">收起</div>
                        <div v-else>展开</div>
                        <img src="@/assets/site/show_and_hide.png" alt="">
                    </div>
                </template>
                <template #desc>
                    <div class="alert-more-info mt12" v-show="alertShow">
                        <div class="flex mb10 gap10">1.点击左侧导航进入设置页，开启所需服务（<img src="@/assets/site/open_success_menu.svg"
                                alt="">图标表示已开启）。</div>
                        <div class="flex mb10 gap10">2.可开启多个服务。</div>
                        <div class="flex gap10">3.全部开启后，点击底部 [添加完成] 。</div>
                    </div>
                </template>
            </PromptText>

            <div class="service-title flex-between" v-if="serviceAddInfo">
                <div class="service-name flex gap12">
                    <img src="@/assets/site/step_success.png" alt="">
                    <span>{{ serviceAddInfo.ver_name }}_{{ serviceAddInfo.type_name }}</span>
                </div>
                <div class="service-status" v-if="serviceInfo.status">
                    <span class="service-status-close" @click="handleDelServiceClick">关闭服务</span>
                    <span class="service-status-desc">已开启</span>
                </div>
            </div>

            <!-- 网页售价 -->
            <div class="flex-common mb12 price-set" v-if="serviceAddInfo.web_price_set">
                <el-form class="el-row demo-ruleForm" ref="formRef">
                    <div class="price-top">
                        <span class="title">网页支付与售价</span>
                        <span class="desc"
                            v-if="serviceAddInfo.supply_price">供货价：{{ serviceAddInfo.supply_price }}{{ serviceAddInfo.supply_price_warning }}</span>
                    </div>

                    <PromptText v-if="serviceAddInfo.prompt.title" :text='serviceAddInfo.prompt.title' :type="1"
                        class="mb12">
                        <template #desc v-if="serviceAddInfo.prompt.content">
                            <div class="alert-more-info mt12">
                                <div class="flex mb10" v-for="item in serviceAddInfo.prompt.content" :key="item">
                                    {{ item }}</div>
                            </div>
                        </template>
                    </PromptText>

                    <div class="flex-wrap">
                        <div class="flex-left">
                            <div class="flex-between mb12">
                                <div>售价管理</div>
                            </div>
                            <div class="flex-between">
                                <div class="short-width">
                                    <GuipSelect width="100%" v-model="serviceInfo.unit" placeholder="选择计费方式"
                                        :options="serviceAddInfo.set_units" />
                                </div>
                                <div class="short-width" v-if="serviceInfo.unit > 0">
                                    <GuipInput v-if="serviceInfo.unit === '1'" v-model="serviceInfo.price" width="100%"
                                        ref="GuipInput" unit="元/篇"></GuipInput>
                                    <GuipInput v-if="serviceInfo.unit === '2'" v-model="serviceInfo.price" width="100%"
                                        ref="GuipInput" unit="元/页"></GuipInput>
                                </div>
                            </div>
                            <div class="flex-between mt12" v-if="serviceInfo.unit === '0'">
                                <div class="short-width">
                                    <GuipInput width="100%" v-model="serviceInfo.price" ref="GuipInput" unit="元">
                                    </GuipInput>
                                </div>
                                <div class="short-width">
                                    <GuipInput width="100%" v-model="serviceInfo.unit_num" ref="GuipInput" unit="字符">
                                    </GuipInput>
                                </div>
                            </div>
                        </div>
                        <template v-if="serviceAddInfo.base_set">
                            <div class="flex-line"></div>
                            <div class="flex-right">
                                <div class="flex-between mb12">
                                    <div>起售价格（选填）</div>
                                    <div>超过设定字符，按照正常售价收取</div>
                                </div>
                                <div class="flex-between">
                                    <div class="third-width">
                                        <GuipInput width="100%" v-model="serviceInfo.base_unit_num" ref="GuipInput"
                                            unit="字符内"></GuipInput>
                                    </div>
                                    <div class="w85">
                                        用户需支付
                                    </div>
                                    <div class="third-width">
                                        <GuipInput width="100%" v-model="serviceInfo.base_unit_price" ref="GuipInput"
                                            unit="元"></GuipInput>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="flex service-opt mt12">
                        <GuipButton type="ignore" @click="resetPrice">重置</GuipButton>
                        <GuipButton type="primary" @click="savePrice" size="medium">保存</GuipButton>
                    </div>
                </el-form>
            </div>

            <!-- 店铺售价-->
            <div class="flex-common mb12 price-set" v-if="serviceAddInfo.shop_price_set">
                <el-form class="el-row demo-ruleForm" ref="formRef">
                    <div class="price-top">
                        <span class="title">{{ serviceAddInfo.shop_name }}支付管理</span>
                        <span class="desc"></span>
                    </div>

                    <div class="flex-wrap">
                        <div class="flex-left">
                            <div class="flex-between mb12">
                                <div>售价管理</div>
                            </div>
                            <div class="flex-between">
                                <div class="short-width">
                                    <GuipSelect width="100%" v-model="serviceInfo.unit" placeholder="选择计费方式"
                                        :options="serviceAddInfo.set_units" />
                                </div>
                                <div class="short-width" v-if="serviceInfo.unit > 0">
                                    <GuipInput v-if="serviceInfo.unit === '1'" v-model="serviceAddInfo.unit_piece"
                                        width="100%" ref="GuipInput" unit="件/篇"></GuipInput>
                                    <GuipInput v-if="serviceInfo.unit === '2'" v-model="serviceAddInfo.unit_piece"
                                        width="100%" ref="GuipInput" unit="件/页"></GuipInput>
                                </div>
                            </div>
                            <div class="flex-between mt12" v-if="serviceInfo.unit === '0'">
                                <div class="short-width">
                                    <GuipInput width="100%" v-model="serviceInfo.unit_piece" ref="GuipInput" unit="件">
                                    </GuipInput>
                                </div>
                                <div class="short-width">
                                    <GuipInput width="100%" v-model="serviceInfo.unit_num" ref="GuipInput" unit="字符">
                                    </GuipInput>
                                </div>
                            </div>
                        </div>
                        <template v-if="serviceAddInfo.base_set">
                            <div class="flex-line"></div>
                            <div class="flex-right">
                                <div class="flex-between mb12">
                                    <div>起售价格（选填）</div>
                                    <div>超过设定字符，按照正常售价收取</div>
                                </div>
                                <div class="flex-between">
                                    <div class="third-width">
                                        <GuipInput width="100%" v-model="serviceInfo.base_unit_num" ref="GuipInput"
                                            unit="字符内"></GuipInput>
                                    </div>
                                    <div class="w85">
                                        用户需支付
                                    </div>
                                    <div class="third-width">
                                        <GuipInput width="100%" v-model="serviceInfo.base_unit_piece" ref="GuipInput"
                                            unit="件"></GuipInput>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="flex service-opt mt12">
                        <GuipButton type="ignore" @click="resetShopPrice">重置</GuipButton>
                        <GuipButton type="primary" @click="saveShopPrice()" size="medium">保存</GuipButton>
                    </div>
                </el-form>
            </div>

            <!-- 店铺商品绑定-->
            <div class="flex-common mb12 price-set" v-if="serviceAddInfo.exists_shop_pay">
                <el-form class="el-row demo-ruleForm" ref="formRef">
                    <div class="price-top">
                        <span class="title">关联电商商品</span>
                        <span class="desc">必须关联，且确保服务与{{ serviceAddInfo.shop_name }}电商商品一致</span>
                    </div>
                    <div class="flex-wrap" @click="bindGoods">
                        <div class="flex-left bind-button gap12">
                            <img src="@/assets/addIcon.svg" alt="">
                            <span>添加宝贝</span>
                        </div>
                    </div>
                    <div class="bind-list" v-if="bindList">
                        <div class="bind-item" v-for="(row, key) in bindList" :key="key">
                            <img :src="row.pic_url ? row.pic_url : require('@/assets/site/invalid.png')" alt="">
                            <div class="bind-goods-info">
                                <div class="bind-goods-title"><el-link :href="row.link"
                                        target="_blank">{{ row.title }}</el-link>
                                </div>
                                <div class="flex-between gap12">
                                    <div class="flex gap12">
                                        <span v-if="row.price">￥{{ row.price }}</span>
                                        <span v-if="row.sec_title">{{ row.sec_title }}</span>
                                    </div>
                                    <div class="flex gap12">
                                        <span class="bind-btn bind-delete"
                                            @click="handleDelBindClick(row, key)">删除</span>
                                        <span class="bind-btn"
                                            :class="row.is_default === '1' ? 'bind-default-active' : 'bind-default'"
                                            @click="handleDefaultConfirm(row.id)">默认商品</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>

                <bindGoods :showBind="showBind" :uid="uid" :type="type" :pati="pati" :pageCode="pageCode"
                    @handleBind="handleBind">
                </bindGoods>

                <GuipDialog :dialogVisible="dialogDelBindConfim" title="提示" :show-close-button="false"
                    @confirm="handleDelBindConfirm" @cancel="handleDelBindCancel">
                    您确定要删除吗？删除后所有绑定都会删除
                </GuipDialog>
            </div>

            <GuipDialog :dialogVisible="dialogDelServiceConfim" title="提示" :show-close-button="false"
                @confirm="handleDelServiceConfirm" @cancel="handleDelServiceCancel">
                确定要移除服务吗?
            </GuipDialog>

        </div>
        <div class="register-btns">
            <GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="jumpStep">添加完成
            </GuipButton>
        </div>
    </div>

</template>
<script>
import store from '@/store';
import { mapState } from 'vuex';
import GuipButton from "@/components/GuipButton.vue";
import PromptText from "@/components/PromptText.vue";
import GuipSelect from "@/components/GuipSelect.vue";
import GuipInput from "@/components/GuipInput.vue";
import bindGoods from "@/components/bindGoods.vue";
import GuipDialog from "@/components/GuipDialog.vue";

export default {
    name: 'siteServiceAdd',
    props: [''],
    components: {
        GuipDialog,
        GuipInput,
        GuipSelect,
        PromptText,
        GuipButton,
        bindGoods,
    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTI2NDY1NDUsIm5iZiI6MTc1MjY0NjU0NSwiZXhwIjoxNzU1MjM4NTQ1LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.G-Is-x9qPMiV_urOlDPQVRjfAIozySxL5EK2k82d46k',
            uid: 0,
            type: 0,
            prodid: 0,
            serviceAddInfo: {},
            serviceInfo: {},
            bindList: [],
            alertShow: true,
            menuList: {},
            siteAddUrl: '/agent/siteAdd',
            showBind: false,
            pati: '',
            pageCode: '',
            dialogDelBindConfim: false,
            delRow: {},
            dialogDelServiceConfim: false,
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    watch: {
        '$store.state.currentMenuItem'(newVal) {
            this.type = newVal.type
            this.getServiceAddInfo();
        },
    },
    created() {
        if (!this.$route.query.uid && !this.$route.query.prodid) {
            this.$message.error('非法请求');
            this.$router.push('/agent/siteAdd')
        }
        this.uid = this.$route.query.uid
        this.prodid = this.$route.query.prodid

        this.loadPddSDK()
    },
    mounted() {
        store.commit('SET_PAGETITLE', '站点信息');
        this.getAddServiceList();
    },
    methods: {
        handleAlert() {
            this.alertShow = !this.alertShow
        },
        //获得左侧菜单导航
        getAddServiceList() {
            const that = this
            that.$http('POST', '/agentnew/ajax_get_service_add_list', {
                uid: that.uid,
                prodid: that.prodid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                that.$nextTick(() => {
                    that.menuList = response.data
                    store.commit('SET_SECOND_MENU', response.data);
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        //获得要添加的服务信息
        getServiceAddInfo() {
            const that = this
            that.$http('POST', '/agentnew/ajax_get_service_add_info', {
                uid: that.uid,
                type: that.type,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                if (response.status) {
                    that.$nextTick(() => {
                        that.serviceAddInfo = response.data
                        //拼多多渠道查询商品所需参数初始化
                        if (that.serviceAddInfo.shop_name === '拼多多') this.initPddParam(that.uid)
                        //设置默认计费方式
                        that.serviceInfo.unit = that.serviceAddInfo.unit
                        //查询是否添加了此服务
                        that.getServiceInfo()

                        store.commit('SET_BREADRIGHTTEXT', that.serviceAddInfo.site_short_name);
                    })
                    return true
                }
                that.$message.error(response.info);
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        //查询是否添加了此服务
        getServiceInfo() {
            const that = this
            that.serviceInfo = {}
            that.$http('POST', '/agentnew/ajax_get_service_info', {
                uid: that.uid,
                type: that.type,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                that.serviceInfo.status = false
                if (response.status && response.data) {
                    that.$nextTick(() => {
                        that.serviceInfo = response.data.service_info
                        that.serviceInfo.status = true
                    })
                    that.getServiceBindGoods()
                }
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        //查询绑定的宝贝
        getServiceBindGoods() {
            const that = this
            that.$http('POST', '/agentnew/ajax_get_service_bind_goods', {
                uid: that.uid,
                type: that.type,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                if (response.status && response.data) {
                    that.$nextTick(() => {
                        that.bindList = response.data
                    })
                }
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        handleDelServiceClick() {
            this.dialogDelServiceConfim = true
        },
        handleDelServiceCancel() {
            this.dialogDelServiceConfim = false
        },
        handleDelServiceConfirm() {
            const that = this
            this.dialogDelServiceConfim = false
            this.$http('POST', '/agentnew/ajax_del_service', {
                uid: that.uid,
                type: that.type,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                if (response.status) {
                    that.$message.success('删除成功');
                    this.$nextTick(() => {
                        that.serviceInfo = {}
                        that.setMenuList(that.type, false)
                    })
                    return true;
                }
                that.$message.error(response.info);
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        resetPrice() {
            this.serviceInfo.price = ''
            this.serviceInfo.unit_num = ''
            this.serviceInfo.b_unit_price = ''
            this.serviceInfo.b_unit_num = ''
        },
        savePrice() {
            const that = this
            this.$http('POST', "/agentnew/ajax_set_service_price", {
                uid: that.uid,
                type: that.type,
                unit_num: that.serviceInfo.unit_num,
                unit_price: that.serviceInfo.price,
                b_unit_num: that.serviceInfo.base_unit_num,
                b_unit_price: that.serviceInfo.base_unit_price,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                if (response.status) {
                    if (that.serviceInfo.status === false) {
                        that.serviceInfo.status = true
                        that.setMenuList(that.type, true)
                    }
                    that.$message.success('保存成功');
                    return true;
                }
                that.$message.error(response.info);
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        resetShopPrice() {
            this.serviceInfo.unit_piece = ''
            this.serviceInfo.unit_num = ''
            this.serviceInfo.b_unit_piece = ''
            this.serviceInfo.b_unit_num = ''
        },
        saveShopPrice() {
            const that = this
            this.$http('POST', "/agentnew/ajax_set_service_price", {
                uid: that.uid,
                type: that.type,
                unit_num: that.serviceInfo.unit_num,
                unit_piece: that.serviceInfo.unit_piece,
                b_unit_num: that.serviceInfo.base_unit_num,
                b_unit_piece: that.serviceInfo.base_unit_piece,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                if (response.status) {
                    if (that.serviceInfo.status === false) {
                        that.serviceInfo.status = true
                        that.setMenuList(that.type, true)
                    }
                    that.$message.success('保存成功');
                    return true;
                }
                that.$message.error(response.info);
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        setMenuList(type, status) {
            Object.values(this.menuList).forEach((item) => {
                let ver_select = false
                item.list.forEach((item1) => {
                    if (item1.type === type) item1.is_select = status
                    if (item1.is_select === true) ver_select = true
                })

                if (ver_select) item.is_select = true
            })
            store.commit('SET_SECOND_MENU', this.menuList);
        },
        //------绑定相关 start------
        bindGoods() {
            this.showBind = true
        },
        handleBind(bindRes) {
            this.showBind = false
            if (bindRes) this.getServiceBindGoods()
        },
        loadPddSDK() {
            const script = document.createElement('script');
            script.src = 'https://pfile.pddpic.com/galerie-go/open_sdk/pc.202102201613.js';
            document.head.appendChild(script);
        },
        async getPddPageCode(uid) {
            const that = this
            return await that.$http('POST', '/agentnew/ajax_get_pdd_page_code', {
                uid: uid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                return response.data
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        async initPddParam(uid) {
            if (typeof window.PDD_OPEN_init === 'function') {
                this.pageCode = await this.getPddPageCode(uid)

                await window.PDD_OPEN_init({ code: this.pageCode })
                this.pati = await window.PDD_OPEN_getPati()
            } else {
                console.error('PDD_OPEN_init 不存在，SDK 未正确加载');
            }
        },
        handleDelBindClick(row, index) {
            this.dialogDelBindConfim = true
            this.delRow.index = index
            this.delRow.row = row
        },
        handleDelBindCancel() {
            this.dialogDelBindConfim = false
        },
        handleDelBindConfirm() {
            const that = this
            this.dialogDelBindConfim = false
            this.$http('POST', '/agentnew/ajax_del_bind_service_goods', {
                uid: that.uid,
                type: that.type,
                numiid: that.delRow.row.num_iid,
                skuid: that.delRow.row.sku_id,
                paytype: that.delRow.row.pay_type,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                if (response.status) {
                    that.$message.success('删除成功');
                    this.$nextTick(() => {
                        that.bindList.splice(that.delRow.index, 1);
                    })
                    return true;
                }
                that.$message.error(response.info);
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        handleDefaultConfirm(id) {
            const that = this
            this.$http('POST', '/agentnew/ajax_default_bind_setting', {
                uid: that.uid,
                type: that.type,
                id: id,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                if (response.status) {
                    that.$message.success('设置成功');
                    that.bindList.forEach((item) => {
                        item.is_default = '0'
                        if (item.id === id) item.is_default = '1'
                    });
                    return true;
                }
                that.$message.error(response.info);
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        //------绑定相关 end------
        jumpStep() {
            this.$router.push(this.siteAddUrl + '?uid=' + this.uid)
        },
    }
}
</script>
<style lang="scss" scoped>
.serviceAdd-wrap{
    height: 100%;
    display: flex;
    flex-direction: column;
    .overFlow-wrap{
        flex: 1;
        overflow-y: auto;
    }
}
.pb80 {
    padding-bottom: 80px;
}

.ml12 {
    margin-left: 12px;
}

.mr12 {
    margin-right: 12px;
}

.mb10 {
    margin-bottom: 10px;
}

.w85 {
    width: 85px;
}

.add-info {
    .alert-more {
        color: #006AFF;
        letter-spacing: 0.08em;
        cursor: pointer;
        user-select: none;
        /* 标准语法 */
        -webkit-user-select: none;
        /* Safari */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* IE/Edge */
    }

    .alert-more-hide {
        img {
            transform: rotate(180deg);
        }
    }

    .alert-more-info {
        color: #1E2226;
        letter-spacing: 0.08em;
    }

    ::v-deep .prompt-desc {
        font-size: 14px;
        font-weight: bold;
        color: #1E2226;
    }
}


.service-title {
    margin: 20px 0;
    letter-spacing: 0.08em;

    .service-name {
        font-size: 16px;
        font-weight: bold;
        color: #1E2226;
    }

    .service-status {
        .service-status-desc {
            border-radius: 4px;
            border: 1px solid rgba(0, 194, 97, 0.6);
            color: #0DAF49;
            padding: 2px 10px 2px 32px;
            background-image: url(@/assets/site/open_success.svg);
            background-repeat: no-repeat;
            background-position: 10px 50%;
            background-size: 16px 16px;
            margin-right: 12px;
        }

        .service-status-close {
            cursor: pointer;
            color: #8A9099;
            background-image: url(@/assets/site/form_close.svg);
            background-repeat: no-repeat;
            background-position: 0 50%;
            background-size: 16px 16px;
            padding: 2px 10px 2px 22px;
        }
    }
}

.price-set {
    letter-spacing: 0.08em;

    .price-top {
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        .title {
            font-size: 14px;
            font-weight: bold;
            color: #1E2226;
        }

        .desc {
            font-size: 14px;
            color: #626573;
            margin-left: 12px;
        }
    }

    .el-form-item {
        margin-bottom: 0;
    }

    .third-width {
        width: calc((100% - 109px) / 2);
    }
}

.service-opt {
    justify-content: right;
}

.bind-button {
    padding: 15px 20px;
    border-radius: 4px;
    border: 1px dashed #BABDC2;
    justify-content: center;
    align-items: center;
}

.bind-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    letter-spacing: 0.08em;
    flex-wrap: wrap;
    margin-top: 32px;

    .bind-item {
        display: flex;
        gap: 22px;
        justify-content: space-between;
        width: calc((100% - 78px) / 2);
        height: 80px;
        border-radius: 8px;
        background: #FAFAFA;
        padding: 16px;
        color: #626573;

        img {
            width: 80px;
            height: 80px;
            border-radius: 4px;
        }

        .bind-goods-info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: calc(100% - 80px);

            .bind-goods-title {
                text-align: left;

                a {
                    color: #1E2226;
                }

                a:hover {
                    color: #006AFF;
                }
            }

            span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .bind-btn {
                cursor: pointer;
                background-repeat: no-repeat;
                background-position: 0 50%;
                background-size: 16px 16px;
                padding: 2px 0 2px 22px;
            }

            .bind-delete {
                color: #626573;
                background-image: url(@/assets/site/delete.svg);
            }

            .bind-default {
                color: #626573;
                background-image: url(@/assets/site/star-icon.svg);
            }

            .bind-default-active {
                color: #006AFF;
                background-image: url(@/assets/site/star-active-icon.svg);
            }
        }

    }
}

.register-btns {
    // position: absolute;
    // left: 0;
    // bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: #FFFFFF;
    padding: 16px 0px;
    /* 蓝色阴影_常规 */
    box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
    z-index: 999;

    button:nth-child(1) {
        margin-right: 56px;
    }
}
</style>