<template>
  <div class="menu_wx_gzh">
    <i class="iconfont icon-back" @click="back"></i>
    <div class="title">{{ title }}</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" />
        <img class="tips" :src="CONFIG.wechatInfo.wechatImgTips" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Clipboard from "clipboard";
export default {
  name: "MenuWxGzh",
  components: {},
  data() {
    return {
      title: "关注公众号领福利",
    };
  },
  computed: {
    ...mapState(["CONFIG"]),
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 返回
    back() {
      this.showInnerControl("");
    },

    // 显示哪个组件(工具函数)
    showInnerControl(name) {
      this.$emit("showInnerControl", name);
    },

    /**
     * 复制公众号
     */
    copy() {
      let copyBtn = this.$refs.copyBtn;
      var clipboard = new Clipboard(copyBtn);
      clipboard.on("success", () => {
        this.$toast.text("已复制");
      });
    },
  },
};
</script>

<style lang='less' scoped>
.menu_wx_gzh {
  width: 100%;
  height: 550 / @rem;
  margin-top: -550 / @rem;
  position: absolute;
  top: 100%;
  padding: 20 / @rem;
  border-radius: 30 / @rem 30 / @rem 0 0;
  box-sizing: border-box;
  background-color: #fff;

  .title {
    height: 60 / @rem;
    line-height: 60 / @rem;
    margin-top: 10 / @rem;
    margin-left: 10 / @rem;
    padding-left: 20 / @rem;
    font-size: 36 / @rem;
    font-weight: bold;
    border-left: 4px solid #3faeed;
    text-align: left;
  }

  i {
    float: right;
    font-size: 60 / @rem;
  }

  .close_win_content {
    margin-top: 20 / @rem;
    border-top: 1px solid #e6e6e6;
    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;
  }
  .close_win_qr_code img {
    width: 310 / @rem;
    &.tips {
      width: 115 / @rem;
      margin-left: 10 / @rem;
      position: relative;
      top: -10 / @rem;
    }
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .menu_wx_gzh {
    width: 45%;
    height: 250 / @rem;
    left: 0;
    top: 50%;
    margin-top: -125 / @rem;
    padding: 0 10 / @rem;
    border-radius: 0 20 / @rem 20 / @rem 0;

    .icon-back {
      margin-top: 10 / @rem;
      margin-right: 5 / @rem;
      font-size: 25 / @rem;
    }

    .close_win_content {
      margin-top: 10 / @rem;
    }

    .title {
      height: 30 / @rem;
      line-height: 30 / @rem;
      margin-top: 15 / @rem;
      margin-left: 5 / @rem;
      padding-left: 10 / @rem;
      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;
      &.tips {
        width: 115 / @rem;
        margin-left: 10 / @rem;
        position: relative;
        top: -10 / @rem;
      }
    }
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .menu_wx_gzh {
    width: 350 / @rem;
    height: 260 / @rem;
    left: 50%;
    top: 50%;
    margin-top: -125 / @rem;
    margin-left: -175 / @rem;
    padding: 0 10 / @rem;
    border-radius: 20 / @rem;
    overflow-y: auto;

    .close_win_content {
      margin-top: 10 / @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;
      &.tips {
        width: 125 / @rem;
        margin-left: 10 / @rem;
        position: relative;
        top: 0 / @rem;
      }
    }
  }
}
</style>