de-net/src/view/iframe/red-packet/luck-draw.vue

<!-- 红包任务页面 -->
<template>
    <div class="content">
        <!-- global-tip -->
        <!-- <global-tip :type="'1'"></global-tip> -->
        <!-- open -->
        <div v-show="state.status == 'opened'" class="opened">

            <div class="header"
                :style="{ 'backgroundImage': `url(${require('@/assets/subject/002-back-head-top-1.svg')})` }">
                <!--  -->
                <img :src="require('@/assets/subject/001-icon-red-packet.svg')" alt="">
                <div class="txt">
                    <p>Complete tasks</p>
                    <p>to Draw Prizes</p>
                </div>
            </div>

            <div class="list">
                <template v-for="item, i in state.detail.taskCondition" v-bind:key="i">
                    <div class="item" v-if="item.type == 1 && item.relatedUsers && item.relatedUsers.length > 0">
                        <div class="item-content">
                            <div class="item-follow-title">
                                <img :src="require('@/assets/svg/icon-task-twitter.svg')" alt />
                                <!-- <img :src="require('@/assets/svg/icon-follow.svg')" alt /> -->
                                <div class="item-title">Follow</div>
                                <img :src="require('@/assets/gif/red-right.gif')" alt class="red-right"
                                    v-show="!state.done.follow && state.done.follow_red" />
                                <img v-if="state.done.follow" :src="require('@/assets/svg/icon-true.svg')" alt />
                                <div v-else class="btn" @click="clickFollowAll(item.relatedUsers, 'all')">Follow All
                                </div>
                            </div>
                            <div class="item-follow-area">
                                <template v-for="item2, i in item.relatedUsers" v-bind:key="i">
                                    <div class="item-follow" v-if="item2.finished">
                                        <span :class="{ finished: item2.finished }">@{{ item2.name }}</span>
                                        <img :src="require('@/assets/svg/icon-true-ed.svg')" alt />
                                    </div>
                                    <div class="item-follow" v-else @click="clickFollowAll([item2])">
                                        <span :class="{ finished: item2.finished }">@{{ item2.name }}</span>
                                        <img :src="require('@/assets/svg/icon-add.svg')" alt />
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="item" v-if="item.type == 2">
                        <img :src="require('@/assets/svg/icon-task-twitter.svg')" alt />
                        <!-- <img :src="require('@/assets/svg/icon-like.svg')" alt /> -->
                        <div class="item-content">
                            <div class="item-title">Like</div>
                        </div>
                        <img :src="require('@/assets/gif/red-right.gif')" alt class="red-right"
                            v-show="!state.done.like && state.done.like_red" />
                        <img v-if="state.done.like" :src="require('@/assets/svg/icon-true.svg')" alt />
                        <div v-else class="btn" @click="clickLikeBtn">Like</div>
                    </div>
                    <div class="item" v-if="item.type == 3">
                        <img :src="require('@/assets/svg/icon-task-twitter.svg')" alt />
                        <!-- <img :src="require('@/assets/svg/icon-retweet.svg')" alt /> -->
                        <div class="item-content">
                            <div class="item-title">Retweet</div>
                        </div>
                        <img :src="require('@/assets/gif/red-right.gif')" alt class="red-right"
                            v-show="!state.done.retweet && state.done.retweet_red" />
                        <img v-if="state.done.retweet" :src="require('@/assets/svg/icon-true.svg')" alt />
                        <div v-else class="btn" @click="clickRetweetBtn">Retweet</div>
                    </div>
                    <!-- Comment、艾特 friends -->
                    <div class="item" v-if="item.type == 9">
                        <img :src="require('@/assets/svg/icon-task-twitter.svg')" alt />
                        <div class="item-content">
                            <div class="item-title">Comment and Tag 3 friends</div>
                        </div>
                        <img :src="require('@/assets/gif/red-right.gif')" alt class="red-right"
                            v-show="!state.done.reply && state.done.reply_red" />
                        <img v-if="state.done.reply" :src="require('@/assets/svg/icon-true.svg')" alt />
                        <div v-else class="btn" @click="clickReply(item)">Comment</div>
                    </div>
                    <!-- repost feacebook -->
                    <div class="item" v-if="item.type == 8">
                        <img :src="require('@/assets/svg/icon-task-facebook.svg')" alt />
                        <div class="item-content">
                            <div class="item-title">Repost to Facebook</div>
                        </div>
                        <img :src="require('@/assets/gif/red-right.gif')" alt class="red-right"
                            v-show="!state.done.repost_facebook && state.done.repost_facebook_red" />
                        <img v-if="state.done.repost_facebook" :src="require('@/assets/svg/icon-true.svg')" alt />
                        <div v-else class="btn" @click="clickRepostFacebook(item)">Repost</div>
                    </div>
                    <!-- join discord  -->
                    <div class="item" v-if="item.type == 7">
                        <img :src="require('@/assets/svg/icon-discord-mini.svg')" alt />
                        <div class="item-content">
                            <div class="item-title">Join Discord</div>
                        </div>
                        <img :src="require('@/assets/gif/red-right.gif')" alt class="red-right"
                            v-show="!state.done.join_discord && state.done.join_discord_red" />
                        <img v-if="state.done.join_discord" :src="require('@/assets/svg/icon-true.svg')" alt />
                        <template v-else>
                            <div v-if="joinDiscordIng" class="loading-wrapper">
                                <img class="icon-loading" :src="require('@/assets/svg/icon-loading-gray.svg')" />
                            </div>
                            <div v-else class="btn" @click="joinDiscord">
                                Join
                            </div>
                        </template>
                    </div>
                </template>
            </div>
            <!-- <div class="people" @click="clickRoad">
        <div class="txt">
          {{ state.detail.receiveCount || 0 }}/{{ state.detail.totalCount || 0 }} Winners,{{
              state.detail.receiveAmountValue
          }}/{{ state.detail.amountValue }} {{ state.detail.currencySymbol }}</div>
        <div class="right" v-if="state.detail.allReceived">

          <img :src="require('@/assets/svg/icon-right.svg')" alt class="road" />
        </div>
      </div> -->
            <div class="footer">

                <div class="btn" @click="clickGetGiveaways">Complete</div>
            </div>
        </div>


        <!-- success -->
        <div v-if="state.status == 'success'" class="success">
            <div class="header"
                :style="{ 'backgroundImage': `url(${require('@/assets/subject/002-back-head-top-180.svg')})` }">
                <div class="success-title">
                    🎉 Awesome! You are Winner!
                </div>
                <div class="money">
                    <img :src="state.detail.currencyIconPath" alt />
                    <font-amount :amount="state.receiveAmount" class="big" :fontSize="46"></font-amount>
                    <!-- <span class="small">{{ state.detail.currencySymbol }}</span> -->
                </div>
                <div class="done" @click="clickDone">
                    <img :src="require('@/assets/subject/001-icon-done.svg')" alt class="icon-done" />
                    <span>View Rewards In Wallet</span>
                    <img :src="require('@/assets/svg/icon-right.svg')" alt class="icon-right" />
                </div>
            </div>
            <div class="luck-list-title">
                <div>{{ state.detail.receiveCount || 0 }}/{{ state.detail.totalCount || 0 }} Winners</div>
                <div class="right">
                    <span class="text">
                        <a-tooltip :title="state.detail.receiveAmountValue">
                            {{ getBit(state.detail.receiveAmountValue) }}
                        </a-tooltip>
                        /
                        <a-tooltip :title="state.detail.amountValue">
                            {{ getBit(state.detail.amountValue) || '' }}
                        </a-tooltip>
                    </span>
                    {{ state.detail.currencySymbol || '' }}
                </div>
            </div>
            <div class="luck-list max" @scroll="handleScroll($event)">
                <div class="luck-item" v-for="item, i in state.detail.allReceived" v-bind:key="i">
                    <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl"
                        @click="openTwitterDetail(item)" alt />
                    <img v-else :src="require('@/assets/svg/icon-twitter.svg')" alt />
                    <img class="win" :src="require('@/assets/svg/icon-win-1.svg')" v-if="i==0" alt/>
                    <img class="win" :src="require('@/assets/svg/icon-win-2.svg')" v-if="i==1" alt/>
                    <img class="win" :src="require('@/assets/svg/icon-win-3.svg')" v-if="i==2" alt/>
                    <div class="luck-content">
                        <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName
                        }}</div>
                        <div class="luck-title" v-else>Twitter User</div>
                        <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD HH:mm') }}</div>
                    </div>
                    <div class="luck-money">
                        <img :src="state.detail.currencyIconPath" alt />
                        <div class="luck-money-txt">
                            <a-tooltip :title="item.amountValue">
                                {{ getBit(item.amountValue) }}
                            </a-tooltip>
                        </div>
                    </div>
                    <div class="luck-king" v-if="item.maxAmount">
                        <img :src="require('@/assets/svg/icon-king-hat.svg')" alt />
                        <span>Luckiest Draw</span>
                    </div>
                </div>
            </div>
            <get-more></get-more>
        </div>


        <!-- no-open -->
        <div v-else-if="state.status == 'not-open'" class="not-open">
            <img :src="require('@/assets/subject/002-card.svg')" alt="">
            <img class="open-gif" :src="require('@/assets/gif/002.png')" />

            <img :src="require('@/assets/svg/icon-participate.svg')" alt="" class="open" @click="clickOpenRedPacket">
            <div class="title" v-if="state.detail.postUserInfo">
                <img :src="state.detail.postUserInfo.avatarUrl" alt />
                <span>{{ state.detail.postUserInfo.nickName || 'FutureDoctor' }}</span>
            </div>
            <div class="money-area">
                <div class="txt">{{ state.detail.currencySymbol }} GIVEAWAY</div>
                <div class="coin">
                    <img :src="state.detail.currencyIconPath" alt />
                    <font-amount :amount="state.detail.amountValue" style="color:#fff;"></font-amount>
                </div>
                <!-- <div class="people">{{ state.detail.totalCount }} WINNERS TO SHARE</div> -->
                <div class="mark-area">
                    <div class="time">
                        <img :src="require('@/assets/svg/icon-time.svg')" />
                        <span>{{ moment(state.detail.endTimestamp).format('HH:mm:ss') }}</span>
                    </div>
                    <div class="win">
                        <img :src="require('@/assets/svg/icon-win.svg')" />
                        <span>{{ state.detail.totalCount }}WINNERS</span>
                    </div>
                </div>
            </div>
        </div>


        <!-- 领取列表 -->
        <div v-else-if="state.status == 'luck-peopel-list'" class="luck-peopel-list">
            <div class="head">
                <img :src="require('@/assets/svg/icon-back.svg')" alt />
            </div>
            <div class="luck-list-title">
                <div>{{ state.detail.receiveCount || 0 }}/{{ state.detail.totalCount || 0 }} Winners</div>
                <div class="right">
                    <span class="text">
                        <a-tooltip :title="state.detail.receiveAmountValue">
                            {{ getBit(state.detail.receiveAmountValue) }}
                        </a-tooltip>
                        /
                        <a-tooltip :title="state.detail.amountValue">
                            {{ getBit(state.detail.amountValue) || '' }}
                        </a-tooltip>
                    </span> {{
                            state.detail.currencySymbol || ''
                    }}
                </div>
            </div>
            <div class="luck-list" @scroll="handleScroll">
                <div class="luck-item" v-for="item, i in state.detail.allReceived" v-bind:key="i">
                    <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt
                        @click="openTwitterDetail(item)" />
                    <img v-else :src="require('@/assets/svg/icon-twitter.svg')" alt />
                    <img class="win" :src="require('@/assets/svg/icon-win-1.svg')" v-if="i==0" alt/>
                    <img class="win" :src="require('@/assets/svg/icon-win-2.svg')" v-if="i==1" alt/>
                    <img class="win" :src="require('@/assets/svg/icon-win-3.svg')" v-if="i==2" alt/>
                    <div class="luck-content">
                        <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName
                        }}</div>
                        <div class="luck-title" v-else>Twitter User</div>
                        <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD HH:mm:ss') }}</div>
                    </div>
                    <div class="luck-money">
                        <img :src="state.detail.currencyIconPath" alt />
                        <div class="luck-money-txt">
                            <a-tooltip :title="item.amountValue">
                                {{ getBit(item.amountValue) }}
                            </a-tooltip>
                        </div>
                    </div>

                    <div class="luck-king" v-if="item.maxAmount">
                        <img :src="require('@/assets/svg/icon-king-hat.svg')" alt />
                        <span>Luckiest Draw</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 关闭状态 -->
        <div v-else-if="state.status == 'close'" class="close">
            <!-- 红包被领完了 -->
            <div class="header"
                :style="{ 'backgroundImage': `url(${require('@/assets/subject/002-back-head-top.svg')})` }"
                v-if="state.close_status == '已经过期了'">
                <div class="rabbit">
                    <img class="flower" :src="require('@/assets/svg/icon-flower.svg')" alt />
                    <p>This Draw is Complete</p>
                </div>
            </div>
            <!-- 没有抽中 -->
            <div class="header"
                :style="{ 'backgroundImage': `url(${require('@/assets/subject/002-back-head-top.svg')})` }"
                v-if="state.close_status == '没有抽中'">
                <div class="rabbit">
                    <img :src="require('@/assets/subject/001-icon-rabbit.svg')" alt />
                    <p>Good Luck Next Time!</p>
                </div>
            </div>


            <!-- 等待结果 -->
            <div class="header"
                :style="{ 'backgroundImage': `url(${require('@/assets/subject/002-back-head-top.svg')})` }"
                v-if="state.close_status == '等待结果'">
            </div>
            <div class="load-result" v-if="state.close_status == '等待结果'">
                <div class="title">
                    <img :src="require('@/assets/svg/icon-enter-ed.svg')" alt />
                    <span>Participate Successful</span>
                </div>
                <!-- 票 -->
                <div class="ticket">
                    <div class="div-ticket">
                        <img :src="require('@/assets/svg/icon-ticket.svg')" alt />
                    </div>
                </div>
                <p>Announcement Winner</p>
                <div class="time">
                    <img :src="require('@/assets/svg/icon-win-time.svg')" alt />
                    <span>{{ moment(state.detail.endTimestamp).format('HH:mm:ss') || '' }}</span>
                </div>
                <get-more :style_type="2"></get-more>
                <div class="notification_switch">
                    <span>Announcement Notification</span>
                    <a-switch v-model:checked="state.notification_switch" />
                </div>
            </div>

            <div class="luck-list-title" v-show="state.close_status != '等待结果'">
                <div>{{ state.detail.receiveCount || 0 }}/{{ state.detail.totalCount || 0 }} Winners</div>
                <div class="right">
                    <span class="text">
                        <a-tooltip :title="state.detail.receiveAmountValue">
                            {{ getBit(state.detail.receiveAmountValue) }}
                        </a-tooltip>
                        /
                        <a-tooltip :title="state.detail.amountValue">
                            {{ getBit(state.detail.amountValue || '') }}
                        </a-tooltip>
                    </span> {{
                            state.detail.currencySymbol || ''
                    }}
                </div>
            </div>

            <div class="luck-list max" @scroll="handleScroll" v-show="state.close_status != '等待结果'">
                <div class="luck-item" v-for="item, i in state.detail.allReceived" v-bind:key="i">
                    <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt
                        @click="openTwitterDetail(item)" />
                    <img v-else :src="require('@/assets/svg/icon-twitter.svg')" alt />
                    <img class="win" :src="require('@/assets/svg/icon-win-1.svg')" v-if="i==0" alt/>
                    <img class="win" :src="require('@/assets/svg/icon-win-2.svg')" v-if="i==1" alt/>
                    <img class="win" :src="require('@/assets/svg/icon-win-3.svg')" v-if="i==2" alt/>
                    <div class="luck-content">
                        <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName
                        }}</div>
                        <div class="luck-title" v-else>Twitter User</div>
                        <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD HH:mm:ss') }}</div>
                    </div>
                    <div class="luck-money">
                        <img :src="state.detail.currencyIconPath" alt />
                        <div class="luck-money-txt">
                            <a-tooltip :title="item.amountValue">
                                {{ getBit(item.amountValue) }}
                            </a-tooltip>
                        </div>
                    </div>
                    <div class="luck-king" v-if="item.maxAmount">
                        <img :src="require('@/assets/svg/icon-king-hat.svg')" alt />
                        <span>Luckiest Draw</span>
                    </div>
                </div>

                <div class="empty" v-show="state.detail.allReceived && state.detail.allReceived.length == 0">
                    <img :src="require('@/assets/svg/icon-error.svg')" alt />
                </div>
            </div>
            <get-more v-if="state.close_status != '等待结果'"></get-more>
        </div>


        <!-- error -->
        <div v-else-if="state.status == 'error'" class="error">
            <img :src="require('@/assets/svg/icon-error.svg')" alt />
            <div class="txt">
                {{ state.error_txt }}
            </div>
            <div class="retry" v-show="state.retry" @click="clickRetry">
                Retry
            </div>
        </div>


        <!-- loading -->
        <div v-show="state.loading_show" class="loading">
            <img :src="require('@/assets/svg/icon-loading.svg')" alt />
        </div>

        <div v-show="state.loading_redbag" class="redbag">
            <img :src="require('@/assets/img/icon-loading-redbag.gif')" alt />
        </div>

    </div>
    <div style="width: 100%; height: 30px; position: fixed; color: red; top:0;"
        v-if="state.process_mode != 'production'">
        {{ state.detail.validity }}</div>
</template>

<script>
export default {
    name: 'redPacket',
}
</script>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { getPostDetail, getRedPacket, finishRedPacket, oneKeyLike, oneKeyReTweet, oneKeyFollow, getTaskDetail, getReceivedList, addFinishEvent } from '@/http/redPacket.js'
import { getQueryString, guid, getBit } from '@/uilts/help.js'
import { message } from 'ant-design-vue';
import FontAmount from '@/view/components/font-amount.vue'
import GetMore from '@/view/iframe/publish/components/get-more.vue'
import { setChromeStorage, getChromeStorage } from '@/uilts/chromeExtension.js'
import Report from "@/log-center/log"
import { srcPublishSuccess } from '@/http/publishApi'
import { discordAuthUrl, checkGuildJoined } from '@/http/discordApi'
import { discordAuthRedirectUri, faceShareRedirectUrl } from '@/http/configAPI'
import { getFrontConfig } from "@/http/account";
import GlobalTip from '@/view/components/global-tip.vue'
var moment = require('moment');

let discordAuthorizeRequired = false;
let joinDiscordActionState = 'default'; //authAndJoinIng  joinIng  reAuth
let joinDiscordIng = ref(false);

let facebookAppConfig = {
    facebookAppId: "",
    faceShareRedirectUrl
};

let state = reactive({
    status: '',
    userId: '',
    loading_show: false,
    loading_redbag: false,
    detail: {},
    luck_list_end: false,
    page_index: 1,
    page_size: 20,
    srcContentId: '',
    error_txt: `oops, new accounts cannot participate in this event,`,
    receiveAmount: 0,
    money: 0,
    // 状态
    done: {
        follow: false,
        like: false,
        retweet: false,
        join_discord: false,
        repost_facebook: false,
        reply: false
    },
    notification_switch: false,
    open_timer_status: false
})

let fullName = '';

function clickRetry() {
    init()
}

let follow_open_tabs = []

async function clickLikeBtn() {
    let _userInfo = await checkIsLogin()
    if (!_userInfo) {
        return
    }
    state.detail.finishTaskTypeV2 = state.detail.finishTaskTypeV2.toString() || ''
    if (state.window_origin.indexOf('facebook.com') >= 0) {
        state.detail.finishTaskTypeV2 = '2'
    }
    switch (state.detail.finishTaskTypeV2) {
        case '1':
            state.loading_show = true
            oneKeyLike({
                params: {
                    tweetId: state.srcContentId
                }
            }).then((res) => {
                state.loading_show = false
                if (res.code == 0) {
                    if (res.data.result) {
                        state.done.like = true
                    } else {
                        state.done.like = false
                        window.open(`https://twitter.com/intent/like?tweet_id=${state.tweetId}`)
                    }
                } else {
                    window.open(`https://twitter.com/intent/like?tweet_id=${state.tweetId}`)
                    state.done.like = false
                }
            }).catch(() => {
                state.loading_show = false
            })
            break
        case '2':
            window.open(`https://twitter.com/intent/like?tweet_id=${state.tweetId}`)
            break
        case '3':
            state.loading_show = true
            chrome.tabs.getCurrent((tab) => {
                chrome.tabs.sendMessage(tab.id, {
                    actionType: "IFRAME_TWITTER_API_DO_TASK", task_data: {
                        tweet_Id: state.tweetId
                    }, task_type: 'like'
                }, (res) => { console.log(res) });
            })
            break
        default:
            window.open(`https://twitter.com/intent/like?tweet_id=${state.tweetId}`)
            break
    }

    // 埋点
    Report.reportLog({
        objectType: Report.objectType.like,
        pageSource: Report.pageSource.task_page,
        businessType: Report.businessType.buttonClick,
        postId: state.postId,
        srcContentId: state.tweetId,
        senderId: state.userId,
    });
}
function clickDone() {
    window.open(`${chrome.runtime.getURL('/iframe/home.html')}`)
    // 埋点
    Report.reportLog({
        objectType: Report.objectType.wallet_button,
        pageSource: Report.pageSource.received_success_page,
        businessType: Report.businessType.buttonClick,
        postId: state.postId,
        srcContentId: state.tweetId,
        senderId: state.userId,
    });
}
function handleScroll(e) {
    if (state.luck_list_end) {
        return
    }
    e = e.target
    if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
        state.luck_list_end = true
        state.page_index++
        handleReceivedList()
    }
}
function handleReceivedList() {
    getReceivedList({
        params: {
            pageNum: state.page_index,
            pageSize: state.page_size,
            postId: state.postId
        }
    }).then((res) => {
        if (res.code == 0) {
            if (res.data.length > 0) {
                state.detail.allReceived = state.detail.allReceived.concat(res.data)
                state.luck_list_end = false
            } else {
                state.luck_list_end = true
            }
        } else {
            console.log('getReceivedList', res)
        }
    })
}

const openTwitterDetail = (item) => {
    if (item.simpleUserInfoVO.nickName) {
        window.open(`https://twitter.com/${item.simpleUserInfoVO.nickName}`)
    }
}

async function clickRetweetBtn() {
    let _userInfo = await checkIsLogin()
    if (!_userInfo) {
        return
    }

    state.detail.finishTaskTypeV2 = state.detail.finishTaskTypeV2.toString() || ''
    if (state.window_origin.indexOf('facebook.com') >= 0) {
        state.detail.finishTaskTypeV2 = '2'
    }
    switch (state.detail.finishTaskTypeV2) {
        case '1':
            state.loading_show = true
            oneKeyReTweet({
                params: {
                    tweetId: state.srcContentId
                }
            }).then((res) => {
                state.loading_show = false
                if (res.code == 0) {
                    if (res.data.result) {
                        state.done.retweet = true
                    } else {
                        window.open(`https://twitter.com/intent/retweet?tweet_id=${state.tweetId}`)
                        state.done.retweet = false
                    }
                } else {
                    window.open(`https://twitter.com/retweet/like?tweet_id=${state.tweetId}`)
                    state.done.retweet = false
                }
            }).catch(() => {
                state.loading_show = false
            })
            break;
        case '2':
            window.open(`https://twitter.com/intent/retweet?tweet_id=${state.tweetId}`)
            break
        case '3':
            state.loading_show = true
            chrome.tabs.getCurrent((tab) => {
                chrome.tabs.sendMessage(tab.id, {
                    actionType: "IFRAME_TWITTER_API_DO_TASK", task_data: {
                        tweet_Id: state.tweetId
                    }, task_type: 'retweet'
                }, (res) => { console.log(res) });
            })
            break
        default:
            window.open(`https://twitter.com/intent/retweet?tweet_id=${state.tweetId}`)
            break;
    }

    // 埋点
    Report.reportLog({
        objectType: Report.objectType.retweet,
        pageSource: Report.pageSource.task_page,
        businessType: Report.businessType.buttonClick,
        postId: state.postId,
        srcContentId: state.tweetId,
        senderId: state.userId,
    });
}

function onTweetReplyClick(params) {
    let replyData = {
        postId: state.postId,
        type: params.type,
        taskLuckdropId: state.detail.taskLuckdropId
    }

    window.parent.postMessage({ actionType: "IFRAME_RED_PACKET_ON_TWEET_REPLY_CLICK", data: replyData }, "*");
}

async function clickReply(params) {
    let _userInfo = await checkIsLogin()
    if (!_userInfo) {
        return
    }

    let replyData = {
        postId: state.postId,
        type: params.type,
        taskLuckdropId: state.detail.taskLuckdropId
    }
    if (state.window_origin.indexOf('facebook.com') > -1) {
        let url = `https://twitter.com/${state.tweet_author}/status/${state.tweetId}?actionType=denetFacebookToTwitterReply&deReplyParams=${JSON.stringify(replyData)}`
        window.open(url)
    } else {
        window.parent.postMessage({ actionType: "IFRAME_RED_PACKET_REPLY_CLICK", data: replyData }, "*");
    }
}

/**
 * 点击repost facebook
 */
async function clickRepostFacebook(params) {
    let _userInfo = await checkIsLogin()
    if (!_userInfo) {
        return
    }

    let deUrlParams = {
        fullName,
        tweetId: state.tweetId
    }
    let href = `${state.postRedirectUrl}?deUrlParams=${JSON.stringify(deUrlParams)}`;
    console.log(href);
    let shareUrlparams = {
        href,
        type: params.type,
        taskLuckdropId: state.detail.taskLuckdropId
    }

    setChromeStorage({
        shareFacebookData: JSON.stringify({
            contentStr: state.srcContent
        })
    })

    let shareUrl = feacebookShareUrl(shareUrlparams);
    openShareFacebookWindow({ url: shareUrl });
}

/**
 * 分享到facebook
 */
function openShareFacebookWindow({ url }) {
    const width = 800;
    chrome.windows.create({
        width,
        type: 'normal',
        url
    }, function (window) {

    })
}

/**
 * 分享fecebook 地址
 */
function feacebookShareUrl(params = {}) {
    let { href = '', type = '', taskLuckdropId } = params;
    let cbParams = JSON.stringify({
        type,
        taskLuckdropId
    })
    let shareUrl = `https://www.facebook.com/dialog/share?app_id=${facebookAppConfig.facebookAppId}&display=popup&href=${href}&redirect_uri=${facebookAppConfig.faceShareRedirectUrl}?params=${cbParams}`;

    return shareUrl;
}

/**
 * 分享成功
 */
function facebookShareSuccess(params) {
    let { taskLuckdropId } = params;

    if (taskLuckdropId == state.detail.taskLuckdropId) {
        state.done.repost_facebook = true;
        state.done.repost_facebook_red = false;
    }
}


function getValidity() {
    let _d1, _d2, _d3, _h, _m, _s
    if (!state.detail.myReceived.taskEndTimestamp) {
        return
    }
    let timer = setInterval(() => {
        let _time = new Date().getTime()
        _d3 = state.detail.myReceived.taskEndTimestamp - _time
        if (_d3 > 0) {
            _d1 = moment(state.detail.myReceived.taskEndTimestamp)
            _d2 = moment(_time)
            _h = moment.duration(_d1.diff(_d2)).hours()
            if (_h < 10) {
                _h = '0' + _h
            }
            _m = moment.duration(_d1.diff(_d2)).minutes()
            if (_m < 10) {
                _m = '0' + _m
            }
            _s = moment.duration(_d1.diff(_d2)).seconds()
            if (_s < 10) {
                _s = '0' + _s
            }
            state.detail.validity = `${_h}:${_m}:${_s}`
        } else {
            state.detail.validity = `00:00:00`
            clearInterval(timer)
        }
    }, 1000)
}

const openFollowTabs = (arr_name) => {
    let array_finish = arr_name.filter((item) => { return !item.finished })
    // let array_finish = state.detail.taskCondition[0].relatedUsers.filter((item) => { return item.finished == false })
    let url
    if (array_finish.length > 0) {
        state.done.follow = false
        // 打开标签页的方法
        array_finish.forEach((item) => {
            url = `https://twitter.com/intent/follow?screen_name=${item.name}&tweet_id=${state.tweetId}`
            chrome.tabs.create({ url }, (tab) => {
                if (follow_open_tabs.filter((item) => { return item.url == tab.url }).length == 0) {
                    follow_open_tabs.push(tab)
                }
            })
        })
    }
}

async function clickFollowAll(item, is_all) {
    let _userInfo = await checkIsLogin()
    if (!_userInfo) {
        return
    }
    let arr_name = []
    for (let i in item) {
        if (!item[i].finished) {
            arr_name.push(item[i])
        }
    }
    // ---- 
    state.detail.finishTaskTypeV2 = state.detail.finishTaskTypeV2.toString() || ''
    if (state.window_origin.indexOf('facebook.com') >= 0) {
        state.detail.finishTaskTypeV2 = '2'
    }
    switch (state.detail.finishTaskTypeV2) {
        case '1':
            // openapi
            state.loading_show = true
            oneKeyFollow({
                params: {
                    names: arr_name
                }
            }).then((res) => {
                state.loading_show = false
                if (res.code == 0) {
                    res.data.forEach((item1) => {
                        state.detail.taskCondition[0].relatedUsers.forEach(item2 => {
                            if (item1.name == item2.name && item1.finished) {
                                item2.finished = true
                            }
                        });
                    })
                    openFollowTabs(arr_name)
                }
            }).catch(() => {
                state.loading_show = false
            })
            break
        case '2':
            openFollowTabs(arr_name)
            break
        case '3':
            if (arr_name.filter((item) => { return !item.twitterUserId }).length > 0) {
                openFollowTabs(arr_name)
                return
            }
            let follow_data = []
            arr_name.forEach((item) => {
                follow_data.push(item)
            })
            state.loading_show = true
            chrome.tabs.getCurrent((tab) => {
                chrome.tabs.sendMessage(tab.id, {
                    actionType: "IFRAME_TWITTER_API_DO_TASK",
                    task_data: {
                        tweet_Id: state.tweetId,
                        follow_data: follow_data,
                    },
                    task_type: 'follow'
                }, (res) => { console.log(res) });
            })

            break
        default:
            openFollowTabs(arr_name)
            break
    }
    // -------- 埋点 --------
    let _log_obj = {
        pageSource: Report.pageSource.task_page,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.follow
    }
    if (is_all) {
        _log_obj.objectType = Report.objectType.follow_button
    }
    Report.reportLog(_log_obj, {
        postId: state.postId,
        srcContentId: state.tweetId,
        senderId: state.userId,
    });
}


// 重新绑定
const reSetBindTwtterId = (_params) => {
    getChromeStorage('userInfo', (_userInfo) => {
        if (_userInfo && _userInfo.uid == _params.uid) {
            srcPublishSuccess({
                params: {
                    postId: state.postId,
                    srcContentId: state.tweetId
                }
            }).then((res) => {
                if (res.code == 0 || res.code == 3003) {
                    Report.reportLog({
                        objectType: Report.objectType.tweetPostBinded
                    });
                    init({ from: 'reSetBindTwtterId' })
                }
            })
        }
    })
}

const showCloseEndTimePage = () => {
    state.status = 'close'
    state.close_status = '已经过期了'
    state.close_text = [`This Giveaways`, `expired on ${moment(state.detail.endTimestamp).format('MM-DD')}`]
}

const showCloseEndTimePageReport = () => {
    // 埋点
    Report.reportLog({
        pageSource: Report.pageSource.expired_page,
        businessType: Report.businessType.pageView,
        postId: state.postId,
        srcContentId: state.tweetId,
        senderId: state.userId,
    });
}

const showSuccessPage = () => {
    state.status = 'success'
    state.open_timer_status = true
    // 埋点
    Report.reportLog({
        pageSource: Report.pageSource.received_success_page,
        businessType: Report.businessType.pageView,
        postId: state.postId,
        srcContentId: state.tweetId,
        senderId: state.userId,
    });
}
const showNotOpenPage = () => {
    state.status = 'not-open'
    Report.reportLog({
        pageSource: Report.pageSource.pending_page,
        businessType: Report.businessType.pageView,
        postId: state.postId,
        srcContentId: state.tweetId,
        senderId: state.userId,
    });
}
const showOpenedPage = () => {
    state.status = 'opened'

    initTaskDetail()
}
const showOpenedPageReport = () => {
    // 埋点
    Report.reportLog({
        pageSource: Report.pageSource.task_page,
        businessType: Report.businessType.pageView,
        postId: state.postId,
        srcContentId: state.tweetId,
        senderId: state.userId,
    });
}

const showRabbitPage = () => {
    state.status = 'close'
    state.close_status = '没有抽中'
    state.open_timer_status = true
}
const showRabbitPageReport = () => {
    Report.reportLog({
        pageSource: Report.pageSource.received_empty_rewards_page,
        businessType: Report.businessType.pageView,
        postId: state.postId,
        srcContentId: state.tweetId,
        senderId: state.userId,
    });
}
const handleStatusPage = () => {
    // status 红包状态（0:未开始，1:进行中，2:已结束，3:已终止，4:终止退款进行中）
    // myReceived 我是否领取过
    // taskFinishStatus 任务完成状态（0:未完成，1:已完成，2:已过期）
    // receiveTimeExpired 是否已经过了红包的领取截止时间
    // endTimestamp 开奖时间

    // ---- 判断结构 ----
    // 如果 红包状态 = 未开始
    //    显示未打开页面 return

    // 如果 我领取过了
    //    如果 任务完成状态 = 未完成
    //         显示任务未完成页面
    //    如果 任务完成状态 = 已经完成
    //        如果 领取到红包金额 = 0 & 红包状态 = 已结束
    //            显示兔子页面
    //        否则如果 红包状态 = 已结束
    //            显示成功页面
    //        如果 红包状态 = 进行中
    //            显示等待结果页面

    //    如果 任务完成状态 = 已经过期
    //        如果 红包状态 = 进行中
    //            显示未打开页面
    //        否则 
    //            显示已经过期页面

    // 如果 我没有领取过 & 红包状态 = 进行中
    //    如果 过了红包的领取截止时间 = true
    //        显示已经过期页面
    //    如果 过了红包的领取截止时间 = false
    //        显示未打开页面

    // 如果 我没有领取过 & 红包状态 = 已结束 ｜ 已终止 ｜ 终止退款进行中
    //    显示过期页面

    // -------- 华丽的分割线 --------
    // 如果 红包状态 = 未开始
    if (state.detail.status == 0) {
        showNotOpenPage()
        return
    }
    // 如果 我领取过了
    if (state.detail.myReceived) {
        state.receiveAmount = state.detail.myReceived.amountValue || 0
        state.detail.taskCondition = JSON.parse(state.detail.taskCondition)
        // 如果 任务完成状态 = 未完成
        if (state.detail.myReceived.taskFinishStatus == 0) {
            // 显示任务未完成页面
            showOpenedPage()
            showOpenedPageReport()
            if (state.process_mode != 'production') {
                getValidity()
            }
            //如果 任务完成状态 = 已经完成
        } else if (state.detail.myReceived.taskFinishStatus == 1) {
            // 领取到空红包 & 红包状态 = 已结束
            if (state.receiveAmount == 0 && state.status == 2) {
                showRabbitPage()
                showRabbitPageReport()
            } else if (state.detail.status == 2) {
                // 显示成功页面
                showSuccessPage()
            }
            // 如果  红包状态 = 进行中
            else if (state.detail.status == 1) {
                // 显示等待结果页面
                showLoadResult()
                open_timer()
            }
            // 如果 任务完成状态 = 已经过期
        } else {
            // 如果 红包状态 = 进行中
            if (state.detail.status == 1) {
                // 显示未打开页面
                showNotOpenPage()
                // 否则 
            } else {
                // 显示已经过期页面
                showCloseEndTimePage()
                showCloseEndTimePageReport()
            }
        }
        // 如果 我没有领取过
    } else {
        // 如果 红包状态 = 进行中
        if (state.detail.status == 1) {
            // 如果 过了红包的领取截止时间 = true
            if (state.detail.receiveTimeExpired) {
                // 显示过期页面      
                showCloseEndTimePage()
                showCloseEndTimePageReport()
                // 如果 过了红包的领取截止时间 = false
            } else {
                // 显示未打开页面
                showNotOpenPage()
            }
            // 红包状态 = 已经结束了 ｜ 已经终止 ｜ 终止退款中
        } else {
            // 显示过期页面
            showCloseEndTimePage()
            showCloseEndTimePageReport()
        }
    }

}

function setFrontConfig() {
    getFrontConfig({
        params: {},
    }).then((res) => {
        if (res.code == 0) {
            facebookAppConfig.facebookAppId = res.data.fbClientId;
        }
    });
};

function init(initParams) {
    let { type } = initParams || {};
    onRuntimeMsg();
    onPageVisbile();
    onWindowMessage();
    setFrontConfig();
    getPostDetail({
        params: {
            postId: state.postId
        }
    }).then((res) => {
        state.loading_show = false
        // 领取0元为空红包继续流程
        // ---- 完成任务接口 ----
        // 如果金额是0
        //    显示没有抽中
        if (res.code == 0) {
            state.srcContent = res.data.srcContent;
            state.postRedirectUrl = res.data.postRedirectUrl;

            // 判断推特id，绑定逻辑
            state.srcContentId = res.data.srcContentId

            if (!state.srcContentId) {
                reSetBindTwtterId(res.data)
                return
            }
            state.detail = JSON.parse(res.data.postBizData)
            state.detail.taskCondition = state.detail.taskCondition || []
            state.tweetId = state.srcContentId;
            state.userId = res.data.srcUserId;
            state.tweet_author = state.detail.postUserInfo && state.detail.postUserInfo.nickName || '';
            // 不要删除这个console
            console.log('postBizData', state.detail)
            checkFacebookReply();
            handleStatusPage()
        } else {
            handleErrorCode(res)
        }
    }).finally(() => {
        state.loading_redbag = false
    })
}

function initTaskDetail() {
    getChromeStorage('userInfo', (_userInfo) => {
        if (_userInfo && _userInfo.uid) {
            // 任务详情
            getTaskDetail({
                params: {
                    postId: state.postId
                }
            }).then((res) => {
                if (res.code.toString()) {
                    for (let i in res.data) {
                        switch (res.data[i].type) {
                            case 1:
                                state.done.follow = res.data[i].finished
                                state.detail.taskCondition[0].relatedUsers = res.data[i].detail
                                break
                            case 2:
                                state.done.like = res.data[i].finished
                                break
                            case 3:
                                state.done.retweet = res.data[i].finished
                                break
                            case 7:
                                state.done.join_discord = res.data[i].finished
                                discordAuthorizeRequired = res.data[i].discordAuthorizeRequired
                                break
                            case 8:
                                state.done.repost_facebook = res.data[i].finished;
                                break;
                            case 9:
                                state.done.reply = res.data[i].finished;
                                if (!state.done.reply) {
                                    onTweetReplyClick({ type: 9 });
                                }
                                break;
                        }
                    }
                } else {
                    handleErrorCode(res)
                }
            })
        }
    })
}

let tab_index = 0
const doTaskReport = (req, sender) => {
    state.loading_show = false
    let follow_name = req.task_data.follow_name || ''
    // 1 Twitter follow Twitter ScreenName
    // 2 Tweet like
    // 3 Retweet
    let event_type = 0
    switch (req.task_type) {
        case 'retweet':
            event_type = 3
            state.done.retweet = req.task_done
            if (!req.task_done && req.do_type == 'api') {
                window.open(`https://twitter.com/intent/retweet?tweet_id=${state.tweetId}`)
            }
            break;
        case 'like':
            event_type = 2
            state.done.like = req.task_done
            // 
            if (!req.task_done && req.do_type == 'api') {
                window.open(`https://twitter.com/intent/like?tweet_id=${state.tweetId}`)
            }
            break
        case 'follow':
            event_type = 1
            // for (let i = 0; i < follow_open_tabs.length; i++) {
            //   if (follow_open_tabs[i].id == sender.tab.id) {
            //     follow_open_tabs.splice(i, 1)
            //     break
            //   }
            // }
            // chrome.tabs.getCurrent((tab) => {
            //   if (follow_open_tabs.length > 0) {
            //     tab_index = follow_open_tabs[follow_open_tabs.length - 1].index
            //   } else {
            //     tab_index = tab.index
            //   }
            //   chrome.tabs.highlight({ windowId: tab.windowId, tabs: tab_index })
            // })
            let has_no_finished = false
            state.detail.taskCondition[0].relatedUsers.forEach((item) => {
                if (follow_name == item.name) {
                    item.finished = req.task_done
                }
            })
            state.detail.taskCondition[0].relatedUsers.forEach((item) => {
                if (!item.finished) {
                    has_no_finished = true
                }
            })
            if (!has_no_finished) {
                state.done.follow = true
                state.done.follow_red = false
                openFollowTabs(state.detail.taskCondition[0].relatedUsers)
            }
            break
    }
    if (req.do_type != 'api') {
        chrome.tabs.remove(sender.tab.id)
    }
    if (req.task_done) {
        addFinishEvent({
            params: {
                eventData: follow_name,
                eventType: event_type,
                luckdropId: state.detail.taskLuckdropId
            }
        })
    }
}

let open_timer_flag = false
// 倒计时开奖
const open_timer = () => {
    if (open_timer_flag) {
        return
    }
    open_timer_flag = true
    let new_time
    let open_time
    let timer = setInterval(() => {
        open_time = state.detail.endTimestamp || ''
        if (!open_time || state.close_status == '没有抽中') {
            return
        }
        new_time = new Date().getTime()
        // 到时间了
        if (new_time >= open_time) {
            // 调用detail 查看结果
            init()
            if (state.open_timer_status == true) {
                clearInterval(timer)
            }
        }
    }, 1000)
}
const showLoadResult = () => {
    state.status = 'close'
    state.close_status = '等待结果'
}

onMounted(() => {
    state.process_mode = process.env.NODE_ENV
    state.postId = getQueryString('postId')
    state.window_origin = getQueryString('window_origin') || '';
    if (state.window_origin.indexOf('twitter.com') > -1) {
        state.tweetId = getQueryString('tweetId')
        state.tweet_author = getQueryString('tweet_author');
    }

    getTweetAuthor()
    init()
    // state.loading_show = true
    // state.status = 'success'
    // state.status = 'close'
    // state.close_status = '等待结果'
    // state.close_status = '没有抽中'
    // state.close_status = '已过期'

})

function getTweetAuthor() {
    if (state.window_origin.indexOf('twitter.com') > -1) {
        window.parent.postMessage({
            actionType: "IFRAME_RED_PACKET_GET_TWEET_AUTHOR", data: {
                postId: state.postId,
                taskLuckdropId: state.detail.taskLuckdropId
            }
        }, "*");
    }
}

function checkFacebookReply() {
    console.log('checkFacebookReply')
    if (state.window_origin.indexOf('twitter.com') > -1) {
        window.parent.postMessage({
            actionType: "IFRAME_RED_PACKET_CHECK_FACEBOOK_REPLY", data: {
                postId: state.postId
            }
        }, "*");
    }
}

// 点击领取
function clickOpenRedPacket() {
    callEventPageMethod('CONTENT_GET_PINED', {})
    handleRedPacket()
}

function handleRedPacket() {
    state.loading_show = true
    getRedPacket({
        params: {
            postId: state.postId
        }
    }).then((res) => {
        state.loading_show = false
        if (res.code == 0) {
            showOpenedPage()
            init()
        } else {
            handleErrorCode(res)
        }
    }).catch(() => {
        state.loading_show = false
    })
    // 埋点
    Report.reportLog({
        pageSource: Report.pageSource.pending_page,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.open_button,
        postId: state.postId,
        srcContentId: state.tweetId,
        senderId: state.userId,
    });
}

chrome.storage.onChanged.addListener(changes => {
    if (changes.userInfo) {
        // let item = JSON.parse(changes.userInfo.newValue)
        state.loading_show = false
        init()
    }
})

// 校验是否封路
function checkIsLogin() {

    return new Promise((resolve) => {
        getChromeStorage('userInfo', (_userInfo) => {
            if (!_userInfo) {
                state.loading_show = true
                setTimeout(() => {
                    state.loading_show = false
                }, 3000)
                chrome.runtime.sendMessage(
                    { actionType: "POPUP_LOGIN", data: "" },
                    (response) => {
                        console.log("res", response);
                    }
                )
                resolve(_userInfo)
            } else {
                resolve(_userInfo)
            }
        })
    })
}

async function clickGetGiveaways() {
    let _userInfo = await checkIsLogin()
    if (_userInfo) {
        handleFinishRedPacket()
    }
}

function handleFinishRedPacket() {
    state.loading_show = true
    finishRedPacket({
        params: {
            postId: state.postId
        }
    }).then((res) => {
        if (res.code == 0) {
            if (res.data.finished) {
                state.receiveAmount = res.data.receiveAmount
                init()
                // 埋点
                Report.reportLog({
                    pageSource: Report.pageSource.task_page,
                    businessType: Report.businessType.buttonClick,
                    objectType: Report.objectType.get_giveaway,
                    postId: state.postId,
                    srcContentId: state.tweetId,
                    senderId: state.userId,
                }, {
                    get_giveaway_result: Report.extParams.success
                });
            } else {
                state.loading_show = false
                let _data = res.data.conditionResult
                for (let i in _data) {
                    switch (_data[i].type.toString()) {
                        case '1':
                            state.detail.taskCondition[0].relatedUsers = _data[i].detail
                            if (_data[i].finished) {
                                state.done.follow = true
                                state.done.follow_red = false
                            } else {
                                // alert('Please complete the task: follow')
                                state.done.follow = false
                                state.done.follow_red = true
                            }
                            break
                        case '2':
                            if (_data[i].finished) {
                                state.done.like = true
                                state.done.like_red = false
                            } else {
                                // alert('Please complete the task: like tweet')
                                state.done.like = false
                                state.done.like_red = true
                            }
                            break
                        case '3':
                            if (_data[i].finished) {
                                state.done.retweet = true
                                state.done.retweet_red = false
                            } else {
                                // alert('Please complete the task: Retweet')
                                state.done.retweet_red = true
                                state.done.retweet = false
                            }
                            break
                        case '7':
                            //join discord
                            discordAuthorizeRequired = _data[i].discordAuthorizeRequired;
                            if (_data[i].finished) {
                                state.done.join_discord = true
                                state.done.join_discord_red = false
                            } else {
                                state.done.join_discord = false;
                                state.done.join_discord_red = true
                            }
                            break
                        case '8':
                            //repost feacebook
                            if (_data[i].finished) {
                                state.done.repost_facebook = true
                                state.done.repost_facebook_red = false
                            } else {
                                state.done.repost_facebook = false;
                                state.done.repost_facebook_red = true
                            }
                            break
                        case '9':
                            //reply
                            if (_data[i].finished) {
                                state.done.reply = true
                                state.done.reply_red = false
                            } else {
                                state.done.reply = false;
                                state.done.reply_red = true
                            }
                            break
                    }
                }
                // 埋点
                Report.reportLog({
                    pageSource: Report.pageSource.task_page,
                    businessType: Report.businessType.buttonClick,
                    objectType: Report.objectType.get_giveaway,
                    postId: state.postId,
                    srcContentId: state.tweetId,
                    senderId: state.userId,
                }, {
                    get_giveaway_result: Report.extParams.failure,
                });
                if (discordAuthorizeRequired) {
                    discordAuth('reAuth');
                }
            }
        } else {
            state.loading_show = false
            // 埋点
            Report.reportLog({
                pageSource: Report.pageSource.task_page,
                businessType: Report.businessType.buttonClick,
                objectType: Report.objectType.get_giveaway,
                postId: state.postId,
                srcContentId: state.tweetId,
                senderId: state.userId,
            }, {
                get_giveaway_result: Report.extParams.failure,
            });
            handleErrorCode(res)
        }
    }).catch(() => {
        state.loading_show = false
    })
}


function handleErrorCode(res) {
    switch (res.code.toString()) {
        // 数据异常,请联系管理员
        case '-102':

            break
        //系统错误
        case '-101':

            break

        // 参数不对
        case '-103':
            break
        // 接口被限流
        case '-105':
            break

        // 访问凭证不存在
        case '-107':
            break
        // 重复操作过于频繁
        case '-106':
            message.error('Clicking too often, wait a moment and click again')
            state.loading_show = false
            break
        // 红包不存在
        case '2001':
            // message.error(res.msg)
            break
        // 还未到红包领取时间
        case '2002':
            // message.error(res.msg)
            break
        // 已超过红包领取时间
        case '2003':
            init()
            break
        // 红包支付状态异常 没有可提交的任务红包
        case '2004':
            init()
            break
        // 红包活动已结束
        case '2006':
            init()
            break
        // 红包金额已经被领取完了
        case '2007':
            state.status = 'close'
            state.close_status = '已经过期了'
            state.close_text = [`This Giveaways`, `expired on ${moment(state.detail.endTimestamp).format('MM-DD')}`]
            init()
            break
        // 红包个数已经被领取完了
        case '2008':
            state.status = 'close'
            state.close_status = '已经过期了'
            state.close_text = [`This Giveaways`, `expired on ${moment(state.detail.endTimestamp).format('MM-DD')}`]
            init()
            break
        // 该用户不满足领取条件
        case '2009':
            state.error_txt = [`oops, new accounts cannot participate in this event,`]
            state.status = 'error'
            state.retry = true
            // 埋点
            Report.reportLog({
                pageSource: Report.pageSource.robot_detection_failed_page,
                businessType: Report.businessType.pageView,
                postId: state.postId,
                srcContentId: state.tweetId,
                senderId: state.userId,
            });
            break
        // 无法校验用户Twitter信息
        case '2010':
            // message.error(res.msg)
            break
        // 用户已经领过该红包
        case '2011':
            // message.error(res.msg)
            break
        // 推文不存在
        case '2022':
            // message.error(res.msg)
            break
        // 推文未发布 and 不是红包任务的推文
        case '2023':
            // message.error(res.msg)
            break
        // 没有可提交的任务红包
        case '2024':
            state.status = 'not-open'
            break
        // 红包任务已完成
        case '2025':
            break
        // 任务已经过期
        case '2026':
            break
        // 任务未完成
        case '2027':
            break
        // 红包金额每人不足1分钱
        case '2028':
            break
        // 推文未发布
        case '2029':
            message.error('Tweet not posted')
            break
        // 不是红包任务的推文
        case '2030':
            break
        case '2037':
            showCloseEndTimePage()
            init()
            break
        //用户没有领取过红包，无法重抽
        case '2031':
            break
        // 需要重新授权 discord
        case '1010':
            discordAuth('reAuth');
            break
    }
}

// function clickBack() {
//   state.status = 'opened'
//   // 埋点
//   Report.reportLog({
//     pageSource: Report.pageSource.task_page,
//     businessType: Report.businessType.pageView,
//   });
// }

// function clickRoad() {
//   state.status = 'luck-peopel-list'
//   // 埋点
//   Report.reportLog({
//     pageSource: Report.pageSource.task_page,
//     businessType: Report.businessType.buttonClick,
//     objectType: Report.objectType.received_list
//   });
//   // 埋点
//   Report.reportLog({
//     pageSource: Report.pageSource.received_list_page,
//     businessType: Report.businessType.pageView
//   });
// }
function onWindowMessage() {
    window.addEventListener("message", function (event) {
        if (event.data) {
            switch (event.data.actionType) {
                case 'CONTENT_RED_PACKET_REPLY_RASK_FINSH':
                    state.done.reply = true;
                    state.done.reply_red = false;
                    break;
                case 'CONTENT_RED_PACKET_GET_TWEET_AUTHOR':
                    fullName = event.data.data.fullName
                    break;
                case 'CONTENT_RED_PACKET_FACEBOOK_REPLY':
                    clickReply(event.data.data)
                    break;
            }
        }
    });
}

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

function onRuntimeMsg() {
    chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
        sendResponse('');
        switch (req.actionType) {
            case 'BACK_DISCORD_LOGIN_SUCCESS':
                discordLoginSuccess();
                break;
            case 'BG_FACEBOOK_SHARE_SUCCESS':
                facebookShareSuccess(req.data);
                break;
            case 'DO_TASK':
                if (!req.task_type || state.tweetId != req.tweet_Id) {
                    return
                }
                state.loading_show = false
                doTaskReport(req, sender);
                break;
            case 'CONTENT_RED_PACKET_REPLY_RASK_FINSH':
                if (req.data && req.data.postId == state.postId) {
                    state.done.reply = true;
                    state.done.reply_red = false;
                }
                break;
        }
    })
}

/**
 * 检查是否加入discord
 */
function checkJoinDiscord() {
    // 如果上次的状态是 joinIng 检查是否真正join
    if (joinDiscordActionState == 'joinIng') {
        joinDiscordActionState = 'default';
        let url = getInviteUrl();
        if (url) {
            joinDiscordIng.value = true;
            checkGuildJoinedStatus({ url }, (res = {}) => {
                joinDiscordIng.value = false;
                if (res.code == 0) {
                    let { joined } = res.data || {};
                    if (joined) {
                        state.done.join_discord = true;
                    } else {
                        state.done.join_discord = false;
                    }
                } else if (res.code == 1010) {
                    discordAuth('reAuth');
                }
            })
        }
    }
}


const checkGuildJoinedStatus = ({ url }, cb) => {
    checkGuildJoined({
        params: {
            inviteUrl: url
        }
    }).then(res => {
        cb && cb(res);
    }).catch(err => {
        cb && cb({ catch: true })
    })
}

/**
 * 加入discord 事件
 */
async function joinDiscord() {
    let _userInfo = await checkIsLogin();
    if (!_userInfo) {
        return
    }
    if (joinDiscordIng.value) {
        return;
    }
    let url = getInviteUrl();
    if (url) {
        joinDiscordIng.value = true;
        checkGuildJoinedStatus({ url }, (res) => {
            setTimeout(() => {
                joinDiscordIng.value = false;
            }, 1500);
            if (res.code == 0) {
                let { joined } = res.data || {};
                if (joined) {
                    state.done.join_discord = true;
                } else {
                    state.done.join_discord = false;
                    if (discordAuthorizeRequired) {
                        discordAuth('authAndJoinIng');
                    } else {
                        openInviteUrl();
                    }
                }
            } else if (res.code == 1010) {
                discordAuth('authAndJoinIng');
            }
            if (res.catch) {
                //判断是否需要授权
                if (discordAuthorizeRequired) {
                    discordAuth('authAndJoinIng');
                } else {
                    openInviteUrl();
                }
            }
        })
    }
}

/**
 * discord授权
 */
function discordAuth(actionState = 'default') {
    let state = guid();
    discordAuthUrl({
        params: {
            redirectUrl: discordAuthRedirectUri,
            state
        }
    }).then(res => {
        if (res.code == 0) {
            let { authorizeUrl = '' } = res.data || {};
            if (authorizeUrl) {
                joinDiscordActionState = actionState;
                const width = 500;
                chrome.windows.create({
                    width,
                    type: 'normal',
                    url: authorizeUrl
                }, function (window) {
                    let windowId = window.id;
                    callEventPageMethod("RED_PACKET_SAVE_DISCORD_AUTH_WINDOW_ID", {
                        windowId: windowId
                    }, function (response) {
                    });
                })
            }
        }
    })
}

/**
 * sendMessage
 */
const callEventPageMethod = (actionType, data, callback) => {
    chrome.runtime.sendMessage(
        {
            actionType: actionType,
            data: data
        },
        function (response) {
            if (typeof callback === "function") callback(response);
        }
    );
};

/**
 * discord 授权成功
 */
function discordLoginSuccess() {
    console.log('discordloginSuccess');
    // 如果是授权并join 默认打开 邀请链接
    if (joinDiscordActionState == 'authAndJoinIng') {
        openInviteUrl();
    }
    if (discordAuthorizeRequired) {
        discordAuthorizeRequired = false;
    }
}

/**
 * 获取discord邀请链接
 */
function getInviteUrl() {
    let inviteData = state.detail.taskCondition.find(item => {
        return item.type == 7;
    });
    let url;
    if (inviteData && inviteData.bizData) {
        url = JSON.parse(inviteData.bizData).inviteUrl;
    }
    return url;
}

/**
 * 打开邀请discord链接
 */
function openInviteUrl() {
    joinDiscordActionState = 'joinIng';
    let url = getInviteUrl();
    if (url) {
        if (!url.startsWith('http')) {
            url = 'https://' + url;
        }
        window.open(url);
    }
}

</script>
 
<style lang="scss" scoped>
html,
body {
    margin: 0;
    padding: 0;
    width: 375px;
    height: 500px;
    background-color: unset !important;
}

: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;
}
.content {
    position: relative;
    width: 375px;
    height: 500px;
    background: #fafafa;
    border-radius: 11px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #DCDCDC;
    font-family: "SF Pro Display";
    font-style: normal;

    .loading {
        background: #FFFFFF;
        opacity: 0.8;
        z-index: 222;
        text-align: center;
        width: 375px;
        height: 500px;
        position: fixed;
        top: 0;
        left: 0;

        img {
            margin-top: 216px;
            width: 70px;
            height: 70px;
        }
    }

    .redbag {
        z-index: 222;
        text-align: center;
        width: 375px;
        height: 500px;
        position: fixed;
        top: 0;
        left: 0;

        img {
            margin-top: 172px;
            width: 130px;
            height: 130px;
        }
    }

    .error {
        width: 100%;
        height: 100%;
        text-align: center;
        position: relative;

        img {
            width: 100px;
            height: 100px;
            margin-top: 100px;
        }

        .txt {
            font-weight: 500;
            font-size: 22px;
            line-height: 26px;
            text-align: center;
            letter-spacing: 0.3px;
            color: #a8a8a8;
            margin: 34px 44px 0 44px;
        }

        .retry {
            position: absolute;
            bottom: 30px;
            left: 50%;
            margin-left: -167.5px;
            width: 335px;
            height: 46px;
            line-height: 46px;
            text-align: center;
            border-radius: 100px;
            border: 1px solid #1D9BF0;
            background: rgba(196, 196, 196, 0.01);
            color: #1D9BF0;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
        }
    }

    .success,
    .close,
    .luck-peopel-list {
        filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
        width: 100%;
        height: 100%;
        border-radius: 11px;
        background: #fff;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .close-title {
            width: 100%;
            font-weight: 600;
            font-size: 27px;
            line-height: 32px;
            text-align: center;
            letter-spacing: 0.3px;

            color: #ffffff;
        }

        .head {
            padding: 14px 16px;

            img {
                cursor: pointer;
                width: 24px;
                height: 24px;
            }
        }

        .header {
            text-align: center;
            min-height: 160px;
            width: 100%;
            background: #fff;
            // padding-top: 30px;
            background-size: 100% 100%;
            position: relative;
            display: flex;
            align-content: center;
            flex-wrap: wrap;

            .rabbit {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                align-content: center;
                flex-wrap: wrap;
                justify-content: center;

                img {
                    width: 150px;
                    height: 80px;
                    margin-bottom: 6px;
                }

                .flower {
                    width: 62px;
                    height: 62px;
                }

                p {
                    width: 100%;
                    margin: 0;
                    padding: 0;
                    font-size: 22px;
                    font-weight: 800;

                    color: #fff;
                    text-align: center;
                    letter-spacing: 0.3px;
                }
            }

            .done {
                cursor: pointer;
                position: absolute;
                top: 107px;
                left: 50%;
                margin-left: -150px;
                width: 300px;
                height: 60px;
                display: flex;
                align-items: center;
                border-radius: 100px;
                background: #ffffff;
                box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
                justify-content: center;

                span {
                    color: #000000;
                    font-size: 14px;
                }

                .icon-done {
                    width: 24px;
                    height: 24px;
                    margin-right: 10px;
                }

                .icon-right {
                    margin-left: 5px;
                    width: 7px;
                    height: 14px;
                }
            }

            .title {
                margin-top: 30px;
                color: #fff7e4;
                opacity: 0.6;

                font-weight: 700;
                font-size: 18px;
                line-height: 21px;
                letter-spacing: -0.3px;
            }

            .money {
                margin-bottom: 30px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 40px;
                    height: 40px;
                    margin-right: 9px;
                    border-radius: 50%;
                    border: solid 2px #fff;
                }

                .big {
                    font-weight: 700;
                    font-size: 46px;
                    line-height: 55px;
                    /* identical to box height */

                    letter-spacing: 0.3px;

                    color: #fff;
                }

                .small {
                    margin-left: 4px;

                    font-weight: 700;
                    font-size: 13px;
                    line-height: 16px;
                    /* identical to box height */

                    letter-spacing: 0.5px;

                    color: #fff;
                }
            }
        }

        .luck-list-title {
            /*      margin-top: 47px;*/
            margin: 0 16px;
            padding: 14px 0 11px 0;
            background: #fff;
            display: flex;
            justify-content: space-between;
            color: #B0B0B0;
            font-weight: 500;
            border-bottom: 1px solid #F2F2F2;

            div:last-child {
                text-align: right;
            }

            .text {
                cursor: pointer;
            }
        }

        .luck-list {
            background: #fff;
            overflow: auto;

            &.max {
                height: 250px;
            }

            .empty {
                width: 100%;
                height: 100%;
                text-align: center;

                img {
                    margin-top: 70px;
                    width: 100px;
                    height: 100px;
                }
            }

            .luck-item {
                display: flex;
                padding: 10px 0;
                margin: 0 16px;
                border-bottom: 1px solid #F2F2F2;
                justify-content: space-between;
                position: relative;
                .win{
                    position: absolute;
                    left:28px;
                    bottom: 7px;
                    width: 20px;
                    height: 20px;
                }
                img:first-child {
                    border-radius: 50%;
                }

                .luck-king {
                    position: absolute;
                    top: 36px;
                    right: 0px;
                    display: flex;
                    align-items: center;

                    img {
                        width: 22px;
                        height: 19px;
                        margin: 0;
                    }

                    span {
                        font-weight: 500;
                        font-size: 12px;
                        line-height: 14px;
                        letter-spacing: 0.3px;
                        color: #f5b945;
                    }
                }

                img {
                    cursor: pointer;
                    width: 42px;
                    height: 42px;
                    margin-right: 12px;
                }

                .luck-content {
                    flex: auto;

                    .luck-title {
                        color: #444444;
                        font-weight: 500;
                        font-size: 16px;
                        letter-spacing: 0.3px;
                        margin-bottom: 5px;
                    }

                    .luck-time {
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 14px;
                        color: #B0B0B0;
                    }
                }

                .luck-money {
                    display: flex;
                    height: 17px;
                    align-items: center;
                    height: 100%;

                    img {
                        width: 14px;
                        height: 14px;
                        margin-right: 6px;
                    }

                    .luck-money-txt {
                        font-weight: 500;
                        font-size: 14px;
                        word-break: break-all;
                        /* identical to box height */

                        text-align: right;
                        letter-spacing: 0.3px;

                        color: #444444;
                    }
                }
            }

            .luck-item:last-child {
                border: 0;
            }
        }


    }

    .close {
        position: relative;

        .load-result {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: flex-start;

            .title {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 36px;

                img {
                    width: 26px;
                    height: 26px;
                    margin-right: 10px;
                }

                span {
                    color: #FFFFFF;
                    font-size: 18px;
                    font-weight: 800;
                    letter-spacing: 0.3px;

                }
            }

            .ticket {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 163px;

                img {
                    width: 250px;
                    height: 103px;
                    animation: myfirst 0.5s;
                }

            }

            .div-ticket {
                position: relative;
                overflow: hidden;
                transition-delay: 1s;
            }

            .div-ticket:after {
                position: absolute;
                right: -100%;
                /*改变left的值，让其相对box影藏*/
                top: 0;
                width: 30%;
                height: 100%;
                content: "";
                /* Safari 5.1 - 6.0 */
                background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 100%);
                /* Opera 11.1 - 12.0 */
                background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 100%);
                /* Firefox 3.6 - 15 */
                background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 100%);
                /* 标准的语法 */
                background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 100%);
                transform: skewX(45deg);
                animation: div_light 1s;
                animation-delay: 0.5s;
            }

            // .div-ticket:hover:after {
            //     right: 150%;
            //     transition: 1s ease;
            // }

            p {
                width: 100%;
                margin: 0;
                padding: 0;
                color: #FCAB40;
                text-align: center;
                letter-spacing: 0.3px;
                font-size: 18px;
                font-weight: 700;

            }

            .time {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 16px;

                img {
                    width: 22px;
                    height: 22px;
                    margin-right: 10px;
                }

                span {
                    font-weight: 800;
                    font-size: 28px;
                    color: #3F3F3F;
                }
            }



            .notification_switch {
                border-top: 1px solid #EFEFEF;
                justify-content: space-between;
                position: absolute;
                height: 48px;
                width: 100%;
                display: flex;
                align-items: center;
                bottom: 0;
                padding: 0 22px 0 16px;

            }
        }
    }



    .success {
        .header {

            min-height: 180px;
            align-content: flex-start;

            .success-title {
                color: #FFFFFF;
                font-weight: 800;
                font-size: 21px;
                line-height: 27px;
                margin-top: 28px;
                text-align: center;
                width: 100%;
            }

            .done {
                top: 130px;
            }
        }

        .luck-list-title {
            margin-top: 10px;
            border-bottom: 1px solid #ECECEC;
        }
    }

    .opened {
        filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 11px;
        overflow: hidden;

        .header {
            text-align: center;
            min-height: 110px;
            width: 100%;
            background: #fff;
            // padding-top: 30px;
            background-size: 100% 100%;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;

            img {
                width: 52px;
                height: 52px;
                margin-right: 14px;
            }

            .txt {
                color: #FFFFFF;
                font-weight: 700;
                font-size: 18px;
                letter-spacing: 0.3px;

                p {
                    margin: 0;
                    padding: 0;
                    text-align: left;
                }
            }
        }

        .list {
            overflow-y: auto;
            padding: 0 16px 0 16px;
            background: #ffffff;
            flex: 1;

            .item {
                display: flex;
                align-items: center;
                // min-height: 50px;
                border-bottom: 1px solid #f0f0f0;
                padding: 12px 0;
                box-sizing: border-box;

                img {
                    width: 24px;
                    height: 24px;
                }

                .red-right {
                    width: 35px;
                    height: 24px;
                }

                .item-content {
                    width: 100%;
                    flex: 1;


                    .item-follow-title {
                        display: flex;
                        align-items: center;
                        margin-top: 20px;
                        margin-bottom: 11px;
                        position: relative;

                        .btn {
                            // position: absolute;
                            // right: 0;
                        }
                    }

                    .item-title {
                        flex: 1;
                        margin-left: 10px;
                        font-weight: 500;
                        font-size: 15px;
                        letter-spacing: 0.3px;
                        color: #000000;
                    }

                    .item-follow-area {
                        display: flex;
                        flex-wrap: wrap;

                        .item-follow {
                            cursor: pointer;
                            border: 1px solid #ebebeb;
                            border-radius: 1000px;
                            height: 26px;
                            margin-right: 5px;
                            margin-bottom: 5px;
                            display: flex;
                            align-items: center;

                            .finished {
                                text-decoration: line-through;
                                color: #949494;
                            }

                            span {
                                margin-left: 8px;
                                margin-right: 2px;
                                color: #1D9BF0;
                                opacity: 1;
                            }

                            img {
                                width: 16px;
                                height: 16px;
                                margin-right: 7px;
                            }
                        }
                    }

                    span {
                        font-weight: 400;
                        font-size: 11px;
                        line-height: 13px;
                        letter-spacing: 0.3px;

                        color: #000000;

                        opacity: 0.4;
                    }
                }

                .btn {
                    width: 90px;
                    height: 29px;
                    line-height: 29px;
                    background: rgba(56, 154, 255, 0.1);
                    border-radius: 500px;
                    text-align: center;
                    letter-spacing: 0.3px;
                    color: #1D9BF0;
                    cursor: pointer;
                }

                .loading-wrapper {
                    width: 90px;
                    text-align: center;

                    .icon-loading {
                        animation: loading 1s infinite linear;
                    }
                }
            }
        }

        .people {
            cursor: pointer;
            padding-left: 16px;
            height: 38px;
            line-height: 38px;
            background: #fff;
            box-shadow: 0px 1px 0px #f2f2f2;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .txt {
                width: 90%;
                font-weight: 400;
                font-size: 12px;
                line-height: 14px;
                letter-spacing: 0.3px;
                color: #000000;
                opacity: 0.4;
            }


        }

        .footer {
            background: #ffffff;
            display: flex;
            padding: 15px 22px 15px 17px;

            .btn {
                background: #1D9BF0;
                border-radius: 100px;
                color: #fff;
                width: 100%;
                height: 48px;
                font-weight: 600;
                font-size: 18px;
                line-height: 48px;
                text-align: center;
                cursor: pointer;
            }

            .grey {
                background: #DDDDDD;
                cursor: auto;
            }
        }
    }

    .not-open {
        width: 100%;
        height: 100%;
        filter: drop-shadow(0px 2px 20px rgba(0, 0, 0, 0.1));
        position: relative;
        overflow: hidden;
        border-radius: 11px;

        .money-area {
            width: 100%;
            position: absolute;
            top: 65px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;

            .mark-area {
                width: 100%;
                display: flex;
                justify-content: center;

                img {
                    width: 16px;
                    height: 16px;
                    margin-right: 4px;
                }

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

                    span {
                        color: #FFFFFF;
                        font-weight: 800;
                        font-size: 17px;
                        letter-spacing: 0.05em;
                        line-height: 22px;


                    }

                }

                .win {
                    display: flex;
                    align-items: center;
                    margin-left: 12px;
                    color: #FFCC4D;
                    letter-spacing: 0.05em;
                    line-height: 22px;
                    font-size: 17px;
                    font-weight: 800;

                }
            }

            .txt {
                font-weight: 800;
                font-size: 16px;
                text-align: center;
                letter-spacing: 0.3px;
                color: #FFFFFF;
            }

            .coin {
                text-align: center;
                margin-top: 6px;
                margin-bottom: 7px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 90%;

                img {
                    width: 46px;
                    height: 46px;
                    border-radius: 50%;
                    border: 3px solid #FFFFFF;
                }

                span {
                    margin-left: 12px;
                    font-weight: 800;
                    font-size: 60px;
                    line-height: 76px;
                    color: #FFFFFF;
                }
            }

            .people {
                font-weight: 800;
                font-size: 13px;
                line-height: 16px;
                letter-spacing: 0.05em;
                text-align: center;
                color: #FFFFFF;
            }
        }

        .title {
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 3;
            display: flex;
            align-items: center;

            img {
                width: 24px;
                height: 24px;
                border: 2px solid #FFF;
                border-radius: 50%;
            }

            span {
                margin-left: 10px;
                font-weight: 600;
                font-size: 16px;
                letter-spacing: 0.3px;
                color: #fff;
            }
        }

        // .txt {
        //   width: 100%;
        //   position: absolute;
        //   font-style: normal;
        //   font-weight: 700;
        //   font-size: 42px;
        //   line-height: 50px;
        //   text-align: center;

        //   color: #FFF2D3;
        //   top: 90px;
        //   z-index: 3;
        // }

        img {
            width: 100%;
        }

        .up {
            position: absolute;
            top: 0;
            // box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1);
            z-index: 1;
        }

        .down {
            position: absolute;
            top: 253px;
        }

        .open {
            width: 335px;
            height: 50px;
            cursor: pointer;
            position: absolute;
            bottom: 28px;
            left: 50%;
            margin-left: -167.5px;
            z-index: 4;
        }

        .open-gif {
            width: 200px;
            height: 200px;
            text-align: center;
            position: absolute;
            bottom: 80px;
            left: 50%;
            margin-left: -100px;
            z-index: 3;
        }
    }

    @keyframes loading {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}


@keyframes div_light {
    0% {
        right: -100%;
    }



    100% {
        right: 150%;
    }
}

@keyframes myfirst {
    0% {
        width: 250px;
        height: 103px;
    }

    50% {
        width: 300px;
        height: 153px;
    }

    100% {
        width: 250px;
        height: 103px;
    }
}

.none {
    display: flex;
    align-item: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
</style>