<template>
  <div class="box">
    <div class="page-bg" v-if="game && game.gameExt && game.gameExt.bgHelpUrl">
      <img
        :src="game.gameExt.bgHelpUrl"
        class="bg-img"
        mode="widthFix"
      />
    </div>
    <div class="content">
      <div class="content-top">
        <img v-if="game && game.gameExt && game.gameExt.bgBannerHelpUrl"
          :src="game.gameExt.bgBannerHelpUrl"
          class="top-img"
          mode="widthFix"
        />
        <div class="top-tip-box">
          <div class="line left"></div>
          <div class="title">助力好友你也可以参加</div>
          <div class="line right"></div>
        </div>
      </div>
      <div class="content-cell">
        <div class="header-img-box">
          <img :src="helpDetail.shareMemberImage" class="header-img" />
        </div>
        <div class="friend-name">你的好友 {{ helpDetail.shareMemberName }}</div>
        <div class="tip-text">正在请求您的助力</div>
        <div class="handle-btn red" @click="support">为好友助力</div>
        <div class="handle-btn blue" @click="toPlayGame">我要参加游戏</div>
      </div>

      <div class="content-cell" v-if="gameReward && gameReward.length">
        <div class="cell-top">
          <div class="iconfont icon-duobianxing"></div>
          <div class="title">游戏奖品</div>
          <div class="iconfont icon-duobianxing"></div>
        </div>
        <div class="reward-box">
          <div class="reward-item-box" v-for="item in gameReward"  :key="item">
            <div class="reward-item-detail">
              <div class="img-box">
                <img
                  :src="item.prizeImageUrl"
                  class="reward-img"
                  mode="scaleToFit"
                />
              </div>
              <div class="reward-name">{{ item.prizeName }}</div>
              <div class="reward-des">{{ item.prizeDesc }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <share-img-dialog
      :show.sync="showShareImgDialog"
      v-bind="pyqOptions"
    ></share-img-dialog>

    <alert-dialog v-bind.sync="alertOptions"></alert-dialog>
  </div>
</template>

<script>
import { gameRequestApi } from "@/api/common.js";
const {
  getHelpDetail,
  getGameReward,
  getGameInfo,
  getGameShareQrCodeUrl,
} = gameRequestApi;
import AlertDialog from "./components/alert.vue";
import ShareImgDialog from "./components/share-img-dialog.vue";

import { Manager } from "../../manager";

export default {
  components: {
    ShareImgDialog,
    AlertDialog
  },
  data() {
    return {
      alertOptions:{},
      showShareImgDialog: false,
      game:{},
      helpDetail: {},
      gameReward: []
    };
  },
  created() {
    document.title = "游戏助力";
    this.manager = new Manager(this);
    this.loadData();
  },
  methods: {
    async loadData() {
      console.log(this.$route.query);
      let query = this.$route.query;
      this.helpDetail = await getHelpDetail({
        enterpriseId: query.enterpriseId,
        shareMemberId: query.shareMemberId,
        gameId: query.gameId,
        helpMemberId: query.memberId || '',
      });

      this.gameReward = await getGameReward({
        enterpriseId: query.enterpriseId,
        gameId: query.gameId,
      })

      this.game = await getGameInfo({
        enterpriseId: query.enterpriseId,
        gameId: query.gameId,
      })
    },
    toPlayGame() {
      let query = this.$route.query;
      this.$router.replace({
        path: "/cmh/2",
        query: {
          gameId: query.gameId,
          memberId: query.memberId || '',
          enterpriseId: query.enterpriseId,
          isAttest: query.isAttest,
        },
      });
    },
    support(){
      this.manager.support();
    },
    async sharePyq(options) {
      let query = this.$route.query;
      let result = await getGameShareQrCodeUrl({
        gameId: query.gameId,
        enterpriseId: query.enterpriseId,
        memberId: query.shareMemberId || '',
        shareType: options.type == 12 ? 2 : 1,
      });

      this.pyqOptions = {
        bgImage: options.shareReport,
        qrcodeUrl: result.qrCodeUrl,
      };
      this.showShareImgDialog = true;
    },
  },
};
</script>

<style scoped>
.box {
  position: relative;
}

.page-bg {
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #addfcd;
}

.page-bg .bg-img {
  width: 100%;
}

.content {
  position: relative;
  z-index: 1;
}

/* 顶部 */
.content-top {
  text-align: center;
}
.content-top .top-img {
  width: 78%;
  margin: 0 auto;
  padding: 19px 0 10px;
}

.content-top .top-tip-box {
  display: flex;
  margin: 0 auto;
  width: 206px;
  height: 33px;
  box-sizing: border-box;
  border: 1px solid #ffffff;
  color: rgba(255, 255, 255, 0.3);
  align-items: center;
  border-radius: 12px;
}
.content-top .top-tip-box .line {
  width: 11px;
  height: 2px;
  border-radius: 1px;
  margin: 0 7px;
}
.content-top .top-tip-box .line.left {
  background: linear-gradient(270deg, #38bdcd 0%, rgba(56, 189, 205, 0) 100%);
  margin-right: 9px;
}

.content-top .top-tip-box .line.right {
  background: linear-gradient(270deg, rgba(56, 189, 205, 0) 0%, #38bdcd 100%);
  margin-left: 9px;
}

.content-top .top-tip-box .title {
  color: #21252b;
  font-size: 15px;
}
/* 顶部 end */

.content-cell {
  border-radius: 8px;
  border: 1px solid #06b0b2;
  background: white;
  margin: 12px 12px 3px;
  width: calc(100% - 24px);
  box-sizing: border-box;

  text-align: center;
}

/* 好友助力 */
.header-img-box{
  padding: 40px 0 14px;
}
.header-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto;
  overflow: hidden;
}

.friend-name {
  color: #21252b;
  font-size: 16px;
  font-weight: 600;
}

.tip-text {
  color: #21252b;
  font-size: 16px;
  padding-bottom: 22px;
}

.handle-btn {
  width: 75%;
  height: 48px;
  line-height: 48px;
  border-radius: 24px;
  text-align: center;
  box-shadow: inset 0px 3px 3px 0px rgba(255, 255, 255, 0.8);

  color: white;
  font-size: 16px;
  font-weight: 600;
  margin: 0 auto 19px;
}
.handle-btn:last-child {
  margin-bottom: 23px;
}
.handle-btn.red {
  background: #fd452d;
}

.handle-btn.blue {
  background: #12b4bb;
}

/* 好友助力 end */

/* 游戏奖品 */
.cell-top {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: linear-gradient(
    180deg,
    #dff7f4 0%,
    rgba(223, 247, 244, 0.3) 100%
  );
  border-radius: 8px 8px 0 0;
}

.cell-top .title {
  color: #27292b;
  font-size: 17px;
  padding: 0 10px;
  font-weight: 600;
}

.cell-top .iconfont {
  color: #38bdcd;
  font-size: 15px;
}

.reward-box {
  padding: 15px 0 6px;
  display: flex;
  flex-wrap: wrap;
}

.reward-item-box {
  width: calc(50% - 19px);
  padding: 0 6px 12px;
  text-align: left;
}

.reward-item-box:nth-child(2n + 1) {
  padding-left: 13px;
}

.reward-item-box:nth-child(2n + 2) {
  padding-right: 13px;
}

.reward-item-detail {
  background: #f6f6f6;
  border-radius: 4px;
  padding: 6px;
}

.reward-item-detail .img-box {
  padding-top: 100%;
  position: relative;
  background: white;
}

.reward-item-detail .img-box .reward-img {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}

.reward-item-detail .reward-name {
  color: #21252b;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 0 0;
}

.reward-item-detail .reward-des {
  color: #21252b;
  font-size: 11px;
  font-weight: 300;
  padding: 4px 0 7px;
}

/* 游戏奖品 end */
</style>
