<template>
  <!-- 退出弹窗 -->
  <div v-show="isShowExitGame" class="close_win_shade">
    <div class="close_win_box">
      <div class="close_win_title">
        <span>退出确定</span>
      </div>
      <div v-if="CONFIG.wechatInfo" class="close_win_content">
        <div @click="copy" class="close_win_copy">
          公众号：{{ CONFIG.wechatInfo.wechatName }}
          <span
            ref="copyBtn"
            :data-clipboard-text="CONFIG.wechatInfo.wechatName"
            >(点击复制)</span
          >
        </div>
        <div class="close_win_hint">
          <span>搜索关注公众号</span>
          <span>无需下载即可登录游戏</span>
        </div>
        <div class="close_win_qr_code">
          <img :src="CONFIG.wechatInfo.wechatImg" />
        </div>
      </div>
      <div class="close_win_btn">
        <div class="close_win_btn_l" @click="outGame">
          <span>退出游戏</span>
        </div>
        <div class="close_win_btn_r" @click="goOnGame">
          <span>继续游戏</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Clipboard from "clipboard";
import wx from "weixin-js-sdk";
export default {
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState(["CONFIG", "isShowExitGame"]),
  },
  watch: {},
  created() {},
  mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
  },
  destroyed() {
    window.removeEventListener("popstate", this.goBack, false);
  },
  methods: {
    ...mapActions(["isShowExitGameAction"]),
    /**
     * 复制公众号
     */
    copy() {
      let copyBtn = this.$refs.copyBtn;
      var clipboard = new Clipboard(copyBtn);
      clipboard.on("success", () => {
        this.$toast.text("已复制");
      });
    },

    /**
     * 退出游戏
     */
    outGame() {
      window.location.href = "about:blank";
      wx.closeWindow();
    },

    /**
     * 继续游戏
     */
    goOnGame() {
      this.isShowExitGameAction(false);
    },

    /**
     * 返回按钮
     */
    goBack() {
      history.pushState(null, null, document.URL);
      window.android && window.android.exit();
      this.isShowExitGameAction(true);
    },
  },
};
</script>

<style lang="less" scoped>
/* 退出弹窗遮罩层  */
.close_win_shade {
  width: 100%;
  height: 100%;
  z-index: 9;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.75);

  /* 退出提示弹窗 */
  .close_win_box {
    width: 600 / @rem;
    height: 600 / @rem;
    position: relative;
    background: #fff;
    border-radius: 5px;
    font-size: 30 / @rem;
    overflow: hidden;
  }
}

.close_win_title {
  height: 100 / @rem;
  line-height: 100 / @rem;
  background-color: #3faeed;
  border-radius: 5px 5px 0 0;
  span {
    color: #fff;
    font-size: 38 / @rem;
  }
}
.close_win_content {
  flex: 1;
}
.close_win_copy {
  height: 70 / @rem;
  line-height: 70 / @rem;
  color: #ff0000;
  text-align: center;
}
.close_win_copy span {
  height: 70 / @rem;
  line-height: 70 / @rem;
  padding-left: 20 / @rem;
  color: #ff0000;
}
.close_win_hint span {
  color: #333;
  height: 40 / @rem;
  line-height: 40 / @rem;
}
.close_win_qr_code img {
  width: 305 / @rem;
}
.close_win_btn {
  height: 80 / @rem;
  line-height: 80 / @rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  border-top: 1px solid #ccc;
  border-radius: 0 0 0.1rem 0.1rem;
  box-sizing: border-box;
}
.close_win_btn_l,
.close_win_btn_r {
  flex: 1;
}
.close_win_btn_r {
  border-left: 1px solid #ccc;
}
.close_win_btn_l span {
  color: #333;
}
.close_win_btn_r span {
  color: #3faeed;
}
// 横屏
@media screen and (orientation: landscape),
  /**竖屏 */ all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad */ all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .close_win_shade {
    /* 退出提示弹窗 */
    .close_win_box {
      width: 300 / @rem;
      height: 270 / @rem;
      font-size: 15 / @rem;
    }
  }

  .close_win_title {
    height: 40 / @rem;
    line-height: 40 / @rem;
    span {
      font-size: 18 / @rem;
    }
  }

  .close_win_copy {
    height: 35 / @rem;
    line-height: 35 / @rem;
  }
  .close_win_copy span {
    height: 35 / @rem;
    line-height: 35 / @rem;
    padding-left: 10 / @rem;
  }

  .close_win_qr_code img {
    width: 135 / @rem;
  }

  .close_win_hint span {
    color: #333;
    height: 20 / @rem;
    line-height: 20 / @rem;
  }

  .close_win_btn {
    height: 38 / @rem;
    line-height: 38 / @rem;
  }
}
</style>
