de-net/src/view/iframe/publish/give-dialog.vue

<template>
    <div class="overlay" v-if="visible">
        <div class="content"
            :style="{
                height: dialogHeight + 'px',
                width: showComType != 'preview' ? '600px' : '880px'}">   
            <div class="pop-mask"  
                v-show="showCurrencyPop || showCurrencySelect" 
                @click.stop="showCurrencyPop = false; showCurrencySelect=false"></div>

            <!-- 头部 -->
            <div class="head">
                <div class="left">
                    <!-- 关闭按钮 -->
                    <div class="close-btn" @click="close">
                        <img  class="icon-close"
                            :src="require('@/assets/svg/icon-close.svg')"
                            v-if="showComType == 'default'"/>
                        <img class="icon-close"
                            :src="require('@/assets/svg/icon-back.svg')"
                            v-else/>
                    </div>
                    <!-- 标题 -->
                    <div class="title">
                        {{ currentComData[showComType]["title"] }}
                    </div>
                </div>
                <div class="right">
                    <!-- 更多按钮 -->
                    <img :src="require('@/assets/svg/icon-more-l.svg')"
                        class="more"
                        @click="showMoreOption = true">
                    <div class="area-option" 
                        v-if="showMoreOption" 
                        @click="showMoreOption = false">
                        <div class="option">
                            <div class="item" @click="goTransactionsList()">
                                <img :src="require('@/assets/svg/icon-menu.svg')">
                                <span>Transaction History</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 内容 -->
            <div class="body">
                <img src="@/assets/gif/icon-guide-select.gif"
                    class="icon-guide-select"
                    v-if="!currentCurrencyInfo.currencyCode && showComType == 'default'">

                <!-- 充值组件 -->
                <top-up v-if="showComType == 'topUp'" 
                    :asyncIng="asyncIng"
                    :currentCurrencyInfo="tempCurrentCurrencyInfo"
                    @topUpDone="topUpDone"></top-up>

                <!-- 表单填写容器 -->
                <div class="body-content" v-if="showComType != 'topUp'">

                    <!-- 货币列表  -->
                    <div class="currency-pop" v-show="showCurrencyPop">
                        <currency-list 
                            ref="currencyListDom"
                            @selectCurrency="selectCurrency"
                            @setCurrencyList="setCurrentCurrencyInfo"></currency-list>
                    </div>
                    <div class="currency-pop-select" v-show="showCurrencySelect">
                        <currency-select 
                            ref="currencySelectDom"
                            :list="tempCurrentCurrencyList"
                            @selectCurrency="selectCurrencyAfter">
                        </currency-select>
                    </div>

                    <div class="left" v-if="showComType != 'preview'">
                        <div class="gift-pack-wrapper">
                            <img class="icon"
                                :src="require('@/assets/svg/icon-gift-pack.svg')"/>
                        </div>
                        <div class="bottom">
                        </div>
                    </div>

                    <div class="right"  
                        :class="{'fill-right': showComType == 'preview'}">
                        <global-tip :type="'2'"></global-tip>
                        <div class="form-wrapper"  v-if="showComType == 'default'">
                            <img
                                class="img-mode"
                                :src="require('@/assets/svg/img-mode.svg')"
                            />

                            <!-- 金额、数量 -->
                            <div class="form-base">
                                <div class="item currency-select-wrapper">
                                    <div
                                        class="label currency-select"
                                        :class="{'selected': currentCurrencyInfo.currencyCode}"
                                        @click="selectCurrencyPopHandle"
                                    >
                                        <img v-if="currentCurrencyInfo.iconPath"
                                            class="icon"
                                            :src="currentCurrencyInfo.iconPath"
                                        />
                                        <div class="text">
                                            {{currentCurrencyInfo.currencyCode == 'USD' ? 'USD' : currentCurrencyInfo.tokenSymbol || 'Select a reward'}}
                                        </div>
                                        <img
                                            class="arrow"
                                            :src="currentCurrencyInfo.currencyCode ?
                                                require('@/assets/svg/icon-form-arrow-down.svg') :  require('@/assets/svg/icon-form-white-arrow-down.svg') 
                                            "
                                        />
                                    </div>
                                    <input
                                        v-model="baseFormData.amountValue"
                                        placeholder="0"
                                        autofocus
                                        @input="onAmountInput"
                                        @blur="onAmountBlur"
                                    />
                                </div>
                                <div class="item">
                                    <div class="label">
                                        <img
                                            class="icon"
                                            :src="
                                                require('@/assets/svg/icon-winners.svg')
                                            "
                                        />
                                        Winners
                                    </div>
                                    <input
                                        v-model="baseFormData.totalCount"
                                        placeholder="0"
                                        @input="onCountInput"
                                        @blur="onCountBlur"
                                    />
                                </div>
                            </div>

                            <!-- 刷新按钮、充值 -->
                            <div class="form-base-help" v-show="currentCurrencyInfo.currencyCode">
                                <div class="currency-operation">
                                    <div class="balance">
                                        <img
                                            :src="
                                                require('@/assets/svg/icon-balance.svg')
                                            "
                                        />
                                        Balance
                                    </div>
                                    <div class="amount">
                                        <a-tooltip :title="currentCurrencyInfo.balance">
                                            {{ getBit(currentCurrencyInfo.balance) }}
                                        </a-tooltip>
                                        <img
                                            :class="{ 'icon-refresh-rotate': refreshRotate }"
                                            @click="updateCurrencyBanlce"
                                            :src="
                                                require('@/assets/svg/icon-form-refresh.svg')
                                            "
                                        />
                                    </div>
                                    <div v-if="currentCurrencyInfo.currencyCode != 'USD'" class="top-up" @click="goTopUp">Deposit</div>
                                </div>
                                <div class="msg">
                                    Recommend winners 100～10000
                                </div>
                            </div>
                            <div class="form-label">
                                <div>
                                    Tasks
                                </div>
                                <!-- <div>
                                    <el-dropdown trigger="click">
                                        <img src="@/assets/svg/icon-add-task.svg" 
                                            class="icon-add-task"
                                            v-show="formList.some(item => !item.show)">
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <div  v-for="(item, key) in formList" :key="key"
                                                     @click="clickDropdown(item, key)">
                                                    <el-dropdown-item style="height: 50px;width: 240px" v-if="!item.show">
                                                        <img :src="item.icon" style="width: 20px; height: 20px;margin-right: 12px" />
                                                        {{item.label}}
                                                    </el-dropdown-item>
                                                </div>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div> -->
                            </div>

                            <!-- 转推、like、关注 -->
                            <div class="form-require">
                                <div
                                    v-for="(item, index) in formList"
                                    :key="index"
                                >
                                    <div v-if="item.show"  class="form-item"    
                                        :class="{ 'border-hide': formList.length - 1 == index }">
                                        <div class="item-left">
                                            <div class="label">
                                                <img
                                                    class="icon"
                                                    :src="item.icon"
                                                />
                                                {{ item.label }}
                                            </div>
                                            <div
                                                class="control"
                                                v-if="item.nodeType == 'textarea'"
                                            >
                                                <follow-input
                                                    :isAddSelf="!isBack"
                                                    :atUserList="atUserList"
                                                    @addUser="addFollowUser"
                                                    @setUser="setFollowUser"
                                                    @delUser="delFollowUser"
                                                ></follow-input>
                                            </div>
                                            <!-- join discord -->
                                            <div
                                                class="control"
                                                v-if="item.nodeType == 'input'"
                                            >
                                                <div v-if="showDiscordInvitePop" 
                                                    class="discord-invite-info"
                                                    @click="showDiscordInvitePop = false">
                                                    <img class="icon" :src="discordInviteInfo.icon || require('@/assets/svg/icon-discord-mini.svg')" />
                                                    <span class="name">{{discordInviteInfo.name}}</span>
                                                </div>
                                                <input v-model="item.text" 
                                                    placeholder="Enter discord invite link"
                                                    class="discord-address" 
                                                    @input="onIptDiscordAddress($event, index)"
                                                    @blur="onBlurDiscordAddress($event, index)" />
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <el-switch
                                                v-if="item.type > 3"
                                                v-model="item.checked"
                                                @change="formSwitchChange($event, item, index)"
                                            />
                                            <!-- <img src="@/assets/svg/icon-task-close.svg" 
                                                class="icon-task-close"
                                                @click="hideTask(item, index)"> -->
                                        </div>
                                        <!-- 
                                            v-if="item.type == 2 || item.type == 3 || item.type == 7 || item.type == 8 || item.type == 9"

                                            <img
                                            v-if="item.type == 3"
                                            :src="
                                                require('@/assets/svg/icon-option-checked.svg')
                                            "
                                        /> -->
                                    </div>
                                </div>
                            </div>
                            <!-- 机器人 -->
                            <!-- <div class="anti-bot-wrapper">
                                <div class="label">
                                    <img
                                        :src="
                                            require('@/assets/svg/icon-anti-bot.svg')
                                        "
                                        class="icon-bot"
                                    />
                                    Anti Bot
                                    <img
                                        :src="
                                            require('@/assets/svg/icon-beta.svg')
                                        "
                                        class="icon-beta"
                                    />
                                    <img
                                        :src="
                                            require('@/assets/svg/icon-question.svg')
                                        "
                                        class="icon-question"
                                    />
                                </div>
                                <el-switch v-model="openAntiBot" />
                            </div> -->

                            <!-- 提示 -->
                            <ul class="tips-wrapper">
                                <li class="row">
                                    Rewards can only be claimed after the target user completes all tasks you set. 
                                </li>
                                <li class="row">
                                    Each user can only receive a reward once per task.
                                </li>
                                <li class="row">
                                    The reward will expire in 7 days once issued. Please promote it as much as possible within this period. After the experiment, the remaining rewards will be returned to your DeNet Wallet.
                                </li>
                            </ul>

                            <div class="submit-btn-wrapper">
                                <div class="submit-btn"
                                    :class="{ 'disabled-submit': iptErrMsgTxt != '' && !depositGuide }"
                                    @click="confirm">
                                    <img  class="icon-loading"
                                        v-if="submitIng"
                                        :src="require('@/assets/svg/icon-btn-loading.svg')"
                                    />
                                    {{iptErrMsgTxt ? iptErrMsgTxt : 'NEXT'}}
                                </div>
                            </div>
                        </div>

                        <!-- 预览 -->
                        <template v-else-if="showComType == 'preview'">
                            <div class="preview">
                                <div
                                    class="card"
                                    :class="{ center: Number(baseFormData.amountValue) <= Number(currentCurrencyInfo.balance) }">
                                    <div class="card-title">
                                        <img
                                            class="img"
                                            v-if="Number(baseFormData.amountValue) > Number(currentCurrencyInfo.balance)"
                                            :src=" require('@/assets/subject/top-01.svg') " />
                                        <div class="font">
                                            Preview: <span>{{installStatus ? 'After' : 'Before' }}</span> DeNet Installed
                                        </div>
                                    </div>
                                    <div class="flash">
                                        <preview-card
                                            :currentCurrencyInfo="currentCurrencyInfo"
                                            :postData="publishRes"
                                            :baseFormData="baseFormData"
                                            :amountFontSize="previewFontSize"
                                        ></preview-card>
                                    </div>
                                </div>
                                <!-- 需充值 -->
                                <div class="card-content" v-if="Number(baseFormData.amountValue) > Number(currentCurrencyInfo.balance)">
                                    <template v-if="currentCurrencyInfo.currencyCode === 'USD'">
                                        <div class="card-title">
                                            <img class="img" :src=" require('@/assets/subject/top-02.svg') " />
                                            <div class="font">Deposit to Send Giveaway</div>
                                        </div>
                                        <div class="card-list">
                                            <div class="item">
                                                <div class="l">Giveaway Amount</div>
                                                <div class="r"></div>
                                            </div>
                                            <div class="item">
                                                <div class="l">Balance</div>
                                                <div class="r"></div>
                                            </div>
                                            <div class="item">
                                                <div class="l">Paypal charges fee ()</div>
                                                <div class="r"></div>
                                            </div>
                                            <div class="item">
                                                <div class="l">Deposit Amount</div>
                                                <div class="r"></div>
                                            </div>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div class="card-title">
                                            <img class="img" :src=" require('@/assets/subject/top-02.svg') " />
                                            <div class="font">Deposit to Send Giveaway</div>
                                        </div>
                                        <top-up2
                                            :asyncIng="asyncIng"
                                            :currentCurrencyInfo="tempCurrentCurrencyInfo"
                                            @topUpDone="topUpDone">
                                        </top-up2>
                                        <div class="card-title">
                                            <img class="img" :src=" require('@/assets/subject/top-03.svg') " />
                                            <div class="font">Wait for the amount to arrive</div>
                                        </div>
                                        <div class="card-amount">
                                            <img class="icon" src="@/assets/subject/icon-balance.png" />
                                            <div class="con">
                                                <div class="desc">Balance</div>
                                                <div class="price">{{currentCurrencyInfo.balance}} {{currentCurrencyInfo.tokenSymbol}}</div>
                                            </div>
                                            <img
                                                class="refresh"
                                                :class="{ 'icon-refresh-rotate': refreshRotate }"
                                                @click="updateCurrencyBanlce"
                                                :src=" require('@/assets/svg/icon-form-refresh.svg') "
                                            />
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </template>

                        <!-- paypal支付按钮 -->
                        <div class="payment" v-show="showComType == 'preview'">
                            <paypal-button
                                :finalAmountData="finalAmountData"
                                :payConfig="{
                                    paypalClientId,
                                    feeDesc: payConfig.feeDesc,
                                    paypalHtml,
                                    amount: baseFormData.amountValue,
                                    postId
                                }"
                                :currentCurrencyInfo="currentCurrencyInfo"
                                @payPalFinsh="payPalFinsh"
                            >
                                <template v-slot:balance>
                                    <div class="balance" v-if="Number(baseFormData.amountValue) <= Number(currentCurrencyInfo.balance)">
                                        <img class="icon" src="@/assets/subject/icon-balance.png" />
                                        <div class="con">
                                            <div class="desc">Balance</div>
                                            <div class="price">{{currentCurrencyInfo.balance}} {{currentCurrencyInfo.tokenSymbol}}</div>
                                        </div>
                                        <img
                                            class="refresh"
                                            :class="{ 'icon-refresh-rotate': refreshRotate }"
                                            @click="updateCurrencyBanlce"
                                            :src=" require('@/assets/svg/icon-form-refresh.svg') "
                                        />
                                    </div>
                                </template>
                            </paypal-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 提示 -->
        <message-box
            :dialogVisible="showMessageBox"
            :title="messageBoxData.title"
            :content="messageBoxData.content"
            @cancel="messageBoxCancel"
            @confirm="messageBoxConfirm"
        ></message-box>
    </div>
</template>

<script setup>
import { ref, watch, reactive, defineProps, defineEmits, onMounted, nextTick, provide } from "vue";
import { postPublish, verifyPaypalResult, syncChainTokenRechargeRecord, getCurrencyInfoByCode } from "@/http/publishApi";
import { getInviteGuildInfo, getInviteGuildInfoByOpenApi, saveInviteGuildInfo } from "@/http/discordApi";
import { payCalcFee, getPayConfig } from "@/http/pay";
import { getFrontConfig } from "@/http/account";
import {setChromeStorage, getChromeStorage} from "@/uilts/chromeExtension"
import { debounce, getBit } from "@/uilts/help"
import Report from "@/log-center/log"
import { ElMessage, ElLoading, ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
import "element-plus/es/components/message/style/css";

import {create, all} from "mathjs";

import messageBox from "@/view/components/message-box.vue";
import currencyList from "@/view/components/currency-list.vue";
import currencySelect from "@/view/components/currency-select.vue";
import previewCard from "@/view/iframe/publish/components/preview-card";
import followInput from "@/view/iframe/publish/components/follow-input";
import paypalButton from "@/view/iframe/publish/components/paypal-button";
import topUp from "@/view/iframe/publish/components/top-up.vue";
import topUp2 from "@/view/iframe/publish/components/top-up2.vue";
import  GlobalTip  from '@/view/components/global-tip.vue'

const config = {
    number: 'BigNumber',
}
const math = create(all, config);

//临时货币信息
let tempCurrentCurrencyInfo = ref({});
let tempCurrentCurrencyList = ref([]);

let paypalClientId = ref("");
let payConfig = ref({});
let paypalHtml = ref("");
let installStatus = ref(false);
let timer = ref(null);
provide('installStatus', installStatus)

// 发布后返回的结果
let publishRes = reactive({});

//弹窗是否展示
let visible = ref(false);

//弹窗高度
let dialogHeight = ref(680);

// 当前展示组件内容 default(表单)  preview(预览)  topUp(充值)
let showComType = ref("default"); 
let currentComData = {
    default: {
        title: "Giveaway",
    },
    preview: {
        title: "Giveaway",
    },
    topUp: {
        title: "Deposit",
    },
};

// 机器人开关
let openAntiBot = ref(false);

// 是否正在提交
let submitIng = ref(false);

// 艾特关注人列表
let atUserList = ref([]);

// 表单错误提示
let iptErrMsgTxt = ref("Select a reward");

// 是否返回
let isBack = ref(false);

// 展示消息提示 
let showMessageBox = ref(false);

// 展示货币列表pop
let showCurrencyPop = ref(false);
let showCurrencySelect = ref(false);

// 展示更多按钮下的选项
let showMoreOption = ref(false);

// 货币列表的dom
let currencyListDom = ref('');

// 刷新按钮旋转
let refreshRotate = ref(false);

// 预览字体大小
let previewFontSize = ref(56);

let postId = ref('');

// 余额是否同步中
let asyncIng = ref(false);

// 提交按钮-充值引导提示
let depositGuide = ref(false);

let messageBoxData = ref({
    title: "",
    content: "",
});

// 真实支付金额数据
let finalAmountData = ref({
    currencyCode: '',
    feeAmountValue: 0,
    finalAmountValue: 0,
    requestAmountValue: 0,
});

// 表单数据
let baseFormData = reactive({
    amountCurrencyCode: '',
    amountValue: "",
    totalCount: "",
});

// 当前选择的货币信息
let currentCurrencyInfo = ref({
    currencyCode: "",
    currencyName: "",
    balance: "",
    currencyType: "",
    iconPath: "",
    minAmount: "",
    tokenChain: "",
    tokenSymbol: "",
    usdEstimateBalance: ""
});

const discordIptErrTxt = 'Discord invite link is wrong';
const discordIptEmptyErrTxt = 'Enter discord invite link';
const discordIptNerverExpiresErrTxt = 'Make sure the Discord link never expires'
let iptErrType = ''; //discord

let formList = reactive([
    {
        label: "Follow",
        icon: require("@/assets/svg/icon-task-twitter.svg"),
        nodeType: "textarea",
        type: 1,
        text: [],
        checked: true,
        show: true
    },
    {
        label: "Retweet & Like",
        icon: require("@/assets/svg/icon-task-twitter.svg"),
        nodeType: "div",
        type: 3,
        checked: true,
        show: true
    },
    {
        label: "Like Tweet",
        icon: require("@/assets/svg/icon-task-twitter.svg"),
        nodeType: "div",
        type: 2,
        checked: true,
        show: false
    },
    {
        label: "Comment and Tag 3 friends",
        icon: require("@/assets/svg/icon-task-twitter.svg"),
        nodeType: "div",
        type: 9,
        checked: true,
        show: true
    },
    {
        label: "Repost to Facebook",
        icon: require("@/assets/svg/icon-task-facebook.svg"),
        nodeType: "div",
        text: '',
        type: 8,
        checked: true,
        show: true
    },
    {
        label: "Join Discord",
        icon: require("@/assets/svg/icon-discord-mini.svg"),
        nodeType: "input",
        text: '',
        type: 7,
        checked: true,
        show: true
    },
]);

const discordInviteInfo = ref({});
let showDiscordInvitePop = ref(false);

const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false,
    },
});

watch(
    () => props.dialogVisible,
    (newVal) => {
        console.log("watch", newVal);
        visible.value = newVal;
        if (newVal) {
            Report.reportLog({
                pageSource: Report.pageSource.publisherDialog,
                businessType: Report.businessType.pageView,
            });
            getLocalCurrencyInfoByCode();
            setTimeout(() => {
                setDialogHeight();
            }, 300);

            // 更新余额
            clearInterval(timer.value);
            timer.value = setInterval(() => {
                getCurrencyInfo({loop: true});
            }, 10000)
        } else {
            clearInterval(timer.value);
        }
    }
);

const emits = defineEmits(["close", "confirm", "payPalFinsh"]);

const close = () => {
    if (showComType.value != "default") {
        showComType.value = "default";
        calcDomZoom();
        isBack.value = true;
    } else {
        initParams();
        emits("close", false);
    }
};

/**
 * 设置弹窗高度
 */
const setDialogHeight = (resize = false) => {
    nextTick(() => {
        let clientHeight = window.innerHeight;
        let gapSafe = 40;
        console.log('resize',resize)

        if (dialogHeight.value > clientHeight - gapSafe) {
            dialogHeight.value = clientHeight - gapSafe;
        } else {
            if(resize) {
                dialogHeight.value = 680;
            }
        }
    })
};

const selectCurrencyPopHandle = () => {
    Report.reportLog({
        pageSource: Report.pageSource.currencySelectorPage,
        businessType: Report.businessType.pageView,
    });
    showCurrencyPop.value = true;
    nextTick(() => {
        if(currencyListDom.value) {
            currencyListDom.value.getCurrencyInfoList && currencyListDom.value.getCurrencyInfoList();
        }
    })
}

/**
 * 获取实际支付金额
 */
const getPayAmount = async (amountValue) => {
    let res = await payCalcFee({
        params: {
            amountValue,
            currencyCode: currentCurrencyInfo.value.currencyCode,
            payChannel: 'paypal',
        },
    });
    if (res.code == 0) {
        let { finalAmountValue, feeDesc } = res.data;
        payConfig.value.feeDesc = feeDesc;
        if (finalAmountValue > 0) {
            finalAmountData.value = res.data;
        }
    }
    return res.data;
};

const saveDiscordGuildInfo = () => {
    let {guildId, inviteCode, inviteUrl} = discordInviteInfo.value;
    //保存服务器信息 
    Report.reportLog({
        pageSource: Report.pageSource.publisherDialog,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.saveDiscordGuildData
    }, {
        reportData: discordInviteInfo.value
    });

    if(guildId && inviteCode && inviteUrl) {
        saveInviteGuildInfo({
            params: {
                guildId,
                inviteCode,
                inviteUrl
            }
        })
    }
}


const confirm = () => {
    if(depositGuide.value) { //余额不够去充值
        goTopUp();
        return;
    }
    if (submitIng.value || iptErrMsgTxt.value) {
        return;
    }
    let { totalCount = 0 } = baseFormData;
    if (!totalCount) {
        return;
    }
    saveDiscordGuildInfo();
    submitRequest();
};

/**
 * 货币列表-选中货币
 */
const selectCurrency = (params) => {
    let { currencies } = params;
    tempCurrentCurrencyList.value = currencies;
    depositGuide.value = false;
    if (currencies.length > 1) {
        showCurrencyPop.value = false;
        showCurrencySelect.value = true;
    } else {
        selectCurrencyAfter(currencies[0])
    }
};

const selectCurrencyAfter = (params, openWindow = true) => {
    tempCurrentCurrencyInfo.value = params;
    depositGuide.value = false;
    showCurrencySelect.value = false;
    currentCurrencyInfo.value = params;
    setLocalSelectCurrencyInfo(currentCurrencyInfo.value);
    if (openWindow === false) {
        return
    };
    if (params.currencyCode != "USD" && params.balance < params.minAmount) {
        let tokenSymbol = params.currencyCode == 'USD' ? 'USD' : params.tokenSymbol;
        messageBoxBlock({
            title: `Whether to deposit ${tokenSymbol}`,
            content: `Insufficient ${tokenSymbol} balance`,
        });
    } else {
        setCurrentCurrencyListInfo(tempCurrentCurrencyList.value);
        showCurrencyPop.value = false;
        finalAmountData.value.currencyCode = currentCurrencyInfo.value.currencyCode;
        calcDomZoom();
        resetFormIpt();
        onIptSetErrorTxt();
    }
}

const calcDomZoom = () => {
    nextTick(() => {
        let maxWidth = 68;
        var textWidth = document.querySelector('.text').offsetWidth;
        if(textWidth > 68) {
            var scale = maxWidth / textWidth;
            document.querySelector('.text').style.zoom = scale;
        }
    }) 
}

const resetFormIpt = () => {
    baseFormData.amountValue = "";
    baseFormData.totalCount = "";
}

const setLocalSelectCurrencyInfo = (params = {}) => {
    setChromeStorage({ selectCurrencyInfo : JSON.stringify(params)})    
}

const setCurrentCurrencyListInfo = (params = {}) => {
    setChromeStorage({ selectCurrencyList : JSON.stringify(params)})    
}

/**
 * 获取完货币列表
 */

const setCurrentCurrencyInfo = (params) => {
}

const messageBoxBlock = ({ title = "", content = "" }) => {
    showMessageBox.value = true;
    messageBoxData.value.title = title;
    messageBoxData.value.content = content;
};

/**
 * 确定
 */
const messageBoxConfirm = () => {
    showMessageBox.value = false;
    goTopUp();
};

/**
 * 取消
 */
const messageBoxCancel = () => {
    currentCurrencyInfo.value = tempCurrentCurrencyInfo.value;
    setLocalSelectCurrencyInfo(currentCurrencyInfo.value);
    setCurrentCurrencyListInfo(tempCurrentCurrencyList.value);
    showMessageBox.value = false;
    showCurrencyPop.value = false;
    showCurrencySelect.value = false;
    calcDomZoom();
    resetFormIpt();
    onIptSetErrorTxt();
};

/**
 * 去充值
 */
const goTopUp = () => {
    Report.reportLog({
        pageSource: Report.pageSource.rechargePage,
        businessType: Report.businessType.pageView,
    });
    showComType.value = 'topUp';
}

/**
 * 充值done事件
 */
const topUpDone = () => {
    currentCurrencyInfo.value = tempCurrentCurrencyInfo.value;
    asyncIng.value = true;
    depositGuide.value = false;
    asyncIng.value = false;
    showCurrencyPop.value = false;
    showCurrencySelect.value = false;
    showComType.value = 'default';
    calcDomZoom();
    onIptSetErrorTxt()
    
    asyncTokenRechRecord((res) => {
        if(res.code == 0 && res.data && res.data.length) {
            let currencyInfo = res.data[0];
            if(currencyInfo.currencyCode == currentCurrencyInfo.value.currencyCode) {
                currentCurrencyInfo.value.balance = currencyInfo.balance;
                onIptSetErrorTxt()
            }
        }
    })
}

/**
 * 更新货币余额
 */
const updateCurrencyBanlce = () => {
    if(!refreshRotate.value) {
        refreshRotate.value = true;
        setTimeout(() => {
            refreshRotate.value = false;
        }, 1000)
    }
    asyncTokenRechRecord((res) => {
        if(res.code == 0 && res.data && res.data.length) {
            let currencyInfo = res.data[0];
            if(currencyInfo.currencyCode == currentCurrencyInfo.value.currencyCode) {
                currentCurrencyInfo.value.balance = currencyInfo.balance;
            }
        }
    })
}

/**
 * 同步链上交易
 */
const asyncTokenRechRecord = (cb) => {
    syncChainTokenRechargeRecord({
        params: {
            currencyCode: currentCurrencyInfo.value.currencyCode
        }
    }).then(res => {
        cb && cb(res)
    })
}

/**
 * 提交表单请求
 */
const submitRequest = async () => {
    let { amountValue = 0, totalCount = 0 } = baseFormData;
    baseFormData.amountCurrencyCode = currentCurrencyInfo.value.currencyCode;
    // 组装提交参数

    let finishConditions = [];
    for (let i = 0; i < formList.length; i++) {
        let item = {};
        item.type = formList[i]["type"];
        if (item.type == 1 && atUserList.value.length) {
            // follow 参数
            let relatedUsers = atUserList.value.filter(item => item.name);
            item.relatedUsers = relatedUsers;
            finishConditions.push(item);
        } else  if (formList[i]["type"] == 7) {
            // join discord
            if(formList[i]["checked"] && formList[i]["text"]) {
                item.bizData = JSON.stringify({inviteUrl: formList[i]["text"]});
                finishConditions.push(item);
            }
        } else  if (formList[i]["checked"]) {
            // 其余任务
            finishConditions.push(item);
        }
    }
    let receiveConditions = openAntiBot.value ? "" : [];

    // 提交参数
    let formData = {
        amountCurrencyCode: baseFormData.amountCurrencyCode,
        amountValue,
        totalCount,
        finishConditions,
        receiveConditions,
        payAmountValue: amountValue
    };
    submitIng.value = true;

    // 法币支付需要计算费率
    if(formData.amountCurrencyCode == "USD") { 
        let payAmountRes = await getPayAmount(amountValue);
        formData["payAmountValue"] = payAmountRes.finalAmountValue;
    }
    let data = {
        params: {
            postBizData: JSON.stringify(formData),
            postSrc: 1, //1 twitter
            postType: 1, //1 红包
        },
    };
    postPublish(data).then((res) => {
        submitIng.value = false;
        if (res.code == 0) {
            publishRes = res.data;
            postId.value = res.data.postId;
            Report.reportLog({
                pageSource: Report.pageSource.previewPage,
                businessType: Report.businessType.pageView,
            });
            showComType.value = "preview";
            previewFontSize.value = calcFontSize(baseFormData.amountValue, 238, 56);
            isBack.value = false;
        } else {
            console.log(res);
        }
    })
    .catch((err) => {
        console.log(err);
    });
};

const calcFontSize = (str, domWidth, maxSize) => {
    let lenstr = str.length;
    let num = parseInt(domWidth / lenstr);
    let fontSize = num < maxSize ? num : maxSize
    return fontSize;
}

/**
 * 初始化提交参数
 */
const initParams = () => {
    resetFormIpt();

    // clear follow value
    atUserList.value = [];

    submitIng.value = false;
    isBack.value = false;
    showCurrencyPop.value = false;
    showCurrencySelect.value = false;
    openAntiBot.value = false;

    tempCurrentCurrencyInfo.value = {};
    currentCurrencyInfo.value = {};

    // clear discord value
    setDiscordIptTxt({text: ''});

    discordInviteInfo.value = {};
};

const setDiscordIptTxt = ({text}) => {
    const index = formList.findIndex(item => item.type == 7);
    formList[index]['text'] = text;
}

/**
 * 支付完成回调
 */
const payPalFinsh = (params) => {
    let {payNetwork, payStatus} = params;
    // token 支付
    if(payNetwork == 'bsc') {
        payStatusHandle(payStatus);
    } else {
        // 法币支付
        let transaction = params.transaction;
        let loadingInstance = ElLoading.service({
            background: "rgba(0,0,0,.3)",
        });
        verifyPaypalResult({
            params: {
                paypalTransactionId: transaction.id,
                postId: publishRes.postId,
                paypalClientId: paypalClientId.value,
            },
        }).then((res) => {
            loadingInstance.close();
            if (res.code == 0) {
                if (res.data) {
                    payStatusHandle(res.data.payStatus)
                }
            }
        })
        .catch(() => {
            loadingInstance.close();
        });
    }
};

const payStatusHandle = (payStatus) => {
    //支付状态 0：未支付，1：支付成功，2：支付失败，3：已关闭，4：已退款
    switch (payStatus) {
        case 1:
            emits("payPalFinsh", { publishRes });
            showComType.value = "default";
            initParams();
            break;
        case 2:
            // ElMessage({
            //     message: "Pay Fail",
            //     type: "warning",
            // });
            break;
        case 3:
            // ElMessage({
            //     message: "Pay Exceptions",
            //     type: "warning",
            // });
            break;
        case 4:
            // ElMessage({
            //     message: "Pay Exceptions",
            //     type: "warning",
            // });
            break;
    }
}

/**
 * follow组件触发新增关注人
 */
const addFollowUser = (params) => {
    atUserList.value.push(params);
};

const setFollowUser = (params) => {
    atUserList.value[params.index]["name"] = params.name;
};

const delFollowUser = (params) => {
    atUserList.value.splice(params.index, 1);
};

const onAmountInput = () => {
    let val = baseFormData.amountValue;
    // val = val.replace(/[^\d^\.]+/g, "");
    val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');

    if(val == '00') {
        val = '0'
    }
    if(val.indexOf('.') > -1){ //校验 例：00.12 => 0.12
        let arr = val.split('.');
        if(arr[0].startsWith('0')) {
            let num = +arr[0];
            val = num + '.' + arr[1];
        }
    }

    baseFormData.amountValue = val;
    setInputErrorMsg({from: 'amount', type:'input'});

    return val;
};

const onCountInput = () => {
    let val = baseFormData.totalCount;
    if (val == 0) {
        val = "";
    }
    // val = val.replace(/[^\d]/g, "");
    val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');

    baseFormData.totalCount = val;
    setInputErrorMsg({from: 'count', type:'input'});
    return val;
};

/**
 * 金额输入失焦
 */
const onAmountBlur = () => {
    setInputErrorMsg({from: 'amount', type:'blur'});
};

/**
 * count失焦，校验输入结果
 */
const onCountBlur = () => {
    setInputErrorMsg({from: 'count', type:'blur'});
};

/**
 * 输入结果金额和数量 （金额/数量）是否小于最小货币单位
 */
const calcIptValue = (cb) => {
    let amountValue = baseFormData.amountValue;
    let totalCount = baseFormData.totalCount;
    let flag = true;

    if (!amountValue || !totalCount) {
        return {
            flag
        };
    }

    if (math.format(math.evaluate(`${baseFormData.amountValue} / ${baseFormData.totalCount}`)) < +currentCurrencyInfo.value.minAmount) {
        flag = false;
    }
    return {
        flag,
        count: Math.floor(math.format(math.evaluate(`${baseFormData.amountValue} / ${currentCurrencyInfo.value.minAmount}`)))
    }
};

/**
 * 设置输入提示语
 */
const setInputErrorMsg = () => {
    onIptSetErrorTxt();
};

/**
 * 输入时 检测设置错误信息
 */
const onIptSetErrorTxt = (params = {}) => {
    depositGuide.value = false;
    if(!currentCurrencyInfo.value.currencyCode) {
        iptErrMsgTxt.value = "Select a reward"
    } else if (!baseFormData.amountValue || baseFormData.amountValue == '0') {
        iptErrMsgTxt.value = "Enter an amount";
    } else if (!baseFormData.totalCount || baseFormData.totalCount == '0') {
            iptErrMsgTxt.value = "Enter the number of winners";
    } else if(+baseFormData.amountValue <= +currentCurrencyInfo.value.balance) {
        let res = calcIptValue();
        if (!res.flag) {
            iptErrMsgTxt.value = `${baseFormData.amountValue} ${currentCurrencyInfo.value.tokenSymbol} Can send up to ${res.count} winners`;
        } else {
            iptErrMsgTxt.value = "";
            if(params.actionType != 'discord_blur') {
                setDiscordErrTxt({getDuildId: true});
            }
        }
    } else {

        setDiscordErrTxt({getDuildId: true}, () => {
            iptErrMsgTxt.value = '';
        });
    } 
}

/**
 * 监听开关触发事件
 */
const formSwitchChange = (val, params, index) => {
    closeDiscordTask(val, params, index);
}


const hideTask = (params, index) => {
    formList[index]['checked'] = false;
    formList[index]['show'] = false;
    closeDiscordTask(false, {type: 7}, index)
}

const clickDropdown = (params, index) => {
    formList[index]['show'] = true;
    formList[index]['checked'] = true;
}

const closeDiscordTask = (val, params, index) => {
    if(params.type == 7) {
        if(!val) {
            //错误类型 discord 清空discord错误校验
            if(iptErrType == 'discord') {
                iptErrMsgTxt.value = '';
                formList[index]['text'] = '';
                onIptSetErrorTxt();
            }
        } else {
            onIptSetErrorTxt();
        }
    }
}


/** 监听 discord 输入 */
const onIptDiscordAddress = (e, index) => {
    let val = formList[index].text;
    let checked = formList[index].checked;
    if(val && !checked) {
        checked = true;
        formList[index].checked = checked;
        formList[index].text = formList[index].text.replace(/\s/g,'');
    } else if(!val){
        discordInviteInfo.value = {};
    }
    onIptDiscordDebounce()
}

const onBlurDiscordAddress = (e, index) => {
    setDiscordErrTxt({fromType: 'discord', showPop: false, actionType: 'discord_blur'});
}


const getDiscordIptData = () => {
    let discordItem = formList.find(item => item.type == 7);
    return discordItem;
}

/**
 * 设置输入discord错误提示信息
 */
const setDiscordErrTxt = (params = {showPop: false}, cb) => {
    let discordData = getDiscordIptData() || {};
    if(discordData.checked) {
        if(discordData.text) {
            let validata = checkInviteUrl(discordData.text);
            if(validata) {
                getDiscordInviteInfo({inviteUrl: discordData.text, getDuildId: params.getDuildId}, (res) => {
                    console.log('discordData',res)
                    // 未知的邀请链接
                    if(res.inviteCode != res.data.code || !res.data.guildId) {
                        iptErrMsgTxt.value = discordIptErrTxt;
                        iptErrType = 'discord';
                    } else {
                        if(res.data.expires !== null) {
                            // 不是永久邀请链接
                            iptErrMsgTxt.value = discordIptNerverExpiresErrTxt;
                            iptErrType = '';
                        } else {
                            if(iptErrMsgTxt.value) {
                                iptErrMsgTxt.value = '';
                                iptErrType = '';
                            }
                            if(params.showPop && res.data) {
                                showDiscordInvitePop.value = true;
                                setTimeout(() => {
                                    showDiscordInvitePop.value = false;
                                }, 2000)
                            }
                            if(params.fromType == 'discord') {
                                onIptSetErrorTxt();
                            }
                        }
                    }
                    cb && cb(res)
                })
            } else {
                iptErrMsgTxt.value = discordIptErrTxt;
                iptErrType = 'discord';
            }
        } else {
            if(params.actionType == 'discord_blur') {
                onIptSetErrorTxt({acitonType: 'discord_blur'});
            } else {
                // 设置空提示
                iptErrMsgTxt.value = discordIptEmptyErrTxt;
                iptErrType = 'discord';
            }
        }
    } else {
        cb && cb();
    }
}

const onIptDiscordDebounce = debounce(function() {
    setDiscordErrTxt({fromType: 'discord', showPop: true});
}, 800) 

/**
 * 校验 discord邀请url
 */
const checkInviteUrl = (inviteUrl) => {
    let flag = false;
    const INVITE_URL_PREFIX_1 = 'https://discord.gg/';
    const INVITE_URL_PREFIX_2 = 'https://discord.com/invite/';
    const INVITE_URL_PREFIX_3 = 'http://discord.gg/';
    const INVITE_URL_PREFIX_4 = 'http://discord.com/invite/';
    const INVITE_URL_PREFIX_5 = 'discord.gg/';
    const INVITE_URL_PREFIX_6 = 'discord.com/invite/';

    const arr = [INVITE_URL_PREFIX_1, INVITE_URL_PREFIX_2, INVITE_URL_PREFIX_3, INVITE_URL_PREFIX_4, INVITE_URL_PREFIX_5, INVITE_URL_PREFIX_6]

    if(inviteUrl) {
        if(arr.indexOf(inviteUrl) > -1) {
            flag = false;
        } else {
            let isPass = false;
            for(let i = 0; i < arr.length; i++) {
                let item = arr[i];
                if(inviteUrl.startsWith(item)) {
                    isPass = true;
                    break;
                }
            }
            flag = isPass;
        }
    } 

    return flag;
}

/**获取discord 邀请信息 */
const getDiscordInviteInfo = ({inviteUrl, getDuildId}, cb) => {
    if(!inviteUrl) return;
    let inviteCode = '';
    let arr = inviteUrl.split('/');
    if(arr.length > 0) {
        inviteCode = arr[arr.length - 1];
    }
    if(!getDuildId && discordInviteInfo.value.guildId && discordInviteInfo.value.inviteCode == inviteCode) {
        return;
    }
    getInviteGuildInfo({
        inviteCode
    }).then(res => {
        let resData = inviteGuildResHandler(res, {inviteCode, inviteUrl});
        if(resData.data.guildId) {
            cb && cb(resData);
        } else {
            //DISCORD 接口未获取到服务器信息 resdata
            Report.reportLog({
                pageSource: Report.pageSource.publisherDialog,
                businessType: Report.businessType.buttonClick,
                objectType: Report.objectType.getDiscordGuildNoData
            }, {
                resData: resData
            });
            getGuildInfoByOpenApi({inviteCode}, cb);
        }
    }).catch((err) => {
        //DISCORD 接口 catch 
        Report.reportLog({
            pageSource: Report.pageSource.publisherDialog,
            businessType: Report.businessType.buttonClick,
            objectType: Report.objectType.getDiscordGuildCatch
        }, {
            err: err
        });

        let errMsg = err;
        if(typeof errMsg == 'object') {
            errMsg = JSON.stringify(err);
        }
        if(errMsg.indexOf('code 404') > -1) {
            discordInviteInfo.value = {};
            iptErrMsgTxt.value = discordIptErrTxt;
        } else {
            getGuildInfoByOpenApi({inviteCode}, cb);

        }
    });
}

const getGuildInfoByOpenApi = (params, cb) => {
    let { inviteCode } = params;

    getInviteGuildInfoByOpenApi({
        inviteCode
    }).then(res => {
        let resData = inviteGuildResHandler(res, {inviteCode, inviteUrl});
        if(resData.data.guildId) {
            cb && cb(resData);
        } else {
            //OPENAPI 接口未获取到服务器信息 resdata
            Report.reportLog({
                pageSource: Report.pageSource.publisherDialog,
                businessType: Report.businessType.buttonClick,
                objectType: Report.objectType.getDiscordGuildOpenApiNoData
            }, {
                resData: resData
            });
        }
    }).catch((err) => {
        // OPENAPI 接口 catch 限频
        Report.reportLog({
            pageSource: Report.pageSource.publisherDialog,
            businessType: Report.businessType.buttonClick,
            objectType: Report.objectType.getDiscordGuildOpenApiCatch
        }, {
            err: err
        });
        if(iptErrMsgTxt.value && iptErrType == 'discord') {
            iptErrMsgTxt.value = '';
            iptErrType = '';
        }
    });
}

const inviteGuildResHandler = (res, params) => {
    let {inviteCode, inviteUrl} = params;
    if(!res) {
        res = {};
    }
    let {name, icon, id} = res.guild || {};

    icon = icon && id ? `https://cdn.discordapp.com/icons/${id}/${icon}.png` : '';
    let resData = {
        inviteCode,
        data: {
            code: res.code,
            guildId: id,
            inviteUrl,
            inviteCode,
            expires: res.expires_at,
            name,
            icon,
        }
    }
    if(res.code == inviteCode) {
         discordInviteInfo.value = resData.data;
    } else {
        discordInviteInfo.value = {};
        iptErrMsgTxt.value = discordIptErrTxt;
    }
    return resData;
};

/**
 * 获取支付配置（paypalClientId）
 */
const setPayConfig = () => {
    getPayConfig({
        params: {},
    }).then((res) => {
        if (res.code == 0) {
            payConfig.value = res.data;
            paypalClientId.value = res.data.paypalClientId;
        }
    });
};

/**
 * 获取配置
 */
const setFrontConfig = () => {
    getFrontConfig({
        params: {},
    }).then((res) => {
        if (res.code == 0) {
            paypalHtml.value = res.data.paypalHtml;
        }
    });
};

const goTransactionsList = () => {
    window.open(`${chrome.runtime.getURL('/iframe/home.html#/transactions')}`)
}


/**
 * 默认获取上次选中的货币信息
 */
const getLocalCurrencyInfoByCode = () => {
    if(!currentCurrencyInfo.value.currencyCode) {
        getCurrencyInfo();
    }
}

const getCurrencyInfo = async (_params) => {
    let { loop = false} = _params || {};
    let {accessToken = ''} = await getChromeStorage('userInfo') || {};
    if (accessToken) {
        getChromeStorage('selectCurrencyInfo', (res) => {
            if(res && res.currencyCode) {
                getCurrencyInfoByCode({
                    params: {
                        currencyCode: res.currencyCode
                    }
                }).then(res => {
                    if(res.code == 0 && res.data) {
                        currentCurrencyInfo.value = res.data;
                        tempCurrentCurrencyInfo.value = res.data;
                        if(!loop) {
                            onIptSetErrorTxt();
                        }
                    }
                });
            }
        })

        getChromeStorage('selectCurrencyList', (res) => {
            if (showCurrencySelect.value === false) {
                tempCurrentCurrencyList.value = res;
            }
        })
    }
}

onMounted(() => {
    setFrontConfig();
    setPayConfig();
    getLocalCurrencyInfoByCode();
    document.onkeydown = function (e) {
        var keyNum = window.event ? e.keyCode : e.which;
        let escKey = 27;
        if (keyNum == escKey) {
            if (visible.value) {
                // close();
            }
        }
    };
    window.addEventListener('resize', function () {
        setDialogHeight(true);
    })
});
</script>

<style lang="scss" scoped>
.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;

    .content {
        height: 620px;
        background: #ffffff;
        border-radius: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        z-index: 2000;

        .pop-mask {
            width: 100%;
            height:100%;    
            position: absolute;
            z-index:900;
        }

        .head {
            border-bottom: 1px solid #ececec;
            height: 48px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 14px;

            .left {
                display: flex;
                align-items: center;
                .title {
                    font-size: 16px;
                    font-weight: 500;
                }

                .close-btn {
                    display: flex;
                    align-items: center;
                    width: max-content;
                    margin-right: 12px;
                    cursor: pointer;
                }
            }

            .right {
                .more {
                    cursor: pointer;
                }

                .area-option {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 111;

                    .option {
                        position: absolute;
                        top: 43px;
                        right: 15px;
                        background: #fff;
                        filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.2));
                        width: 240px;
                        border-radius: 15px;
                        overflow: hidden;

                        .item {
                            width: 100%;
                            height: 50px;
                            display: flex;
                            align-items: center;
                            cursor: pointer;
                            border-top: 1px solid #E9E9E9;

                            img {
                                margin-left: 15px;
                                width: 30px;
                                height: 30px;
                                margin-right: 6px;
                            }

                            span {
                                font-weight: 500;
                                font-size: 14px;
                            }
                        }

                        .item:first-child {
                            border-top: 0;
                        }

                        .item:hover {
                                background: #F5F5F5;
                        }
                    }
                }
            }
        }

        .body {
            box-sizing: border-box;
            height: calc(100% - 48px);
            display: flex;
            position: relative;

            .icon-guide-select {
                width: 40px;
                position: absolute;
                top: 78px;
                left: 25px;
                z-index: 1000;
            }

            .body-content {
                display:flex;
                width:100%;
            }

            .currency-pop {
                position: absolute;
                width: 375px;
                height: 480px;
                top: 85px;
                left: 88px;
                z-index: 1000;
                box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
                background-color: #fff;
                border-radius: 20px;
                overflow-y: auto;
            }
            
            .currency-pop-select {
                position: absolute;
                width: 375px;
                max-height: 480px;
                top: 85px;
                left: 88px;
                z-index: 1000;
                box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
                background-color: #fff;
                border-radius: 20px;
                overflow-y: scroll;
            }

            .left,
            .right {
                height: 100%;
            }

            .left {
                width: 50px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;

                .gift-pack-wrapper {
                    width: 100%;
                    height: 55px;
                    background: #f5f5f5;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .bottom {
                    .icon {
                        display: block;
                        margin-bottom: 26px;
                    }
                }
            }

            .right {
                width: calc(100% - 50px);
                box-sizing: border-box;
                position: relative;
                border-left: 1px solid #ececec;

                .form-wrapper {
                    padding: 0px 18px 18px 18px;
                    height: calc(100% - 80px);
                    overflow-y: auto;
                    overflow-x: hidden;
                    box-sizing: border-box;

                    .img-mode {
                        margin-left: -18px;
                    }

                    .form-base-help {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 10px;

                        .currency-operation:before{
                            box-sizing: content-box;
                            width: 0px;
                            height: 0px;
                            position: absolute;
                            top: -16px;;
                            left:46px;
                            padding:0;
                            border-bottom:8px solid #FFFFFF;
                            border-top:8px solid transparent;
                            border-left:8px solid transparent;
                            border-right:8px solid transparent;
                            display: block;
                            content:'';
                            z-index: 12;
                        }
                        .currency-operation:after{
                            box-sizing: content-box;
                            width: 0px;
                            height: 0px;
                            position: absolute;
                            top: -18px;;
                            left:45px;
                            padding:0;
                            border-bottom:9px solid #EAEAEA;
                            border-top:9px solid transparent;
                            border-left:9px solid transparent;
                            border-right:9px solid transparent;
                            display: block;
                            content:'';
                            z-index:10
                        }
                        .currency-operation {
                            position: relative;
                            height: 36px;
                            border: 1px solid #EAEAEA;
                            box-sizing: border-box;
                            padding: 10px;
                            display: flex;
                            align-items: center;
                            border-radius: 100px;

                            .balance,
                            .amount {
                                display: flex;
                                align-items: center;
                            }

                            .balance {
                                font-weight: 400;
                                font-size: 13px;
                                img {
                                    width: 16px;
                                    height: 16px;
                                    margin-right: 3px;
                                }
                            }

                            .amount {
                                font-weight: 500;
                                font-size: 13px;
                                color: #4e4e4e;
                                margin-left: 5px;
                                img {
                                    margin-left: 5px;
                                    cursor: pointer;
                                }
                            }

                            .top-up {
                                font-weight: 500;
                                font-size: 12px;
                                color: #ff9839;
                                cursor: pointer;
                                margin-left: 8px;
                            }
                        }

                        .msg {
                            font-weight: 400;
                            font-size: 12px;
                            color: #acacac;
                        }
                    }

                    .form-base {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: 14px;

                        .item {
                            width: 250px;
                            height: 50px;
                            box-sizing: border-box;
                            border-radius: 14px;
                            border: 1px solid #D1D9DD;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 16px 14px;

                            input {
                                width: 102px;
                                text-align: right;
                                font-weight: 500;
                                font-size: 18px;
                                border: none;
                                outline: none;
                                box-sizing: border-box;
                            }

                            input::placeholder {
                                color: #c5c5c5;
                            }

                            .label {
                                font-weight: 500;
                                font-size: 15px;
                                display: flex;
                                align-items: center;

                                .icon {
                                    width: 20px;
                                    height: 20px;
                                    margin-right: 8px;
                                }
                            }
                        }

                        .item:first-child {
                            margin-right: 14px
                        }

                        .currency-select-wrapper {
                            padding: 0 !important;
                            input {
                                padding-right: 14px;
                            }
                            .currency-select {
                                max-width: 136px;
                                cursor: pointer;
                                background: #1D9BF0;
                                margin-left: 6px;
                                padding: 6px 10px;
                                border-radius: 12px;
                                color: #fff;
                                .text {
                                    white-space: nowrap;
                                    zoom: 0.85;
                                }
                                .arrow {
                                    margin-left: 5px;
                                }
                            }
                            .selected {
                                background: #F4F4F4 !important;
                                color: #000 !important;
                            }
                        }
                    }

                    .form-label {
                        margin-top: 14px;
                        margin-bottom: 10px;
                        font-weight: 500;
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .icon-add-task {
                            cursor: pointer;
                        }
                    }

                    .form-require {
                        box-sizing: border-box;
                        border-radius: 15px;
                        margin-top: 12px;
                        border: 1px solid #D1D9DD;

                        .form-item {
                            min-height: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            margin: 0 16px;
                            border-bottom: 1px solid #ececec;
                            padding: 8px 0;
                            box-sizing: border-box;
                            
                            .item-left {
                                display: flex;
                            }

                            .label {
                                min-width: 76px;
                                display: flex;
                                align-items: center;
                                font-size: 15px;
                                font-weight: 500;

                                .icon {
                                    margin-right: 10px;
                                }
                            }

                            .control {
                                min-width: 258px;
                                margin-left: 18px;
                                box-sizing: border-box;
                                border-left: 1px solid #ECECEC;
                                position: relative;

                                .discord-address {
                                    border: none;
                                    outline: none;
                                    color: #1D9BF0;
                                    font-weight: 500;
                                    font-size: 14px;
                                    width: 100%;
                                    height: 34px;
                                    padding-left: 15px;
                                }
                                .discord-address::placeholder {
                                    color: #c5c5c5;
                                }

                                .discord-invite-info {
                                    position: absolute;
                                    top: 40px;
                                    left: 0;
                                    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
                                    background: #fff;
                                    border-radius: 16px;
                                    padding: 16px;
                                    box-sizing: border-box;
                                    display: flex;
                                    align-items: center;
                                    cursor: pointer;

                                    .icon {
                                        width: 40px;
                                        height: 40px;
                                        margin-right: 10px;
                                        border-radius: 50%;
                                    }
                                    .name  {
                                        font-weight: 600;
                                        font-size: 16px;
                                        color: #101419;
                                        width: 193px;
                                        height: 20px;
                                        overflow: hidden;
                                        white-space: nowrap;
                                        text-overflow: ellipsis;
                                        display: inline-block;
                                    }
                                }
                            }

                            .icon-task-close {
                                margin-left: 6px;
                                cursor: pointer;
                            }
                        }
                        .border-hide {
                            border-bottom: none !important;
                        }
                    }
                }

                .anti-bot-wrapper {
                    width: 100%;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    box-sizing: border-box;
                    border-radius: 15px;
                    padding: 0 18px;
                    margin-top: 14px;
                    border: 1px solid #D1D9DD;

                    .label {
                        display: flex;
                        align-items: center;
                        font-size: 15px;
                        font-weight: 500;

                        .icon-bot {
                            margin-right: 8px;
                        }

                        .icon-beta {
                            margin-left: 5px;
                            margin-right: 8px;
                        }

                        .icon-question {
                            cursor: pointer;
                        }
                    }
                }

                .tips-wrapper {
                    margin: 16px 0 0 12px !important;
                    padding: 0px !important;
                    .title,
                    .row {
                        font-weight: 400;
                        font-size: 12px;
                        color: #A39F9F;
                    }

                    .row {
                        box-sizing: border-box;
                        line-height: 16px;
                    }

                    .more {
                        color: #1D9BF0;
                        font-size: 13px;
                        padding-left: 4px;
                        cursor: pointer;
                    }
                }

                .submit-btn-wrapper {
                    width: 100%;
                    background: #fff;
                    position: absolute;
                    bottom: 18px;
                    left: 0;
                    box-sizing: border-box;
                    padding: 16px 18px 0 18px;

                    .submit-btn {
                        width: 100%;
                        height: 46px;
                        text-align: center;
                        background: #4a99e9;
                        border-radius: 100px;
                        color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 16px;
                        font-weight: 500;
                        cursor: pointer;

                        .icon-loading {
                            width: 20px;
                            height: 20px;
                            margin-right: 3px;
                        }
                    }

                    .disabled-submit {
                        background-color: #D9D9D9; 
                    }
                }
            }
            .fill-right {
                width: 100% !important;
                border-bottom-left-radius: 16px;
            }
        }
    }
}

.preview {
    padding: 30px 40px;
    .card {
        float: left;
        position: relative;
        .flash {
            overflow: hidden;
            height: 460px;
            border-radius: 26px;
            border: solid 1px #ECECEC;
        }
        &.center {
            margin-left: 50%;
            transform: translateX(-50%);
        }
    }
    .card-title {
        height: 32px;
        .img {
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }
        .font {
            float: left;
            font-size: 17px;
            font-weight: 500;
            span {
                color: #0091e9;
            }
        }
    }
    .card-content {
        float: right;
        width: 430px;
    }
    .card-amount {
        overflow: hidden;
        display: flex;
        height: 80px;
        padding: 20px;
        border-radius: 20px;
        border: 1px solid #E6E6E6;
        .icon {
            width: 40px;
            height: 40px;
        }
        .con {
            flex: 1;
            padding: 0 10px;
            .desc {
                color: rgba($color: #000000, $alpha: 0.5);
                font-size: 12px;
                margin-bottom: 4px;
            }
            .price {
                font-size: 16px;
                font-weight: bold;
            }
        }
        .refresh {
            cursor: pointer;
            width: 50px;
            height: 50px;
            margin-top: -5px;
        }
    }
    .card-list {
        padding: 20px;
        border-radius: 20px;
        border: 1px solid #E6E6E6;
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 47px;
            font-size: 14px;
            font-weight: 500;
            box-shadow: inset 0px -1px 0px #EAEAEA;
        }
    }
}

.icon-refresh-rotate {
    transform: rotate(360deg);
    transition-duration: 1s;
}

.payment {
    .balance {
        display: flex;
        margin-right: 20px;
        .icon {
            width: 40px;
            height: 40px;
        }
        .con {
            padding: 0 5px;
            .desc {
                color: rgba($color: #000000, $alpha: 0.5);
                font-size: 12px;
                margin-bottom: 4px;
            }
            .price {
                font-size: 14px;
                font-weight: bold;
            }
        }
        .refresh {
            width: 40px;
            cursor: pointer;
            margin-left: -5px;
        }
    }
}
</style>