<template>
  <div class="visitor">
    <div class="inner_box" @click="close"></div>
    <div class="visitor_login">
      <div class="title">
        账密截图
        <Back />
      </div>
      <!-- 账密 -->
      <div class="account_box">
        <p>
          <span class="left">账号:</span>
          <span class="right">{{ $route.params.userInfo.passport }}</span>
        </p>
        <p>
          <span class="left">密码:</span>
          <span class="right">{{ $route.params.userInfo.password }}</span>
        </p>
      </div>
      <!-- 提示 -->
      <div class="prompt" v-html="$CONFIG.visitorPrompt"></div>
      <!-- 倒计时 -->
      <p
        class="close"
        id="copy"
        ref="copy"
        :data-clipboard-text="`账号:${$route.params.userInfo.passport} 密码:${$route.params.userInfo.password}`"
        @click="close"
      >
        进入游戏
      </p>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import Back from "@/components/Inner/Back"; // 返回
export default {
  name: "Visitor",
  components: {
    Back,
  },
  inject: ["routeLink"],
  data() {
    return {
      clipboard: null, // 复制对象
    };
  },
  props: {
    // 游客账密
    visitorInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  computed: {
    ...mapState(["platform"]),
  },
  watch: {},
  created() {},
  mounted() {
    this.copy();
  },
  beforeDestroy() {
    this.clipboard && this.clipboard.destroy();
  },
  methods: {
    // 进入游戏
    close() {},

    // 复制账密
    copy() {
      this.clipboard = new this.$clipboard("#copy");
      this.clipboard.on("success", () => {
        this.$toast.text("账号密码已复制,请注意保存");

        const { platform } = this;
        // wcfml 忘川伏魔录
        if (platform === "wcfml") {
          // 跳转对应登录链接
          const { userInfo } = this.$route.params;
          const data = this.$utils.getQueryString("data");
          const query = this.$utils.queryStringUtil({
            uid: userInfo.uid,
            data: encodeURIComponent(data),
          });

          // 1. 返回登录页, 因为游戏内点击返回是返回到原来的url
          this.routeLink("Login");

          // 2. 调用wcfml的登录
          window.location.href = `${this.$CONFIG.wcfmlLoginUrl}?${query}`;
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>
.visitor_login {
  width: 700 / @rem;
  height: 480 / @rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -230 / @rem;
  margin-left: -350 / @rem;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;

  .title {
    height: 100 / @rem;
    line-height: 100 / @rem;
    background-color: #3faeed;
    color: #fff;
    font-size: 36 / @rem;
  }

  .hide {
    display: none;
  }

  .account_box,
  .prompt {
    padding: 20 / @rem;
  }
  .account_box {
    p {
      margin: 10 / @rem 20 / @rem;
      font-size: 32 / @rem;
      .left {
        font-weight: bold;
      }
      .right {
        color: #3faeed;
        margin-left: 20 / @rem;
      }
    }
  }
  .prompt {
    color: #f00;
  }
  .close {
    width: 60%;
    margin: 10 / @rem auto 0;
    margin-bottom: 20 / @rem;
    height: 70 / @rem;
    line-height: 70 / @rem;
    border-radius: 10 / @rem;
    background-color: #3faeed;
    color: #fff;
    font-size: 32 / @rem;
    cursor: pointer;
  }
}

@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) {
  .visitor_login {
    width: 350 / @rem;
    height: 300 / @rem;
    margin-top: -150 / @rem;
    margin-left: -175 / @rem;
    overflow-y: auto;

    .title {
      height: 50 / @rem;
      line-height: 50 / @rem;
      font-size: 18 / @rem;
    }
    .account_box,
    .prompt {
      padding: 5 / @rem;
    }
    .account_box {
      margin-top: 20 / @rem;
      padding-bottom: 0;
      p {
        margin-top: 10 / @rem;
        font-size: 16 / @rem;
        .right {
          margin-left: 10 / @rem;
        }
      }
    }
    .close {
      margin: 20 / @rem auto 0;
      height: 35 / @rem;
      line-height: 35 / @rem;
      border-radius: 5 / @rem;
      font-size: 16 / @rem;
      margin-bottom: 10 / @rem;
    }
  }
}
</style>