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

<!-- 红包任务页面 -->
<template>
  <div class="content">
    <!-- open -->
    <div v-show="state.status == 'opened'" class="opened">
      <!-- <div class="header" :style="{ 'backgroundImage': `url(${require('@/assets/subject/001-back-head-top.svg')})` }">
        <div class="title">AWESOME! YOU WILL GET</div>
        <div class="money">
          <img :src="state.detail.currencyIconPath" alt />
          <font-amount :amount="state.money" class="big" :fontSize="46"></font-amount>
        </div>
      </div> -->

      <div class="header" :style="{ 'backgroundImage': `url(${require('@/assets/subject/001-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">
        <div class="item" v-for="item, i in state.detail.taskCondition" v-bind:key="i">
          <template 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-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([{ name: item2.name }])">
                    <span :class="{ finished: item2.finished }">@{{ item2.name }}</span>
                    <img :src="require('@/assets/svg/icon-add.svg')" alt />
                  </div>
                </template>
              </div>
            </div>
          </template>
          <template v-if="item.type == 2">
            <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>
          </template>
          <template v-if="item.type == 3">
            <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>
          </template>
          <template 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 />
            <div v-else class="btn" @click="joinDiscord">
              Join
            </div>
          </template>
        </div>
      </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="winner">
          <p>Winners</p>
          <div class="right">
            <template v-if="state.detail.allReceived" v-for="item, i in state.detail.allReceived.slice(0, 3)" v-bind:key="i">
              <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt :style="{ left: `${(i) * 16}px`, zIndex: `${10 - i}` }"  />
              <img v-else :src="require('@/assets/svg/icon-twitter.svg')" alt :style="{ left: `${(i) * 16}px`, zIndex: `${10 - i}` }" />              
            </template>
            <img v-if="state.detail.allReceived > 3" :src="require('@/assets/svg/icon-winner-more.svg')" alt
              :style="{ left: `${3 * 16}px`, zIndex: `${10 - 3}` }" />
          </div>
        </div>
        <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/001-back-head-top.svg')})` }">
        <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> {{ state.detail.receiveAmountValue }} / {{ state.detail.amountValue || '' }} {{
            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 />
          <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">{{ showLastTwoPlace(item.amountValue) || 0 }}</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/001-card.png')" alt="">
      <img class="open-gif" :src="require('@/assets/gif/001.gif')" />

      <img :src="require('@/assets/svg/icon-open.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"></font-amount>
        </div>
        <div class="people">{{ state.detail.totalCount }} WINNERS TO SHARE</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> {{ state.detail.receiveAmountValue }} / {{ state.detail.amountValue || '' }} {{
            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 />
          <img v-else :src="require('@/assets/svg/icon-twitter.svg')" 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">{{ showLastTwoPlace(item.amountValue) }}</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/001-back-head-top.svg')})` }"
        v-show="state.close_status == '红包过期了'">
        <div class="close-title" v-for="item in state.close_text">{{ item }}</div>
      </div>
      <!-- 没有领取到钱 -->
      <div class="header" :style="{ 'backgroundImage': `url(${require('@/assets/subject/001-back-head-top.svg')})` }"
        v-show="state.close_status == '没有领到钱'">
        <div class="rabbit">
          <img :src="require('@/assets/subject/001-icon-rabbit.svg')" alt />
          <p>Sorry, you missed this chance</p>
          <p>Come Earlier Next Time!</p>
        </div>
      </div>

      <div class="luck-list-title">
        <div>{{ state.detail.receiveCount || 0 }}/{{ state.detail.totalCount || 0 }} Winners</div>
        <div> {{ state.detail.receiveAmountValue }} / {{ state.detail.amountValue || '' }} {{
            state.detail.currencySymbol || ''
        }}</div>
      </div>

      <div class="luck-list max" @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 />
          <img v-else :src="require('@/assets/svg/icon-twitter.svg')" 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">{{ showLastTwoPlace(item.amountValue) || 0 }}</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></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>
</template>

<script>
export default {
  name: 'redPacket',
}
</script>
<script setup>
import { onMounted, reactive } from "vue";
import { getPostDetail, getRedPacket, finishRedPacket, oneKeyLike, oneKeyReTweet, oneKeyFollow, getTaskDetail, getReceivedList } from '@/http/redPacket.js'
import { getQueryString, guid } 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 { getChromeStorage } from '@/uilts/chromeExtension.js'
import Report from "@/log-center/log"
import { srcPublishSuccess } from '@/http/publishApi'
import { discordAuthUrl, checkGuildJoined } from '@/http/discordApi'
import { discordAuthRedirectUri } from '@/http/configAPI'

var moment = require('moment');

let discordAuthorizeRequired = false;
let joinDiscordActionState = 'default'; //authAndJoinIng  joinIng  reAuth

let state = reactive({
  status: '',
  loading_show: 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
  }
})
function clickRetry() {
  init()
}
async function clickLikeBtn() {
  let _userInfo = await checkIsLogin()
  if (!_userInfo) {
    return
  }
  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
      }
    } else {
      state.done.like = false
      console.log(res)
    }
  })
  // 埋点
  Report.reportLog({
    objectType: Report.objectType.like,
    pageSource: Report.pageSource.task_page,
    businessType: Report.businessType.buttonClick
  });
}
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
  });
}
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.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 {
        state.done.retweet = false
      }
    } else {
      state.done.retweet = false
      console.log(res)
    }
  })
  // 埋点
  Report.reportLog({
    objectType: Report.objectType.retweet,
    pageSource: Report.pageSource.task_page,
    businessType: Report.businessType.buttonClick
  });
}


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

async function clickFollowAll(item, is_all) {
  let _userInfo = await checkIsLogin()
  if (!_userInfo) {
    return
  }
  state.loading_show = true
  let arr_name = []
  for (let i in item) {
    arr_name.push(item[i].name)
  }
  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) {
            item2.finished = true
          }
        });
      })
      let _len = state.detail.taskCondition[0].relatedUsers.filter((item) => { return item.finished == false }).length
      if (_len > 0) {
        state.done.follow = false
      } else {
        state.done.follow = true
      }
    } else {
      state.detail.taskCondition[0].relatedUsers.forEach(item => {
        item.finished = false
      });
    }
  })
  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);

}


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

function showLastTwoPlace(n) {
  return n
}

const showCloseEndTimePage = () => {
  state.status = 'close'
  state.close_status = '红包过期了'
  state.close_text = [`This Giveaways`, `expired on ${moment(state.detail.endTimestamp).format('MM-DD')}`]
  // 埋点
  Report.reportLog({
    pageSource: Report.pageSource.expired_page,
    businessType: Report.businessType.pageView,
  });
}

const showSuccessPage = () => {
  state.status = 'success'
  // 埋点
  Report.reportLog({
    pageSource: Report.pageSource.task_page,
    businessType: Report.businessType.pageView,
    objectType: Report.objectType.get_giveaway
  }, {
    get_giveaway_result: Report.extParams.success
  });
}
const showNotOpenPage = () => {
  state.status = 'not-open'
  Report.reportLog({
    pageSource: Report.pageSource.pending_page,
    businessType: Report.businessType.pageView
  });
}
const showOpenedPage = () => {
  state.status = 'opened'
  state.detail.taskCondition = JSON.parse(state.detail.taskCondition)
  initTaskDetail()
  // 埋点
  Report.reportLog({
    pageSource: Report.pageSource.task_page,
    businessType: Report.businessType.pageView,
  });
}

const showRabbitPage = () => {
  state.status = 'close'
  state.close_status = '没有领到钱'
}

const handleStatusPage = () => {
  // status 红包状态（0:未开始，1:进行中，2:已结束，3:已终止，4:终止退款进行中）
  // myReceived 我是否领取过
  // taskFinishStatus 任务完成状态（0:未完成，1:已完成，2:已过期）
  // receiveTimeExpired 是否已经过了红包的领取截止时间

  // ---- 判断结构 ----
  // 如果 红包状态 = 未开始
  //    显示未打开页面 return
  // 
  // 如果 我领取过了
  //    如果 任务完成状态 = 未完成
  //        显示任务未完成页面
  //    如果 任务完成状态 = 已经完成
  //        如果 领取到红包金额 = 0
  //            显示兔子页面
  //        否则 
  //            显示成功页面
  //    如果 任务完成状态 = 已经过期
  //        显示已经过期页面

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

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

  // -------- 华丽的分割线 --------
  // 如果 红包状态 = 未开始
  if (state.detail.status == 0) {
    showNotOpenPage()
    return
  }
  // 如果 我领取过了
  if (state.detail.myReceived) {
    // 如果 任务完成状态 = 未完成
    if (state.detail.myReceived.taskFinishStatus == 0) {
      // 显示任务未完成页面
      showOpenedPage()
      //如果 任务完成状态 = 已经完成
    } else if (state.detail.myReceived.taskFinishStatus == 1) {
      // 领取到空红包
      if (state.receiveAmount == 0) {
        showRabbitPage()
      } else {
        // 显示成功页面
        showSuccessPage()
      }

      // 如果 任务完成状态 = 已经过期
    } else {
      // 显示已经过期页面
      showCloseEndTimePage()
    }
    // 如果 我没有领取过
  } else {
    // 如果 红包状态 = 进行中
    if (state.detail.status == 1) {
      // 如果 过了红包的领取截止时间 = true
      if (state.detail.receiveTimeExpired) {
        // 显示过期页面      
        showCloseEndTimePage()
        // 如果 过了红包的领取截止时间 = false
      } else {
        // 显示未打开页面
        showNotOpenPage()
      }
      // 红包状态 = 已经结束了 ｜ 已经终止 ｜ 终止退款中
    } else {
      // 显示过期页面
      showCloseEndTimePage()
    }
  }

}

function init() {
  onRuntimeMsg();
  onPageVisbile();
  getPostDetail({
    params: {
      postId: state.postId
    }
  }).then((res) => {
    state.loading_show = false
    // 领取0元为空红包继续流程
    // ---- 完成任务接口 ----
    // 如果金额是0
    //    显示没有领到钱
    if (res.code == 0) {
      // 判断推特id，绑定逻辑
      state.srcContentId = res.data.srcContentId
      if (!state.srcContentId) {
        reSetBindTwtterId(res.data)
        return
      }
      state.detail = JSON.parse(res.data.postBizData)
      console.log(state.detail)
      state.receiveAmount = state.detail.receiveAmountValue || 0
      handleStatusPage()

      // // 红包未开始
      // if (state.detail.status == 0) {
      //   state.status = 'not-open'
      //   Report.reportLog({
      //     pageSource: Report.pageSource.pending_page,
      //     businessType: Report.businessType.pageView
      //   });
      //   return
      //   // 任务进行中
      // } else if (state.detail.status == 1) {
      //   // 我领取过的状态
      //   if (state.detail.myReceived) {
      //     myReceivedState()
      //   } else {
      //     // 任务已经被领完了
      //     if (state.detail.totalCount == state.detail.receiveCount) {
      //       state.status = 'close'
      //       state.close_status = '红包过期了'
      //       state.close_text = ['All the rewards have', 'been taken out, come', 'earlier next time! ']
      //       // 埋点
      //       Report.reportLog({
      //         pageSource: Report.pageSource.been_claimed_page,
      //         businessType: Report.businessType.pageView,
      //       });
      //     } else if (state.detail.receiveTimeExpired) {
      //       // 大红包不可以领取了
      //       state.status = 'close'
      //       state.close_status = '红包过期了'
      //       state.close_text = [`This Giveaways`, `expired on ${moment(state.detail.endTimestamp).format('MM-DD')}`]
      //       // 埋点
      //       Report.reportLog({
      //         pageSource: Report.pageSource.expired_page,
      //         businessType: Report.businessType.pageView,
      //       });
      //     } else {
      //       state.status = 'not-open'
      //       Report.reportLog({
      //         pageSource: Report.pageSource.pending_page,
      //         businessType: Report.businessType.pageView
      //       });
      //     }
      //   }

      //   // 任务已经结束了
      // } else if (state.detail.status == 2 || state.detail.status == 3 || state.detail.status == 4) {
      //   // 我领取过的状态
      //   if (state.detail.myReceived) {
      //     myReceivedState()
      //   } else {
      //     state.status = 'close'
      //     state.close_status = '红包过期了'
      //     state.close_text = [`This Giveaways`, `expired on ${moment(state.detail.endTimestamp).format('MM-DD')}`]
      //     Report.reportLog({
      //       pageSource: Report.pageSource.expired_page,
      //       businessType: Report.businessType.pageView,
      //     });
      //   }
      // }
    } else {
      handleErrorCode(res)
    }
  })
}
function initTaskDetail() {
  // 任务详情
  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:
            discordAuthorizeRequired = res.data[i].discordAuthorizeRequired
            break
        }
      }
    } else {
      handleErrorCode(res)
    }
  })
}
onMounted(() => {
  state.postId = getQueryString('postId')
  state.tweetId = getQueryString('tweetId')
  init()
  // state.loading_show = true
  // state.status = 'opened'
  // state.close_status = '没有领到钱'
})

// 点击领取
function clickOpenRedPacket() {
  chrome.runtime.sendMessage({
    actionType: 'CONTENT_GET_PINED'
  }, res => {
    console.log(res);
  })
  handleRedPacket()
}

function handleRedPacket() {
  getRedPacket({
    params: {
      postId: state.postId
    }
  }).then((res) => {
    if (res.code == 0) {
      showOpenedPage()
    } else {
      handleErrorCode(res)
    }
  })
  // 埋点
  Report.reportLog({
    pageSource: Report.pageSource.pending_page,
    businessType: Report.businessType.buttonClick,
    objectType: Report.objectType.open_button
  });
}

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) => {
    state.loading_show = false
    if (res.code == 0) {
      if (res.data.finished) {
        state.receiveAmount = res.data.receiveAmount
        showSuccessPage()

        // 埋点
        Report.reportLog({
          pageSource: Report.pageSource.task_page,
          businessType: Report.businessType.buttonClick,
          objectType: Report.objectType.get_giveaway
        }, {
          get_giveaway_result: Report.extParams.success
        });
      } else {
        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
              } else {
                // alert('Please complete the task: follow')
                state.done.follow_red = true
              }
              break
            case '2':
              if (_data[i].finished) {
                state.done.like = true
              } else {
                // alert('Please complete the task: like tweet')
                state.done.like_red = true
              }
              break
            case '3':
              if (_data[i].finished) {
                state.done.retweet = true
              } else {
                // alert('Please complete the task: Retweet')
                state.done.retweet_red = true

              }
              break
            case '7':
              discordAuthorizeRequired = _data[i].discordAuthorizeRequired;
              if (_data[i].finished) {
                state.done.join_discord = true
              } else {
                state.done.join_discord_red = true
              }
              break
          }
        }
        // 埋点
        Report.reportLog({
          pageSource: Report.pageSource.task_page,
          businessType: Report.businessType.buttonClick,
          objectType: Report.objectType.get_giveaway
        }, {
          get_giveaway_result: Report.extParams.failure
        });
        if (discordAuthorizeRequired) {
          discordAuth('reAuth');
        }
      }
    } else {
      // 埋点
      Report.reportLog({
        pageSource: Report.pageSource.task_page,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.get_giveaway
      }, {
        get_giveaway_result: Report.extParams.failure
      });
      handleErrorCode(res)
    }
  })
}


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':
      showCloseEndTimePage()
      init()
      break
    // 红包个数已经被领取完了
    case '2008':
      showCloseEndTimePage()
      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,
      });
      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 '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 onPageVisbile() {
  document.addEventListener('visibilitychange', function () {
    let isHidden = document.hidden;
    console.log('joinDiscordActionState', joinDiscordActionState);
    if (!isHidden) {
      checkJoinDiscord();
    }
  });
}

function onRuntimeMsg() {
  chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
    sendResponse('');
    switch (req.actionType) {
      case 'BACK_DISCORD_LOGIN_SUCCESS':
        discordLoginSuccess();
        break;
    }
  })
}

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

/**
 * 加入discord 事件
 */
function joinDiscord() {
  //判断是否需要授权
  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, height = 800;
        chrome.windows.create({
          width,
          height,
          left: 0,
          top: 0,
          type: 'popup',
          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();
  }
}

/**
 * 获取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">
html,
body {
  margin: 0;
  padding: 0;
  width: 375px;
  height: 500px;
  background-color: unset !important;
}

.content {
  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;
    }
  }

  .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: 150px;
      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;
        }

        p {
          margin: 0;
          padding: 0;
          color: #fff;
          text-align: center;
          font-weight: 600;
          font-size: 15px;
          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;
        }

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

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

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

      &.max {
        height: 250px;
      }

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

        img {
          margin-top: 90px;
          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;

        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 {
            font-weight: 500;
            font-size: 16px;
            letter-spacing: 0.3px;
            color: #444444;
          }

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

            color: #9b9b9b;
          }
        }

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

  .success {
    .luck-list-title {
      margin-top: 17px;
      margin-bottom: 11px;
      border-bottom: 1px solid #D1D1D1;
    }
  }

  .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 {
      padding: 0 16px 0 16px;
      background: #ffffff;
      flex: 1;

      .item {
        display: flex;
        align-items: center;
        min-height: 50px;
        border-bottom: 1px solid #f0f0f0;

        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: 16px;
            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;
        }
      }
    }

    .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;

      .winner {
        flex: 1;
        height: 100%;
        background: #fff;
        align-items: center;
        display: flex;
        align-content: center;
        flex-wrap: wrap;

        p {
          color: #959595;
          font-size: 12px;
          margin: 0;
          padding: 0;

        }

        .right {
          width: 100%;
          height: 22px;

          position: relative;

          img {
            position: absolute;
            width: 22px;
            height: 22px;
            border: 2px solid #fff;
            border-radius: 50%;
          }

          .more {
            border: 0;
          }
        }
      }

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

  .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;

      .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: 15px;
          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: 70px;
      left: 50%;
      margin-left: -100px;
      z-index: 3;
    }
  }
}
</style>