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

<template>
    <div class="overlay" v-if="visible">
        <div class="content"
            :style="{
                height: showComType === 'preview' ? 'calc(100vh - 40px)' : dialogStyle.dialogHeight + 'px',
                width: dialogStyle.dialogContentWidth + 'px',
            }">
            <div class="pop-mask"
                v-show="showCurrencyPop || showCurrencySelect"
                @click.stop="showCurrencyPop = false; showCurrencySelect=false">
            </div>
            
            <!-- head -->
            <give-dialog-head  
                :title="publishType == 'REDPACKET' ? currentComData[showComType]['title'] : 'Tool Box'"
                :publishType="publishType" 
                :showComType="showComType"
                :toolBoxPageData="toolBoxPageData"
                @close="close"></give-dialog-head>

            <!-- 内容 -->
            <div class="body">
                <!-- 充值组件 -->
                <top-up
                    v-if="showComType == 'topUp'" 
                    :currentCurrencyInfo="tempCurrentCurrencyInfo"
                    @topUpDone="topUpDone">
                </top-up>

                <!-- 自定义红包封面 -->
                <giveaway-poster
                    v-else-if="showComType == 'poster'"
                    :baseFormData="baseFormData"
                    :currentCurrencyInfo="currentCurrencyInfo"
                    :customPosterInfo="customPosterInfo"
                    @selectImage="selectImage"
                    @confirmData="confirmData">
                </giveaway-poster>

                <!-- 表单填写容器 -->
                <div class="body-content" v-else>

                    <!-- 货币列表  -->
                    <div class="currency-pop" v-show="showCurrencyPop">
                        <currency-list 
                            ref="currencyListDom"
                            :showGeneralLottery="true"
                            @selectCurrency="selectCurrency"
                            @setCurrencyList="setCurrentCurrencyInfo"
                            @addGeneralLottery="addCustomizedRewardHandle"></currency-list>
                    </div>
                    <!-- 通用奖品编辑弹窗 -->
                    <div class="customized-reward-edit-popup" v-if="showCustomizedRewardEditPopup">
                        <customized-reward-edit-popup
                            ref="rewardEditDom"
                            :customizedReward="baseFormData.customizedReward"
                            :rewardType="baseFormData.rewardType"
                            @closeRewardPopup="closeRewardPopup"
                            @removeReward="removeReward"
                            @submitReward="submitReward"></customized-reward-edit-popup>
                    </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' && toolBoxPageData.activePage != 'PREVIEW'">
                        <div class="tab-item" 
                            :class="{'active-tab': item.type == publishType}"
                            v-for="(item, index) in leftTabList" 
                            :key="index"
                            @click="clickLeftTab(item, index)"
                            >
                            <img class="icon" :src="item.icon"/>
                        </div>
                    </div>

                    <div class="right"  
                        :class="{'fill-right': showComType == 'preview' || toolBoxPageData.activePage == 'PREVIEW'}">
                        <global-tip :type="'2'"></global-tip>

                        
                        <template v-if="publishType == 'TOOL_BOX'">
                            <tool-box 
                                :pageData="{
                                    'linkInputDescImage': toolBoxPageData.postEditorLinkInputDescImage,
                                    'defaultLinkTitle': toolBoxPageData.postEditorDefaultLinkTitle
                                }"
                                :activePage="toolBoxPageData.activePage" @onPageChange="onToolBoxPageChange"
                                @toolBoxPublishFinish="toolBoxPublishFinish"></tool-box>
                        </template>
                        <template v-else>
                        <div class="form-wrapper"  v-if="showComType == 'default'">
                            <div class="form-cell-item base-form-wrapper">
                                <div class="title">
                                    <img class="icon" :src="require('@/assets/svg/icon-reward-v2.svg')"/>
                                    Reward
                                </div>
                                <div class="form-cell-content">
                                    <div class="select-mode-ele">
                                        <img v-for="(item, index) in publishModeList" 
                                            :key="index" 
                                            :src="selectModeInfo.index == index ? item.imgActive : item.imgInActive"
                                            @click="selectPublishMode(item, index)">
                                    </div>
                                    <!-- 金额、数量 -->
                                    <div class="form-base">
                                        <div class="item currency-select-wrapper">
                                            <div>
                                                <div class="label currency-select"
                                                    :class="{'selected': currencySelectCpd}"
                                                    @click="selectCurrencyPopHandle">
                                                    <img class="icon"
                                                        v-if="currentIconCpd"
                                                        :src="currentIconCpd"/>
                                                    <div class="text">
                                                        {{currentPrizeCpd}}
                                                    </div>
                                                    <img class="arrow"
                                                        :src="currentArrowCpd"/>
                                                </div>

                                                <!-- 刷新按钮、充值 -->
                                                <div class="currency-operation"
                                                    v-if="currentCurrencyInfo.currencyCode">
                                                    <div class="amount">
                                                        Balance：
                                                        <a-tooltip :title="currentCurrencyInfo.balance">
                                                            {{ getBit(currentCurrencyInfo.balance) }}
                                                        </a-tooltip>
                                                        <img :class="{ 'icon-refresh-rotate': refreshRotate }"
                                                            :src="require('@/assets/svg/icon-form-refresh.svg')"
                                                            @click="updateCurrencyBanlce"/>
                                                    </div>
                                                    <div v-if="currentCurrencyInfo.currencyCode != 'USD'" 
                                                        class="top-up" 
                                                        @click="goTopUp">Deposit</div>
                                                </div>
                                            </div>

                                            <input v-model="baseFormData.amountValue"
                                                    placeholder="0"
                                                    autofocus
                                                    @input="onAmountInput"
                                                    @blur="onAmountBlur"/>
                                        </div>
                                        <div class="item winners-count-input">
                                            <div>
                                                <div class="label">
                                                    <img class="icon"
                                                        :src="require('@/assets/svg/icon-winner-v2.svg')"/>
                                                    Winner Count
                                                </div>
                                                <div class="msg" v-show="selectModeInfo.type == PlayType.common">Recommend Winners 50～500</div>
                                            </div>
                                            <input v-model="baseFormData.totalCount"
                                                placeholder="0"
                                                :disabled="baseFormData.rewardType === RewardType.custom"
                                                @input="onCountInput"
                                                @blur="onCountBlur"/>
                                        </div>
                                        <div class="item automatically-input" v-if="selectModeInfo.type == PlayType.lottery">
                                            <div class="label">
                                                <img class="icon"
                                                    :src="require('@/assets/svg/icon-automatically.svg')"/>
                                                Automatically Draw in
                                            </div>
                                            <div class="input-wrapper">
                                                <input v-model="baseFormData.validityDuration"
                                                    placeholder="0"
                                                    @input="onValidityDurationInput"
                                                    @blur="onValidityDurationBlur"/>
                                                    <span class="unit">h</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="usd-min-message" v-show="isShowUsdMinMessage" v-html="checkUsdMinNumber('inTemplate')"></div>
                                    <div class="giveaway-poster" @click="customCoverImg">
                                        <div class="show-img">
                                            <div
                                                :style="{
                                                    'zoom': 55 / 500,
                                                    'position': 'absolute',
                                                    'width': '345px',
                                                }">
                                                <custom-card-cover
                                                    :data="{
                                                        totalCount: baseFormData.totalCount,
                                                        amountValue: baseFormData.amountValue,
                                                        tokenSymbol: currentCurrencyInfo.tokenSymbol,
                                                        currencyIconUrl: currentCurrencyInfo.iconPath,
                                                        type: baseFormData.type,
                                                        validityDuration: baseFormData.validityDuration,
                                                        customPosterUrl: customPosterData && customPosterData.after && customPosterData.after.imagePath || '',
                                                        rewardType: baseFormData.rewardType,
                                                        customizedReward: baseFormData.customizedReward
                                                    }">
                                                </custom-card-cover>
                                            </div>
                                        </div>
                                        <div class="show-font">
                                            <span>Giveaway Poster</span>
                                            <img class="new" v-if="customShowNewImage" :src=" require('@/assets/svg/img-new.svg') " />
                                        </div>
                                        <div class="show-placeholder">Replace</div>
                                        <div class="arrow">
                                            <img :src=" require('@/assets/svg/icon-cell-arrow-right.svg') " />
                                        </div>
                                    </div>
                                    <!--  提示 -->
                                    <ul class="tips-wrapper">
                                        <li class="row" style="white-space:nowrap;">
                                            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"  v-show="selectModeInfo.type == PlayType.common">
                                            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> 
                            </div>

                            <div class="form-cell-item task-wrapper">
                                <div class="title">
                                    <img class="icon" :src="require('@/assets/svg/icon-tasks-v2.svg')"/>
                                    Tasks
                                </div>
                                <div class="form-cell-content form-require">
                                    <!-- 转推、like、关注 -->
                                    <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>
                                                <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>
                                                <a-switch
                                                    v-if="item.type > 3"
                                                    v-model:checked="item.checked"
                                                    @change="formSwitchChange($event, item, index)"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="submit-btn-wrapper">
                                <div class="submit-btn"
                                    :class="{ 'disabled-submit': iptErrMsgTxt != ''}"
                                    @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'">
                            <preview-sheet :baseFormData="baseFormData"
                                :currentCurrencyInfo="currentCurrencyInfo"
                                :tempCurrentCurrencyInfo="tempCurrentCurrencyInfo"
                                :publishRes="publishRes"
                                :previewFontSize="previewFontSize"
                                :customPosterData="customPosterData"
                                :finalAmountData="finalAmountData"
                                @onTopUpDone="topUpDone"
                                @onUpdateCurrencyBanlce="updateCurrencyBanlce"></preview-sheet>
                        </template>

                        <!-- 支付按钮 -->
                        <div class="payment" v-show="showComType == 'preview'">
                            <pay-button
                                ref="payButtonDom"
                                v-if="isMoneyRewardCpd"
                                :finalAmountData="finalAmountData"
                                :payConfig="{
                                    feeDesc: payConfig.feeDesc,
                                    amount: baseFormData.amountValue,
                                    postId
                                }"
                                :currentCurrencyInfo="currentCurrencyInfo"
                                :USDepositStatus = "USDepositStatus"
                                @showDepositMask="showDepositMessageBox = true"
                                @payFinish="payFinish">
                                <template v-slot:balance>
                                    <div class="balance" v-if="Number(baseFormData.amountValue) <= Number(currentCurrencyInfo.balance) || currentCurrencyInfo.currencyCode == 'USD' ">
                                        <img class="icon" src="@/assets/subject/icon-balance.png" />
                                        <div class="con">
                                            <div class="desc">Balance</div>
                                            <div class="price">
                                                <template v-if="currentCurrencyInfo.currencyCode == 'USD'">
                                                    $
                                                </template>
                                                {{currentCurrencyInfo.balance}} 
                                                <template v-if="currentCurrencyInfo.currencyCode != 'USD'">
                                                    {{currentCurrencyInfo.tokenSymbol}}
                                                </template>
                                            </div>
                                        </div>
                                        <img class="refresh"
                                            :class="{ 'icon-refresh-rotate': refreshRotate }"
                                            :src=" require('@/assets/svg/icon-form-refresh.svg')"
                                            @click="updateCurrencyBanlce"/>
                                    </div>
                                </template>
                            </pay-button>
                            <div v-else class="btn-wrap" @click="payStatusHandle(1)"><div class="custom-submit">Confirm</div></div>
                        </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 提示 -->
        <message-box
            :dialogVisible="showMessageBox"
            :title="messageBoxData.title"
            :content="messageBoxData.content"
            cancelTxt="Not yet"
            confirmTxt="Deposit"
            @cancel="messageBoxCancel"
            @confirm="messageBoxConfirm"></message-box>

        <!-- 预览页充值 -->
        <message-box
            :dialogVisible="showDepositMessageBox"
            title="Is the Deposit Completed?"
            @cancel="depositAchCancel"
            @confirm="depositAchConfirm"></message-box>

        <!-- 裁剪 -->
        <div class="dialog" v-if="cropperDialog">
            <div class="corp-title">
                <img class="back" :src="require('@/assets/svg/icon-back.svg')" @click="hiddenDialog" />
                <span>Crop</span>
            </div>
            <div class="corp-content">
                <vue-cropper
                    ref="refCropper"
                    :img="cropperOption.img"
                    :output-type="cropperOption.outputType"
                    :infoTrue="cropperOption.infoTrue"
                    :full="cropperOption.full"
                    :fixed="cropperOption.fixed"
                    :fixed-number="cropperOption.fixedNumber"
                    :auto-crop="cropperOption.autoCrop"
                    :auto-crop-width="cropperOption.autoCropWidth"
                    :auto-crop-height="cropperOption.autoCropHeight"
                    :center-box="cropperOption.centerBox"
                    :high="cropperOption.high"
                    :max-img-size="cropperOption.max">
                </vue-cropper>
            </div>
            <div class="corp-footer">
                <button v-if="cropperLoading" class="confirm disable">
                    <img :src=" require('@/assets/svg/icon-btn-loading.svg') " />
                    <span>Confirm</span>
                </button>
                <button v-else class="confirm" @click="confirmImage">Confirm</button>
            </div>
        </div>
        <div class="dialog-mask" v-if="cropperDialog"></div>
    </div>
</template>

<script setup>
import { ref, watch, reactive, defineProps, defineEmits, onMounted, nextTick, provide, computed } from "vue";
import { postPublish, syncChainTokenRechargeRecord, getCurrencyInfoByCode } from "@/http/publishApi";
import { getInviteGuildInfo, getInviteGuildInfoByOpenApi, saveInviteGuildInfo } from "@/http/discordApi";
import { payCalcFee, getPayConfig } from "@/http/pay";
import { getFrontConfig, calcRechargePayAmount } from "@/http/account";
import { uploadSignature, uploadFile } from '@/http/media';
import {setChromeStorage, getChromeStorage} from "@/uilts/chromeExtension"
import { debounce, getBit } from "@/uilts/help"
import { PlayType, RewardType, TaskType } from '@/types';
import Report from "@/log-center/log"
import { ElMessage, ElLoading } from "element-plus";
import "element-plus/es/components/message/style/css";
import "element-plus/es/components/loading/style/css";
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";
import {create, all} from "mathjs";
import { message } from 'ant-design-vue';

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 followInput from "@/view/iframe/publish/components/follow-input";
import payButton from "@/view/iframe/publish/components/pay-button";
import topUp from "@/view/iframe/publish/components/top-up.vue";
import toolBox from '@/view/iframe/publish/tool-box/index.vue'
import giveawayPoster from '@/view/iframe/publish/components/giveaway-poster.vue';
import giveDialogHead from "@/view/iframe/publish/components/give-dialog-head";
import previewSheet from "@/view/iframe/publish/components/preview-sheet.vue";
import GlobalTip from '@/view/components/global-tip.vue'
import customCardCover from '@/view/components/custom-card-cover.vue'

import CustomizedRewardEditPopup from '@/view/iframe/publish/components/customized-reward-edit';

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

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

let payConfig = ref({});
let timer = ref(null);

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

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


//弹窗高度
let dialogStyle = reactive({
    dialogHeight: 670,
    dialogContentWidth: 1100
})

let USDepositStatus = ref('DEFAULT');

let cropperOption = ref({
    img: '',
    full: true,
    infoTrue: true,
    fixed: true,
    fixedNumber: [16, 8.396],
    outputType: 'png',
    autoCrop: true,
    autoCropWidth: 99999,
    autoCropHeight: 99999,
    centerBox: true,
    high: true,
    max: 99999,
})
let cropperDialog = ref(false)
let cropperLoading = ref(false)
let cropperType = ref('before')
let customPosterInfo = ref({})
let customPosterData = ref({})
let customShowNewImage = ref(false)
let refCropper = ref('')

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

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

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

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

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

// usd最小金额限制提示展示
let isShowUsdMinMessage = ref(false);

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

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

let showDepositMessageBox = ref(false);

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

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

let payButtonDom = ref(null);

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

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

let postId = ref('');

let selectModeInfo = reactive({
    index: 0,
    type: PlayType.lottery // 1: 红包 2: 抽奖
})

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

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

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

// 表单数据
let baseFormData = reactive({
    amountCurrencyCode: "",
    amountValue: "",
    totalCount: "",
    validityDuration: "",
    type: selectModeInfo.type,
    rewardType: RewardType.money,
    customizedReward: ""
});

const defaultCurrentCurrencyInfo = {
    currencyCode: "",
    currencyName: "",
    balance: "",
    currencyType: "",
    iconPath: "",
    minAmount: "",
    tokenChain: "",
    tokenSymbol: "",
    usdEstimateBalance: ""
}

// 当前选择的货币信息
let currentCurrencyInfo = ref(defaultCurrentCurrencyInfo);

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: TaskType.twitterFollow,
        text: [],
        checked: true,
        show: true
    },
    {
        label: "Retweet & Like",
        icon: require("@/assets/svg/icon-task-twitter.svg"),
        nodeType: "div",
        type: TaskType.twitterRetweet,
        checked: true,
        show: true
    },
    {
        label: "Like Tweet",
        icon: require("@/assets/svg/icon-task-twitter.svg"),
        nodeType: "div",
        type: TaskType.twitterLikeTweet,
        checked: true,
        show: false
    },
    {
        label: "Comment and Tag 3 friends",
        icon: require("@/assets/svg/icon-task-twitter.svg"),
        nodeType: "div",
        type: TaskType.twitterCommentAndTag,
        checked: true,
        show: true
    },
    {
        label: "Repost to Facebook",
        icon: require("@/assets/svg/icon-task-facebook.svg"),
        nodeType: "div",
        text: '',
        type: TaskType.repostToFacebook,
        checked: false,
        show: true
    },
    {
        label: "Join Discord",
        icon: require("@/assets/svg/icon-discord-mini.svg"),
        nodeType: "input",
        text: '',
        type: TaskType.joinDiscord,
        checked: false,
        show: true
    },
]);

let publishModeList = reactive([
    {
        imgActive: require("@/assets/svg/img-A1.svg"),
        imgInActive: require("@/assets/svg/img-A0.svg"),
        type: PlayType.lottery
    },
    {
        imgActive: require("@/assets/svg/img-B1.svg"),
        imgInActive: require("@/assets/svg/img-B0.svg"),
        type: PlayType.common
    }
])

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

let lotteryMaxHourDuration = 168;

let leftTabList = reactive([
    {
        icon: require('@/assets/svg/icon-gift-pack.svg'),
        type: 'REDPACKET'
    },
    {
        icon: require('@/assets/svg/icon-tool-box-02.svg'),
        type: 'TOOL_BOX'
    }
])

let toolBoxPageData = reactive({
    activePage: 'EDITOR', //EDITOR PREVIEW
    postEditorLinkInputDescImage: '',
    postEditorDefaultLinkTitle: ''
})


const props = defineProps({
    dialogData: {
        type: Object,
        default: () => {
            return {
                visible: false,
                type: 'REDPACKET'
            }
        },
    },
});

//selected prize icon cpd
let currentIconCpd = computed(() => {
    if(baseFormData.rewardType === RewardType.custom) {
        return require("@/assets/svg/icon-gift.svg");
    } else {
        return currentCurrencyInfo.value.iconPath;
    } 
})

// selected prize cpd
let currentPrizeCpd = computed(() => {
    const {currencyCode, tokenSymbol} = currentCurrencyInfo.value
    if(baseFormData.rewardType === RewardType.custom) {
        return baseFormData.customizedReward;
    } else if(currencyCode == "USD") {
        return "USD";
    } else {
        return tokenSymbol || "Select a reward";
    }
})

let currencySelectCpd = computed(() => {
    return baseFormData.customizedReward || currentCurrencyInfo.value.currencyCode;
})

let currentArrowCpd = computed(() => {
    if(baseFormData.rewardType === RewardType.custom) {
        return require("@/assets/svg/icon-cell-arrow-right.svg");
    } else {
        return currentCurrencyInfo.value.currencyCode ? require("@/assets/svg/icon-form-arrow-down.svg") :  require("@/assets/svg/icon-form-white-arrow-down.svg");
    }
})

let isMoneyRewardCpd =computed(() => baseFormData.rewardType === RewardType.money);

watch(
    () => props.dialogData,
    (newVal) => {
        visible.value = newVal.visible;
        USDepositStatus.value = "DEFAULT"

        if (newVal.visible) {
            publishType.value = newVal.type;
            Report.reportLog({
                pageSource: Report.pageSource.publisherDialog,
                businessType: Report.businessType.pageView,
            });
            getLocalCurrencyInfoByCode();
            setTimeout(() => {
                setDialogStyle();
            }, 300);

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

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

const close = () => {
    USDepositStatus.value = "DEFAULT"
    if(publishType.value == 'TOOL_BOX') {
        closeToolBoxPage()
    } else {
        if (showComType.value != "default") {
            showComType.value = "default";
            isBack.value = true;
        } else {
            initParams();
            emits("close", false);
        }
    }
};

const closeToolBoxPage = () => {
    if(toolBoxPageData.activePage == "EDITOR") {
        emits("close", false);
    } else if(toolBoxPageData.activePage == "PREVIEW") {
        toolBoxPageData.activePage = "EDITOR";
    }
};

/**
 * 设置弹窗高度
 */
const setDialogStyle = (resize = false) => {
    nextTick(() => {
        let clientHeight = window.innerHeight;
        let clientWidth = window.innerWidth;

        let gapSafe = 40;

        if (dialogStyle.dialogHeight > clientHeight - gapSafe) {
            dialogStyle.dialogHeight = clientHeight - gapSafe;
        } else {
            if(resize) {
                dialogStyle.dialogHeight = 720;
            }
        }

        if(dialogStyle.dialogContentWidth  > clientWidth - gapSafe) {
            dialogStyle.dialogContentWidth = clientWidth - gapSafe;
        } else {
            if(resize) {
                dialogStyle.dialogContentWidth = 1080;
            }
        }
    })
};

const selectCurrencyPopHandle = () => {
    Report.reportLog({
        pageSource: Report.pageSource.currencySelectorPage,
        businessType: Report.businessType.pageView,
    });
    if(baseFormData.rewardType === RewardType.custom) {
        showCustomizedRewardEditPopup.value = true
    } else {
        showCurrencyPop.value = true;
        nextTick(() => {
            if(currencyListDom.value) {
                currencyListDom.value.getCurrencyInfoList && currencyListDom.value.getCurrencyInfoList({pageNum: 1});
            }
        })
    }
}

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 (submitIng.value || iptErrMsgTxt.value) {
        return;
    }
    let { totalCount = 0 } = baseFormData;
    if (!totalCount) {
        return;
    }
    saveDiscordGuildInfo();
    submitRequest();
};

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

const selectCurrencyAfter = (params, openWindow = true) => {
    tempCurrentCurrencyInfo.value = params;
    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;
        resetFormIpt(false);
        onIptSetErrorTxt();
    }
    baseFormData.customizedReward = "";
    baseFormData.rewardType = RewardType.money;
}

const resetFormIpt = (clearMode = true) => {
    baseFormData.amountValue = "";
    baseFormData.totalCount = "";
    baseFormData.validityDuration = "";
    baseFormData.rewardType = RewardType.money;
    baseFormData.customizedReward = "";

    if(clearMode) {
        selectModeInfo.index = 0;
        selectModeInfo.type = publishModeList[selectModeInfo.index]['type'];
        baseFormData.type = selectModeInfo.type;
    }
}

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;
    resetFormIpt(false);
    onIptSetErrorTxt();
};

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

/*
 * 自定义封面
 */
const customCoverImg = () => {
    customPosterInfo.value = {}
    if (Object.keys(customPosterData.value).length > 0) {
        customPosterInfo.value = customPosterData.value;
    }
    showComType.value = 'poster';
    customShowNewImage.value = false;
    setChromeStorage({ custom_poster_guide: Date.now() });
}

/**
 * 充值done事件
 */
const topUpDone = () => {
    currentCurrencyInfo.value = tempCurrentCurrencyInfo.value;
    showCurrencyPop.value = false;
    showCurrencySelect.value = false;
    showComType.value = 'default';
    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 = async () => {
    if(!refreshRotate.value) {
        refreshRotate.value = true;
        setTimeout(() => {
            refreshRotate.value = false;
        }, 1000)
    }
    if(currentCurrencyInfo.value.currencyCode == 'USD') {
        let currencyInfoRes = await getCurrencyByCode({currencyCode: currentCurrencyInfo.value.currencyCode});

        calcRechPayAmount({
            currencyCode: currentCurrencyInfo.value.currencyCode,
            orderAmountValue: baseFormData.amountValue,
            payChannel: 'ach'
        });

        if(currencyInfoRes.code == 0 && currencyInfoRes.data) {
            currentCurrencyInfo.value = currencyInfoRes.data;
        }
    } else {
        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) => {
    if(asyncIng.value) {
        return;
    }
    asyncIng.value = true;
    syncChainTokenRechargeRecord({
        params: {
            currencyCode: currentCurrencyInfo.value.currencyCode
        }
    }).then(res => {
        asyncIng.value = false;
        cb && cb(res)
    }).catch((err) => {
        asyncIng.value = false;
    })
}

/**
 * 提交表单请求
 */
const submitRequest = async () => {
    let {   
            amountValue = 0,
            totalCount = 0,
            rewardType = RewardType.money,
            customizedReward = "" 
        } = 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 == TaskType.twitterFollow && atUserList.value.length) {
            // follow 参数
            let relatedUsers = atUserList.value.filter(item => item.name);
            item.relatedUsers = relatedUsers;
            finishConditions.push(item);
        } else  if (formList[i]["type"] == TaskType.joinDiscord) {
            // 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 validityDuration = '';
    if(baseFormData.type == PlayType.lottery) {
        //小时转毫秒
        let unit = process.env.NODE_ENV != 'production' ? 60 * 1000 : 60 * 60 * 1000;
        // let unit = 60 * 60 * 1000
        validityDuration = baseFormData.validityDuration * unit;
    } else {
        validityDuration = '';
    }

    // 提交参数
    let formData = {
        amountValue,
        totalCount,
        finishConditions,
        receiveConditions,
        type: baseFormData.type,
        posterType: 1,
        validityDuration,
        rewardType
    };
    if(rewardType === RewardType.custom) {
        // 通用奖品 类型的活动，添加奖品名称
        formData.customizedReward = customizedReward;
        delete formData.amountValue;
    } else {
        // 货币类型 添加货币code
        formData.amountCurrencyCode = baseFormData.amountCurrencyCode;
        formData.payAmountValue = baseFormData.payAmountValue;
    }
    submitIng.value = true;

    // 自定义封面
    if (Object.keys(customPosterData.value).length > 0) {
        formData['posterType'] = 2;
        if (customPosterData.value && customPosterData.value.after) {
            formData['customPosterInstalled'] = customPosterData.value.after.objectKey || ''
        }
        if (customPosterData.value && customPosterData.value.before) {
            formData['customPosterUninstalled'] = customPosterData.value.before.objectKey || ''
        }
    }

    // 法币支付需要计算费率
    if(formData.amountCurrencyCode == "USD") { 
        // 获取充值金额
        await calcRechPayAmount({
            currencyCode: currentCurrencyInfo.value.currencyCode,
            orderAmountValue: baseFormData.amountValue,
            payChannel: 'ach'
        });
    }
    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 = {};

    publishType.value = 'REDPACKET';

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

    discordInviteInfo.value = {};
    customPosterInfo.value = {};
    customPosterData.value = {};
};

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

const calcRechPayAmount = async (params) => {
    let res = await calcRechargePayAmount({
        params : params
    })

    if (res.code == 0) {
        let { feeDesc } = res.data;
        payConfig.value.feeDesc = feeDesc;
        finalAmountData.value = res.data;
    }
    return res.data;
}

/**
 * 支付完成回调
 */
const payFinish = (params) => {
    let {payStatus} = params;
    // 余额支付
    payStatusHandle(payStatus);
};

const payStatusHandle = (payStatus) => {
    //支付状态 0：未支付，1：支付成功，2：支付失败，3：已关闭，4：已退款
    switch (payStatus) {
        case 1:
            emits("postPublishFinish", { publishRes });
            showComType.value = "default";
            initParams();
            break;
        case 2:
            break;
        case 3:
            break;
        case 4:
            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');

    const maxCount = baseFormData.rewardType === RewardType.money ? Number.MAX_SAFE_INTEGER : 100000000;

    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];
        }
    }

    if (baseFormData.rewardType === RewardType.custom) {
        const maxCount = 100000000;
        val = val.replace(/^(0)*/, '').replace(/\./, ''); // 通用奖品类型 过滤掉起始位的0和小数点符号
        if (val > maxCount) { 
            val = maxCount
        }
        baseFormData.totalCount = val;
    }

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

    return val;
};

const onCountInput = () => {
    let val = baseFormData.totalCount;
    const maxCount = 100000000;

    if (val == 0) {
        val = "";
    }
    val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');

    if(val > maxCount) {
        val = maxCount
    } 

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

const onValidityDurationInput = () => {
    validityDurationHandler()
    let val = setInputErrorMsg();
    return val;
}

const onValidityDurationBlur = () => {
    validityDurationHandler();
    let val = setInputErrorMsg();
    return val;
}


const validityDurationHandler = () => {
    let val = baseFormData.validityDuration;
    if (val == 0) {
        val = "";
    } else if(val > lotteryMaxHourDuration) {
        val = lotteryMaxHourDuration+'';
    }
    val = val.replace(/[^\d]/g, "");
    baseFormData.validityDuration = val;

    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}`)))
    }
};

/**
 * usd最小金额判断
 * luckdropPostConfig.usdLimitEnable 当前选中的token是否开启usd最小金额判断
 */
const checkUsdMinNumber = (isInTemplate) => {
    let forbiddenText = '';
    const { usdPrice, luckdropPostConfig } = currentCurrencyInfo.value;
    if (baseFormData.rewardType === RewardType.money && luckdropPostConfig?.usdLimitEnable === 1) {
        const { amountValue, totalCount } = baseFormData;
        if (luckdropPostConfig?.minTotalUsdAmount === 0 || luckdropPostConfig?.minAvgUsdAmount === 0) {
            // 当前token允许的usd最小金额为0 或单个红包最小金额为0，则无限制
            return forbiddenText;
        } else {
            const isAmountForbidden = luckdropPostConfig?.minTotalUsdAmount ? math.format(math.evaluate(amountValue * usdPrice)) < luckdropPostConfig.minTotalUsdAmount : false;
            const isAvgForbidden = luckdropPostConfig?.minAvgUsdAmount ? math.format(math.evaluate(amountValue / totalCount * usdPrice)) < luckdropPostConfig.minAvgUsdAmount : false;
            forbiddenText = isAmountForbidden && isAvgForbidden ? 
                            `The prize pool must be above 
                            ${isInTemplate ? ('<span class="font-color-1D9BF0">$' + luckdropPostConfig.minTotalUsdAmount + '</span>') : ('$' + luckdropPostConfig.minTotalUsdAmount)} 
                            or the average prize must be above
                            ${isInTemplate ? ('<span class="font-color-1D9BF0">$' + luckdropPostConfig.minAvgUsdAmount +' per person.</span>' ): ('$' + luckdropPostConfig.minAvgUsdAmount + ' per person.') }`
                            : '';
        }
    }
    return forbiddenText;
};

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

/**
 * 输入时 检测设置错误信息
 */
const onIptSetErrorTxt = (params = {}) => {
    if((baseFormData.rewardType === RewardType.money && !currentCurrencyInfo.value.currencyCode)
    || (baseFormData.rewardType === RewardType.custom && !baseFormData.customizedReward)) {
        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 (iptErrMsgTxt.value = checkUsdMinNumber()) {
        // 最小法币金额限制
        return isShowUsdMinMessage.value = true;
    } else if(baseFormData.rewardType === RewardType.money && +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 {
            if(baseFormData.type == PlayType.lottery && !baseFormData.validityDuration) {
                iptErrMsgTxt.value = "Enter Automatically Draw";
            } else {
                //清空错误提示
                iptErrMsgTxt.value = "";
                if(params.actionType != 'discord_blur') {
                    setDiscordErrTxt({getDuildId: true});
                }
            }
        }
    } else if(baseFormData.type == PlayType.lottery && !baseFormData.validityDuration) {
        // 抽奖模式 没有输入时长
        iptErrMsgTxt.value = "Enter Automatically Draw";
    } else {
        setDiscordErrTxt({getDuildId: true}, () => {
            iptErrMsgTxt.value = '';
        });
    } 
}

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

const closeDiscordTask = (val, params, index) => {
    if(params.type == TaskType.joinDiscord) {
        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 == TaskType.joinDiscord);
    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;
        }
    });
};

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

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

const getCurrencyInfo = async (_params) => {
    let { loop = false} = _params || {};
    let {accessToken = ''} = await getChromeStorage('userInfo') || {};
    if (accessToken) {
        let {currencyCode = ''} = await getChromeStorage('selectCurrencyInfo') || {};

        if(currencyCode) {
            let currencyInfoRes = await getCurrencyByCode({currencyCode});
            if(currencyInfoRes.code == 0 && currencyInfoRes.data) {
                currentCurrencyInfo.value = currencyInfoRes.data;
                tempCurrentCurrencyInfo.value = currencyInfoRes.data;
                if(!loop) {
                    onIptSetErrorTxt();
                }
            }
        }

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

const getCurrencyByCode = async (params) => {
    let res = await getCurrencyInfoByCode({
        params: {
            currencyCode: params.currencyCode
        }
    })
    return res || {};
}

const selectPublishMode = (params, index) => {
    selectModeInfo.index = index;
    selectModeInfo.type = params.type;
    baseFormData.type = params.type;

    setInputErrorMsg();
}

const clickLeftTab = (params, index) => {
    publishType.value = params.type;
}

const onToolBoxPageChange = (params) => {
    toolBoxPageData.activePage = params.page;
};

const toolBoxPublishFinish = (params) => {
    toolBoxPageData.activePage = 'EDITOR';
    emits("postPublishFinish", { publishRes: params.publishRes });
}

// 截图相关
const showDialog = () => {
    cropperDialog.value = true;
}
const hiddenDialog = () => {
    cropperDialog.value = false;
    cropperLoading.value = false;
}
const selectImage = (option) => {
    // 设置图片
    cropperOption.value.img = option.file
    // 选取比例
    if (option && option.type && option.type == 2) {
        cropperType.value = 'after';
        cropperOption.value.fixedNumber = [1, 1];
    } else {
        cropperType.value = 'before';
        cropperOption.value.fixedNumber = [16, 8.396];
    }
    nextTick(() => {
        showDialog()
    })
}
const confirmImage = () => {
    let contentType = 'image/png';
    cropperLoading.value = true;
    
    if (refCropper.value) {
        refCropper.value.getCropBlob(imgData => {
            uploadSignature({
                params: {
                    bizType: 1,
                    fileType: 1,
                    contentType: contentType,
                    fileSuffix: 'png',
                }
            }).then(res => {
                let { code, data } = res;
                if (code === 0) {
                    let reader = new FileReader()
                        reader.readAsArrayBuffer(imgData)
                        reader.onload = function(e) {
                            let execFile = e.target.result;
                            uploadFile({
                                url: data.url,
                                data: new Blob([execFile]),
                                headers: {
                                    'Authorization': data.authorization,
                                    'x-amz-date': data.date,
                                    'Content-Type': contentType
                                }
                            }).then(res => {
                                let { status } = res
                                if (status == 200) {
                                    successImage(data)
                                }
                            }).finally(() => {
                                cropperLoading.value = false;
                            })
                        }
                }
            })
        })
    }
}
const successImage = (data) => {
    hiddenDialog()
    // setPosterInfo
    customPosterInfo.value[cropperType.value] = data;
}
const confirmData = (data) => {
    close()
    customPosterData.value = customPosterInfo.value;
}
/**
 * 显示通用奖品名称编辑框
 */
const addCustomizedRewardHandle = () => {
    showCurrencyPop.value = false;
    showCustomizedRewardEditPopup.value = true;
}

const closeRewardPopup = () => {
    showCustomizedRewardEditPopup.value = false;
}

const removeReward = () => {
    showCustomizedRewardEditPopup.value = false;
    resetFormIpt(false);
    onIptSetErrorTxt();
}

// 提交通用奖品
const submitReward = (reward) => {
    if(baseFormData.customizedReward !== reward) {
        // 有修改时，重置之前已提交的数据
        resetFormIpt(false);
    }
    baseFormData.rewardType = RewardType.custom;
    baseFormData.customizedReward = reward;
    showCustomizedRewardEditPopup.value = false;
    currentCurrencyInfo.value = defaultCurrentCurrencyInfo;
    setLocalSelectCurrencyInfo(defaultCurrentCurrencyInfo);
    onIptSetErrorTxt();
}

const updateUSDeposit = async () => {
    if(showDepositMessageBox.value) {
        let currencyInfoRes = await getCurrencyByCode({currencyCode: currentCurrencyInfo.value.currencyCode});

        if(currencyInfoRes.code == 0 && currencyInfoRes.data) {
            currentCurrencyInfo.value = currencyInfoRes.data;
            let {balance} = currencyInfoRes.data;
            if(balance >= finalAmountData.value.orderAmountValue) {
                USDepositStatus.value = 'SUCCESS';
            }
        }
    }
};


const depositAchCancel = async () => {
    showDepositMessageBox.value = false;
    let currencyInfoRes = await getCurrencyByCode({currencyCode: currentCurrencyInfo.value.currencyCode});

    if(currencyInfoRes.code == 0 && currencyInfoRes.data) {
        currentCurrencyInfo.value = currencyInfoRes.data;
        let {balance} = currencyInfoRes.data;
        if(balance >= finalAmountData.value.orderAmountValue) {
            USDepositStatus.value = 'SUCCESS';
        }
    }
}


const depositAchConfirm = async () => {
    let currencyInfoRes = await getCurrencyByCode({currencyCode: currentCurrencyInfo.value.currencyCode});

    if(currencyInfoRes.code == 0 && currencyInfoRes.data) {
        showDepositMessageBox.value = false;
        currentCurrencyInfo.value = currencyInfoRes.data;

        let {balance} = currencyInfoRes.data;
        if(balance >= finalAmountData.value.orderAmountValue) {
            USDepositStatus.value = 'SUCCESS';
            payButtonDom.value && payButtonDom.value.balancePay();
        } else {
            message.info('Deposit failed, please try again later');
        }
    }
}

const onPageVisbile = () => {
    document.addEventListener('visibilitychange', function () {
        let isHidden = document.hidden;
        if (!isHidden) {
            updateUSDeposit();
        }
    });
}

onMounted(() => {
    setFrontConfig();
    setPayConfig();
    getLocalCurrencyInfoByCode();
    onPageVisbile();
    window.addEventListener('resize', function () {
        setDialogStyle(true);
    })
    // showNewImage
    getChromeStorage('custom_poster_guide', (info) => {
        if (!info) {
            customShowNewImage.value = true
        }
    })
});
</script>

<style lang="scss">
.font-color-1D9BF0 {
    color: #1D9BF0;
}
</style>

<style lang="scss" scoped>

:deep() .ant-switch {
    background-color: #E9ECEE;
    height: 14px;
    line-height: 16px;
    min-width: 36px;
}

:deep() .ant-switch-checked {
    background-color: #AED8F5 !important;
}

:deep() .ant-switch::after {
    width: 20px;
    height: 20px;
    top: -4px;
    left: -1px;
}

:deep() .ant-switch-checked::after {
    background-color: #1D9BF0 !important;
    margin-left: 3px;
    left: 100% !important;
}
.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    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;
        max-height: 825px;

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

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

            .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;
                align-items: center;

                .tab-item {
                    width: 100%;
                    height: 55px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                }

                .active-tab {
                    background-color: #D2EAFC;
                }

                .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: 18px 18px 18px 18px;
                    height: calc(100% - 80px);
                    overflow: auto;
                    box-sizing: border-box;

                    display: flex;

                    .task-wrapper {
                        width: 480px;
                    }

                    .form-cell-item {
                        height: 100%;

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

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

                        .form-cell-content {
                            margin-top: 12px;
                            box-sizing: border-box;
                        }
                    }

                    .base-form-wrapper {
                        width: 450px;
                        margin-right: 30px;

                        .form-cell-content {
                            .select-mode-ele {
                                display: flex;
                                cursor: pointer;

                                img:first-child {
                                    margin-right: 10px;
                                }

                                img {
                                    -webkit-user-drag: none;
                                    width: 220px;
                                    height: 90px;
                                }
                            }
                            .form-base {
                                margin-top: 20px;
                                border: 1px solid #D1D9DD;
                                border-radius: 14px;
                                box-sizing: border-box;
                                padding-left: 14px;

                                .item {
                                    box-sizing: border-box;
                                    padding: 7px 0;
                                    min-height: 76px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    input {
                                        width: 178px;
                                        text-align: right;
                                        font-weight: 700;
                                        font-size: 26px;
                                        border: none;
                                        outline: none;
                                        box-sizing: border-box;
                                    }

                                    input::placeholder {
                                        color: #c5c5c5;
                                    }

                                    input:disabled {
                                        color: #c5c5c5;
                                        background-color: #fff;
                                    }

                                    input {
                                        padding-right: 16px;
                                    }       

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

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


                                .currency-select-wrapper {
                                    overflow: hidden;
                                    .currency-select {
                                        cursor: pointer;
                                        background: #1D9BF0;
                                        padding: 6px 10px;
                                        border-radius: 12px;
                                        color: #fff;
                                        width: max-content;
                                        max-width: 234px;

                                        .text {
                                            word-break: break-all;
                                        }

                                        .arrow {
                                            margin-left: 5px;
                                        }
                                    }
                                    .selected {
                                        background: #F4F4F4 !important;
                                        color: #000 !important;
                                    }
                                }

                                .winners-count-input {
                                    border-top: 1px solid #D1D9DD;
                                    .msg {
                                        font-weight: 400;
                                        font-size: 12px;
                                        color: #A39F9F;
                                        margin-top: 8px
                                    }
                                }

                                .automatically-input {
                                    border-top: 1px solid #D1D9DD;
                                    .input-wrapper {
                                        margin-right: 16px;
                                        box-sizing: border-box;
                                        input {
                                            padding-right: 4px !important;
                                        }
                                        .unit {
                                            font-weight: 700;
                                            font-size: 26px;
                                            opacity: 0.5;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .currency-operation {
                        position: relative;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        margin-top: 8px;

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

                        .amount {
                            font-weight: 400;
                            font-size: 12px;
                            color: #A39F9F;
                            img {
                                margin-left: 6px;
                                cursor: pointer;
                            }
                        }

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


                    .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;
                        border: 1px solid #D1D9DD;

                        .form-item {
                            min-height: 54px;
                            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: 6px;
                                box-sizing: border-box;
                                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;
                        }
                    }
                }

                .usd-min-message {
                    font-style: normal;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 16px;
                    letter-spacing: 0.3px;
                    color: #C88726;
                    margin-top: 8px;
                }

                .giveaway-poster {
                    display: flex;
                    align-items: center;
                    flex-direction: row;
                    cursor: pointer;
                    height: 84px;
                    margin-top: 20px;
                    border-radius: 14px;
                    border: 1px solid #D1D9DD;
                    .show-img {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 45px;
                        height: 60px;
                        margin-left: 14px;
                        margin-right: 14px;
                        position: relative;
                    }
                    .show-font {
                        position: relative;
                        font-size: 15px;
                        font-weight: 500;
                        .new {
                            width: 40px;
                            height: 18px;
                            margin-left: 10px;
                        }
                    }
                    .show-placeholder {
                        flex: 1;
                        color: #1D9BF0;
                        font-size: 15px;
                        font-weight: 500;
                        text-align: right;
                    }
                    .arrow {
                        width: 18px;
                        height: 24px;
                        margin-left: 2px;
                        margin-right: 12px;
                    }
                }
                .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;
                    }
                }

                .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;
            }
        }
    }
}
.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;
                word-break: break-all;
            }
        }
        .refresh {
            width: 40px;
            cursor: pointer;
            margin-left: -5px;
        }
    }
    .btn-wrap {
        width: 100%;
        height: 80px;
        background-color: #fff;
        position: absolute;
        left: 0;
        bottom: 0;
        box-shadow: 0px -1px 0px #ececec;
        border-bottom-right-radius: 16px;
        padding: 12px 30px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        border-bottom-left-radius: 16px;
        z-index: 999;
        .custom-submit {
            width: 200px;
            height: 50px;
            background: #1D9BF0;
            border-radius: 50px;
            font-weight: 700;
            font-size: 18px;
            line-height: 50px;
            text-align: center;
            letter-spacing: 0.3px;
            color: #FFFFFF;
            cursor: pointer;
        }
    }
    
}

.dialog {
    position: absolute;
    z-index: 2002;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: calc(100% - 100px);
    border-radius: 20px;
    background-color: #ffffff;
    .corp-title {
        display: flex;
        height: 48px;
        align-items: center;
        .back {
            cursor: pointer;
            width: 24px;
            height: 24px;
            margin: 0 12px;
        }
        span {
            font-size: 16px;
            font-weight: 500;
        }
    }
    .corp-content {
        width: 472px;
        margin: auto;
        height: calc(100% - 130px);
    }
    .corp-footer {
        display: flex;
        align-items: center;
        justify-content: right;
        height: 80px;
        text-align: right;
        padding-right: 30px;
        .confirm {
            cursor: pointer;
            border: 0;
            width: 200px;
            height: 50px;
            color: #ffffff;
            font-size: 18px;
            font-weight: 700;
            border-radius: 25px;
            background: #1D9BF0;
            &.disable {
                background: #D9D9D9;
                img {
                    width: 20px;
                    margin-right: 10px;
                }
            }
        }
    }
}
.dialog-mask {
    position: absolute;
    z-index: 2001;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}
:deep() .vue-cropper {
    background-image: none;
}
:deep() .cropper-modal {
    background: rgba(0, 0, 0, .05);
}
</style>