<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 disable" v-if="helpDetail.helpStatus == 2">
          我已助力
        </div>
        <div class="handle-btn red" @click="support" v-else>为好友助力</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>

    <alert-dialog v-bind.sync="alertOptions"></alert-dialog>
    <fwh-qrcode-dialog v-bind.sync="fwhQrcodeOptions"></fwh-qrcode-dialog>

    <share-select-dialog
      :show.sync="showShareSelectDialog"
      v-show="showShareSelectDialog"
      :memberId="memberId"
      :enterpriseId="enterpriseId"
      :gameId="gameId"
      :shareConditionObj="shareConditionObj"
      @shareWx="shareWx"
      @sharePyq="sharePyq"
    ></share-select-dialog>

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

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

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

export default {
  components: {
    AlertDialog,
    ShareSelectDialog,
    ShareImgDialog,
    FwhQrcodeDialog,
  },
  data() {
    return {
      alertOptions: {},
      game: {},
      helpDetail: {},
      fwhQrcodeOptions: {
        show: false,
        qrcodeUrl: "",
      },
      gameReward: [],
      showShareSelectDialog: false,
      showShareImgDialog: false,
      pyqOptions: {},
      memberId: "",
      enterpriseId: "",
      gameId: "",
      shareConditionObj: {},
    };
  },
  created() {
    document.title = "游戏助力";
    this.manager = new Manager(this);
    this.loadData();
  },
  methods: {
    async loadData() {
      let query = this.$route.query;
      this.memberId = query.memberId;
      this.enterpriseId = query.enterpriseId;
      this.gameId = query.gameId;

      this.getGameInfo();
      this.getGameRule();
      this.getGameReward();
      this.getHelpDetail();
    },
    async getGameInfo() {
      let query = this.$route.query;
      this.game = await getGameInfo({
        enterpriseId: query.enterpriseId,
        gameId: query.gameId,
      });
    },
    async getGameReward() {
      let query = this.$route.query;
      this.gameReward = await getGameReward({
        enterpriseId: query.enterpriseId,
        gameId: query.gameId,
      });
    },
    async getHelpDetail() {
      let query = this.$route.query;
      this.helpDetail =
        (await getHelpDetail({
          enterpriseId: query.enterpriseId,
          shareMemberId: query.shareMemberId,
          gameId: query.gameId,
          helpMemberId: query.memberId || "",
        })) || {};
    },
    async getGameRule() {
      let rule = await getGameRule({
        gameId: this.gameId,
        enterpriseId: this.enterpriseId,
      });
      let gameRuleConditionList = rule.gameRuleConditionList || [];
      gameRuleConditionList.map((item) => {
        let obj = JSON.parse(item.conditionJson);
        if (+obj.type == 11 || +obj.type == 12) {
          this.shareConditionObj = obj;
        }
      });
      this.rule = rule;

      window.wx.miniProgram.postMessage({
        data: {
          shareTitle: rule.shareRuleDesc,
          shareImage: rule.shareImageUrl,
        },
      });
    },
    toPlayGame() {
      let query = this.$route.query;
      this.$router.replace({
        path: "/cmh/1",
        query: {
          gameId: query.gameId,
          memberId: query.memberId || "",
          enterpriseId: query.enterpriseId,
          isAttest: query.isAttest,
        },
      });
    },
    support() {
      this.manager.support();
    },
    async shareWx() {
      let options = this.shareConditionObj;
      let query = this.$route.query;
      let data = {
        gameId: query.gameId,
        enterpriseId: query.enterpriseId,
        memberId: query.shareMemberId,
        shareType: 1,
      };
      await saveGameShare(data).catch(()=>{});
      getGameShareQrCodeUrl(data).then((result) => {
        let linkId = result.linkId;

        this.showShareSelectDialog = false;
        this.manager.shareWx({
          title: options.shareTitle,
          imageUrl: options.shareCard,
          path: `/pages/page-transit/page-transit-qy?scene=${linkId}`,
        });
      }).catch((err) => {
        this.manager.showTips(err.message);
      });
    },
    async sharePyq() {
      let options = this.shareConditionObj;
      let query = this.$route.query;
      let data = {
        gameId: query.gameId,
        enterpriseId: query.enterpriseId,
        memberId: query.shareMemberId,
        shareType: options.type == 12 ? 2 : 1,
      };
      await saveGameShare(data).catch(()=>{});
      getGameShareQrCodeUrl(data).then((result) => {
        this.pyqOptions = {
          bgImage: options.shareReport,
          qrcodeUrl: result.qrCodeUrl,
        };
        this.showShareSelectDialog = false;
        this.showShareImgDialog = true;
      }).catch((err) => {
        this.manager.showTips(err.message);
      });
    },
    async clickShareBtn() {
      await this.manager.checkPlay();
      this.showShareSelectDialog = true;
    },
    shareFwh() {
      let query = this.$route.query;
      getGameShareQrCodeUrl({
        gameId: query.gameId,
        enterpriseId: query.enterpriseId,
        memberId: query.shareMemberId,
        shareType: 2,
      }).then((result) => {
        this.fwhQrcodeOptions = {
          show: true,
          qrcodeUrl: result.qrCodeUrl,
        };
      }).catch((err) => {
        this.manager.showTips(err.message);
      });
    },
  },
};
</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.disable {
  background: #c7c7c7;
}

.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: #21252b;
  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;
  margin: 11px 0 0;

  word-break: break-all;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

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

  word-break: break-all;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

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