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

<!-- 红包任务页面 -->
<template>
  <div class="content">
    <!-- open -->
    <div v-show="data.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="data.detail.currencyIconPath" alt />
          <!-- <span class="big">{{ data.money }}</span> -->
          <font-amount :amount="data.money" class="big" :fontSize="46"></font-amount>
          <!-- <span class="small">{{ data.detail.currencySymbol || '' }}</span> -->
        </div>
      </div>

      <div class="list">
        <div class="item" v-for="item, i in data.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="!data.done.follow && data.done.follow_red" />
                <img v-if="data.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="!data.done.like && data.done.like_red" />
            <img v-if="data.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="!data.done.retweet && data.done.retweet_red" />
            <img v-if="data.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="!data.done.join_discord && data.done.join_discord_red" />
            <img v-if="data.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>
          </template>
        </div>
      </div>
      <div class="people" @click="clickRoad">
        <div class="txt">
          {{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} Winners,{{
              data.detail.receiveAmountValue
          }}/{{ data.detail.amountValue }} {{ data.detail.currencySymbol }}</div>
        <div class="right" v-if="data.detail.allReceived">
          <template v-for="item, i in data.detail.allReceived.slice(0, 3)" v-bind:key="i">
            <img :src="item.simpleUserInfoVO.avatarUrl" alt :style="{ right: `${i * 16 + 14}px` }"
              v-if="item.simpleUserInfoVO.avatarUrl" />
            <img v-else :src="require('@/assets/svg/icon-twitter.svg')" alt :style="{ right: `${i * 16 + 14}px` }" />
          </template>
          <img :src="require('@/assets/svg/icon-right.svg')" alt class="road" />
        </div>
      </div>
      <div class="footer">
        <div class="first">
          <div class="validity">Validity</div>
          <div class="time">{{ data.detail.validity || '' }}</div>
        </div>
        <div class="btn" @click="clickGetGiveaways">Get Giveaways</div>
      </div>
    </div>


    <!-- success -->
    <div v-if="data.status == 'success'" class="success">
      <div class="header" :style="{ 'backgroundImage': `url(${require('@/assets/subject/001-back-head-top.svg')})` }">
        <div class="money">
          <img :src="data.detail.currencyIconPath" alt />
          <font-amount :amount="data.money" class="big" :fontSize="46"></font-amount>
          <!-- <span class="small">{{ data.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>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} Winners</div>
        <div> {{ data.detail.receiveAmountValue }} / {{ data.detail.amountValue || '' }} {{
            data.detail.currencySymbol || ''
        }}</div>
      </div>
      <div class="luck-list max" @scroll="handleScroll($event)">
        <div class="luck-item" v-for="item, i in data.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="data.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="data.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="data.detail.postUserInfo">
        <img :src="data.detail.postUserInfo.avatarUrl" alt />
        <span>{{ data.detail.postUserInfo.nickName || 'FutureDoctor' }}</span>
      </div>
      <div class="money-area">
        <div class="txt">{{ data.detail.currencySymbol }} GIVEAWAY</div>
        <div class="coin">
          <img :src="data.detail.currencyIconPath" alt />
          <font-amount :amount="data.detail.amountValue"></font-amount>
        </div>
        <div class="people">{{ data.detail.totalCount }} WINNERS TO SHARE</div>
      </div>
    </div>


    <!-- 领取列表 -->
    <div v-else-if="data.status == 'luck-peopel-list'" class="luck-peopel-list">
      <div class="head">
        <img :src="require('@/assets/svg/icon-back.svg')" alt @click="clickBack" />
      </div>
      <div class="luck-list-title">
        <div>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} Winners</div>
        <div> {{ data.detail.receiveAmountValue }} / {{ data.detail.amountValue || '' }} {{
            data.detail.currencySymbol || ''
        }}</div>
      </div>
      <div class="luck-list" @scroll="handleScroll">
        <div class="luck-item" v-for="item, i in data.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="data.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="data.status == 'close'" class="close">
      <div class="header" :style="{ 'backgroundImage': `url(${require('@/assets/subject/001-back-head-top.svg')})` }">
        <div class="close-title" v-for="item in data.close_text">{{ item }}</div>
      </div>
      <div class="luck-list-title">
        <div>{{ data.detail.receiveCount || 0 }}/{{ data.detail.totalCount || 0 }} Winners</div>
        <div> {{ data.detail.receiveAmountValue }} / {{ data.detail.amountValue || '' }} {{
            data.detail.currencySymbol || ''
        }}</div>
      </div>
      <div class="luck-list max" @scroll="handleScroll">
        <div class="luck-item" v-for="item, i in data.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="data.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>


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


    <!-- loading -->
    <div v-show="data.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, ref } 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 joinDiscordIng = ref(false);

let data = 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
  }
  data.loading_show = true
  oneKeyLike({
    params: {
      tweetId: data.srcContentId
    }
  }).then((res) => {
    data.loading_show = false
    if (res.code == 0) {
      if (res.data.result) {
        data.done.like = true
      } else {
        data.done.like = false
      }
    } else {
      data.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 (data.luck_list_end) {
    return
  }
  e = e.target
  if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
    data.luck_list_end = true
    data.page_index++
    handleReceivedList()
  }
}
function handleReceivedList() {
  getReceivedList({
    params: {
      pageNum: data.page_index,
      pageSize: data.page_size,
      postId: data.postId
    }
  }).then((res) => {
    if (res.code == 0) {
      if (res.data.length > 0) {
        data.detail.allReceived = data.detail.allReceived.concat(res.data)
        data.luck_list_end = false
      } else {
        data.luck_list_end = true
      }
    } else {
      console.log('getReceivedList', res)
    }
  })
}


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

  data.loading_show = true
  oneKeyReTweet({
    params: {
      tweetId: data.srcContentId
    }
  }).then((res) => {
    data.loading_show = false
    if (res.code == 0) {
      if (res.data.result) {
        data.done.retweet = true
      } else {
        data.done.retweet = false
      }
    } else {
      data.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 (!data.detail.myReceived.taskEndTimestamp) {
    return
  }
  let timer = setInterval(() => {
    let _time = new Date().getTime()
    _d3 = data.detail.myReceived.taskEndTimestamp - _time
    if (_d3 > 0) {
      _d1 = moment(data.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
      }
      data.detail.validity = `${_h}:${_m}:${_s}`
    } else {
      data.detail.validity = `00:00:00`
      clearInterval(timer)
    }
  }, 1000)
}

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

}
// 我领取了的状态
function myReceivedState() {
  data.status = 'opened'
  data.money = data.detail.myReceived.amountValue

  // 我的红包已经过期了 and 大红包可以领取
  if (data.detail.myReceived.taskFinishStatus == 2 && !data.detail.receiveTimeExpired) {
    data.status = 'not-open'

    // 任务已经被领完了
    if (data.detail.totalCount == data.detail.receiveCount) {
      data.status = 'close'
      data.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 (data.detail.myReceived.taskFinishStatus == 0 && data.detail.status == 1) {
    initTaskDetail()
    getValidity()
    data.detail.taskCondition = JSON.parse(data.detail.taskCondition)
    data.detail.amountValue = showLastTwoPlace(data.detail.amountValue)
    data.detail.receiveAmountValue = showLastTwoPlace(data.detail.receiveAmountValue)
    // 埋点
    Report.reportLog({
      pageSource: Report.pageSource.task_page,
      businessType: Report.businessType.pageView,
    });

    // 大红包不能领取了 and  我的红包过期了
  } else if (data.detail.receiveTimeExpired && data.detail.myReceived.taskFinishStatus == 2) {
    data.status = 'close'
    data.close_text = ['This Giveaways', `expired on ${moment(data.detail.endTimestamp).format('MM-DD')}`]
    // 埋点
    Report.reportLog({
      pageSource: Report.pageSource.expired_page,
      businessType: Report.businessType.pageView,
    });
    // 我领取成功了
  } else if (data.detail.myReceived.taskFinishStatus == 1) {
    data.status = 'success'
    // 埋点
    Report.reportLog({
      pageSource: Report.pageSource.received_success_page,
      businessType: Report.businessType.pageView,
    });
  }
}

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

function showLastTwoPlace(n) {
  return n
}
let start_time = new Date().getTime()

function init() {
  onRuntimeMsg();
  onPageVisbile();
  getPostDetail({
    params: {
      postId: data.postId
    }
  }).then((res) => {
    data.loading_show = false
    if (res.code == 0) {
      data.srcContentId = res.data.srcContentId
      if(!data.srcContentId){
        reSetBindTwtterId(res.data)
        return
      }
      data.detail = JSON.parse(res.data.postBizData)

      console.log(data.detail)

      // 红包未开始
      if (data.detail.status == 0) {
        data.status = 'not-open'
        Report.reportLog({
          pageSource: Report.pageSource.pending_page,
          businessType: Report.businessType.pageView
        });
        // 任务进行中
      } else if (data.detail.status == 1) {
        // 我领取过的状态
        if (data.detail.myReceived) {
          myReceivedState()
        } else {
          // 任务已经被领完了
          if (data.detail.totalCount == data.detail.receiveCount) {
            data.status = 'close'
            data.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 (data.detail.receiveTimeExpired) {
            // 大红包不可以领取了
            data.status = 'close'
            data.close_text = [`This Giveaways`, `expired on ${moment(data.detail.endTimestamp).format('MM-DD')}`]
            // 埋点
            Report.reportLog({
              pageSource: Report.pageSource.expired_page,
              businessType: Report.businessType.pageView,
            });
          } else {
            data.status = 'not-open'
            Report.reportLog({
              pageSource: Report.pageSource.pending_page,
              businessType: Report.businessType.pageView
            });
          }
        }

        // 任务已经结束了
      } else if (data.detail.status == 2 || data.detail.status == 3 || data.detail.status == 4) {
        // 我领取过的状态
        if (data.detail.myReceived) {
          myReceivedState()
        } else {
          data.status = 'close'
          data.close_text = [`This Giveaways`, `expired on ${moment(data.detail.endTimestamp).format('MM-DD')}`]
          Report.reportLog({
            pageSource: Report.pageSource.expired_page,
            businessType: Report.businessType.pageView,
          });
        }
      }
    } else {
      handleErrorCode(res)
    }
  })
}
function initTaskDetail() {
  // 任务详情
  getTaskDetail({
    params: {
      postId: data.postId
    }
  }).then((res) => {
    if (res.code.toString()) {
      for (let i in res.data) {
        switch (res.data[i].type) {
          case 1:
            data.done.follow = res.data[i].finished
            data.detail.taskCondition[0].relatedUsers = res.data[i].detail
            break
          case 2:
            data.done.like = res.data[i].finished
            break
          case 3:
            data.done.retweet = res.data[i].finished
            break
          case 7:
            data.done.join_discord = res.data[i].finished
            discordAuthorizeRequired = res.data[i].discordAuthorizeRequired
            break
        }
      }
    } else {
      handleErrorCode(res)
    }
  })
}
onMounted(() => {
  data.postId = getQueryString('postId')
  data.tweetId = getQueryString('tweetId')
  init()
  // data.loading_show = true
})

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

function handleRedPacket() {
  getRedPacket({
    params: {
      postId: data.postId
    }
  }).then((res) => {
    if (res.code == 0) {
      data.status = 'opened'
      data.money = res.data.receiveAmount
      init()
    } 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)
    data.loading_show = false
    init()
  }
})

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

  return new Promise((resolve) => {
    getChromeStorage('userInfo', (_userInfo) => {
      if (!_userInfo) {
        data.loading_show = true
        setTimeout(() => {
          data.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() {
  data.loading_show = true
  finishRedPacket({
    params: {
      postId: data.postId
    }
  }).then((res) => {
    data.loading_show = false
    if (res.code == 0) {
      if (res.data.finished) {
        data.status = 'success'
        data.receiveAmount = res.data.receiveAmount
        // 埋点
        Report.reportLog({
          pageSource: Report.pageSource.task_page,
          businessType: Report.businessType.buttonClick,
          objectType: Report.objectType.get_giveaway
        }, {
          get_giveaway_result: Report.extParams.success
        });
        init()
      } else {
        let _data = res.data.conditionResult
        for (let i in _data) {
          switch (_data[i].type.toString()) {
            case '1':
              data.detail.taskCondition[0].relatedUsers = _data[i].detail
              if (_data[i].finished) {
                data.done.follow = true
              } else {
                // alert('Please complete the task: follow')
                data.done.follow_red = true
              }
              break
            case '2':
              if (_data[i].finished) {
                data.done.like = true
              } else {
                // alert('Please complete the task: like tweet')
                data.done.like_red = true
              }
              break
            case '3':
              if (_data[i].finished) {
                data.done.retweet = true
              } else {
                // alert('Please complete the task: Retweet')
                data.done.retweet_red = true

              }
              break
            case '7':
              discordAuthorizeRequired = _data[i].discordAuthorizeRequired;
              if (_data[i].finished) {
                data.done.join_discord = true
              } else {
                data.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')
      this.loading_show = false
      break
    // 红包不存在
    case '2001':
      // message.error(res.msg)
      break
    // 还未到红包领取时间
    case '2002':
      // message.error(res.msg)
      break
    // 已超过红包领取时间
    case '2003':
      init()
      break
    // 红包支付状态异常 没有可提交的任务红包
    case '2004':
      data.status = 'not-open'
      break
    // 红包活动已结束
    case '2006':
      init()
      break
    // 红包金额已经被领取完了
    case '2007':
      data.status = 'close'
      data.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,
      });
      init()
      break
    // 红包个数已经被领取完了
    case '2008':
      data.status = 'close'
      data.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,
      });
      init()
      break
    // 该用户不满足领取条件
    case '2009':
      data.error_txt = [`oops, new accounts cannot participate in this event,`]
      data.status = 'error'
      data.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':
      data.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() {
  data.status = 'opened'
  // 埋点
  Report.reportLog({
    pageSource: Report.pageSource.task_page,
    businessType: Report.businessType.pageView,
  });
}

function clickRoad() {
  data.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) {
      joinDiscordIng.value = true;
      checkGuildJoinedStatus({url}, (res = {}) => {
        joinDiscordIng.value = false;
        if(res.code == 0) {
          let { joined } = res.data || {};
          if(joined) {
            data.done.join_discord = true;
          }
        } 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;
  } 
  joinDiscordIng.value = true;
  let url = getInviteUrl(); 
  if(url) {
    checkGuildJoinedStatus({url}, (res) => {
      setTimeout(() => {
        joinDiscordIng.value = false;
      }, 1500);
      if(res.code == 0) {
          let { joined } = res.data || {};
          if(joined) {
            data.done.join_discord = true;
          } 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();
  } 
}

/**
 * 获取discord邀请链接
 */
function getInviteUrl () {
  let inviteData = data.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;

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

      .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 {
          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: 150px;
      width: 100%;
      background: #fff;
      // padding-top: 30px;
      background-size: 100% 100%;
      display: flex;
      flex-wrap: wrap;
      align-content: center;

      .title {
        color: #fff;
        opacity: 0.6;
        width: 100%;
        font-weight: 700;
        font-size: 18px;
        line-height: 21px;
        letter-spacing: -0.3px;
        margin-bottom: 10px;
      }

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


        img {
          margin-right: 9px;
          width: 40px;
          height: 40px;
        }

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

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

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

      .right {
        flex: 1;
        cursor: pointer;
        margin-right: 22px;
        display: flex;
        align-items: center;
        position: relative;

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

        .road {
          right: 0;
          width: 7px;
          height: 14px;
        }
      }
    }

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

      .first {
        flex: 1;

        .validity {
          font-weight: 400;
          font-size: 12px;
          line-height: 14px;
          letter-spacing: 0.3px;
          color: #000000;
          opacity: 0.4;
          margin: 2px 0 8px 0;
        }

        .time {
          font-weight: 500;
          font-size: 13px;
          line-height: 16px;
          /* identical to box height */

          color: #000000;
        }
      }

      .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;
    }
  }
  @keyframes loading{
    from{ 
      transform: rotate(0deg);
    } 
    to{
      transform: rotate(360deg);
    }
  }
}
</style>