<template>
  <view
    class="register-success-popup"
    :style="{
      background: themeStore.popup.bgColor,
    }"
    v-if="props.registerSuccesVisible"
  >
    <view
      class="popup-content"
      :style="{
        background: themeStore.whiteBg,
      }"
    >
      <theme-image
        src="@/static/login/close.png"
        mode="scaleToFill"
        class="close-size"
        @click="closePopup('register')"
      />
      <view
        class="popup-content-header"
        :style="{
          color: themeStore.text.normal,
        }"
        >{{ $t("login.header.registerSuccess") }}</view
      >
      <view
        class="popup-content-label m-top-85"
        :style="{
          color: themeStore.text.normal,
        }"
        >{{ $t("login.label.userId") }}</view
      >
      <view
        class="popup-content-value m-top-28"
        :style="{
          background: themeStore.lightGreyBg,
          color: themeStore.text.normal,
        }"
        >{{ userStore.userInfo.id }}</view
      >
      <view
        class="popup-content-label m-top-44"
        :style="{
          color: themeStore.text.normal,
        }"
        >{{ $t("login.label.password") }}</view
      >
      <view
        class="popup-content-value m-top-28"
        :style="{
          background: themeStore.lightGreyBg,
          color: themeStore.text.normal,
        }"
        >{{ userStore.password }}</view
      >
      <view class="btn-list">
        <view
          class="share-btn btn-item"
          :style="{
            background: themeStore.sharBthBg,
          }"
          @click="shareWithSystem(userStore.password)"
        >
          <theme-image
            src="@/static/login/share.png"
            mode="scaleToFill"
            class="share-size"
          />
          <text
            class="btn-text"
            :style="{
              color: themeStore.text.whiteColor,
            }"
            >{{ $t("login.button.share") }}</text
          >
        </view>
        <view
          class="copy-btn btn-item"
          :style="{
            background: themeStore.copyBthBg,
          }"
          @click="copyText({ text: userStore.password })"
        >
          <theme-image
            src="@/static/login/copy.png"
            mode="scaleToFill"
            class="copy-size"
          />
          <text
            class="btn-text"
            :style="{
              color: themeStore.text.whiteColor,
            }"
            >{{ $t("login.button.copy") }}</text
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { copyText, shareWithSystem } from '@/module/utils/system.js'

import { useThemeStore } from "@/store/useThemeStore";
import { useUserStore } from "@/store/useUserStore";
import { useI18n } from "vue-i18n";

const themeStore = useThemeStore().theme.loginV2;
const userStore = useUserStore()
const { t } = useI18n();

const props = defineProps({
  registerSuccesVisible: Boolean
});
const emit = defineEmits(["close-popup"]);
const closePopup = (type) => {
  emit("close-popup", type);
};
</script>

<style lang="scss" scoped>
.register-success-popup {
  width: 100vw;
  height: 100vh;
  //   background: rgba($color: #000000, $alpha: 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  .popup-content {
    width: 629rpx;
    height: 746rpx;
    // background: #ffffff;
    border-radius: 20rpx;
    position: absolute;
    top: 196rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
    box-sizing: border-box;
    padding: 56rpx 30rpx 0 30rpx;
    .close-size {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      top: -17rpx;
      z-index: 102;
      right: -20rpx;
    }
    .popup-content-header {
      width: 100%;
      text-align: center;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 36rpx;
      //   color: #211e21;
    }
    .popup-content-label {
      width: 100%;
      box-sizing: border-box;
      padding-left: 7rpx;
      font-weight: bold;
      font-size: 30rpx;
      //   color: #211e21;
    }
    .popup-content-value {
      width: 100%;
      height: 90rpx;
      //   background: #f0f0f0;
      border-radius: 20rpx;
      box-sizing: border-box;
      padding-left: 35rpx;
      line-height: 90rpx;
      font-weight: bold;
      font-size: 36rpx;
      //   color: #211e21;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .btn-list {
      margin-top: 62rpx;
      box-sizing: border-box;
      padding: 0 25rpx;
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    .btn-item {
      width: 232rpx;
      height: 80rpx;
      border-radius: 40rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      padding-left: 38rpx;
      .share-size {
        width: 38rpx;
        height: 38rpx;
        margin-right: 19rpx;
      }
      .copy-size {
        width: 34rpx;
        height: 34rpx;
        margin-right: 29rpx;
      }
      .btn-text {
        font-weight: bold;
        font-size: 30rpx;
        // color: #ffffff;
      }
    }
    // .share-btn {
    //   background: #e88a35;
    // }
    // .copy-btn {
    //   background: #126e51;
    // }
    .m-top-85 {
      margin-top: 85rpx;
    }
    .m-top-44 {
      margin-top: 44rpx;
    }
    .m-top-28 {
      margin-top: 28rpx;
    }
  }
}
</style>
