<template>
  <div class="page flex">
    <!-- 左侧内容 -->
    <div class="left">
      <!-- 头像 -->
      <div class="left-one border flex justify-between flex-wrap">
        <div class="avatar">
          <img src="" alt="" />
        </div>
        <div class="info">
          <div class="name">OLO</div>
          <span>{{ userInfo.email }}</span>
          <span
            class="password pointer"
            @click="router.push({ name: 'login', params: { type: 4 } })"
            >{{ $t("account.reSetPwd") }}</span
          >
        </div>
      </div>
      <!-- 剩余次数 -->
      <div class="left-two border">
        <div v-if="currentLan == 'en'" class="number">
          3 Videos Generation Left
        </div>
        <div v-if="currentLan == 'zh-cn'" class="number">
          剩余生成视频次数：3条
        </div>
        <div class="time">{{ $t("account.until") }} 2023/12/31</div>
        <div class="getMore pointer" @click="routerTo('/myStore')">
          {{ $t("account.getMore") }}
        </div>
      </div>
      <!-- 邀请码 -->
      <div class="left-three border flex justify-between">
        <div class="codeImg">
          <img
            ref="codeImgRef"
            src="https://formall.oss-accelerate.aliyuncs.com/1003/dongzhanxiziguoji.png"
            alt=""
          />
        </div>
        <div class="other">
          <div v-if="currentLan == 'en'">
            <span>Invite friends to get</span>
            <span class="bigWord">free</span>
            <span>video</span>
            <span class="bigWord">Generation!</span>
          </div>

          <div v-if="currentLan == 'zh-cn'">
            <span>邀请更多好友</span>
            <span class="bigWord">免费</span>
            <span>生成视频！</span>
            <p>
              邀请码:
              <span id="InviteCodeId">qweiuqkljzxcahdouiahsd</span>
            </p>
          </div>

          <div class="btns">
            <span class="myBtn" @click="copyInviteCode">{{
              $t("account.copyCode")
            }}</span>
            <span class="myBtn" @click="DownloadCodeImg">{{
              $t("account.saveCode")
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧内容 -->
    <div class="right">
      <el-tabs type="border-card" class="tabs">
        <!-- ----------------------------- 1 -->
        <el-tab-pane :label="$t('account.buyHistory')">
          <div class="card scrolly">
            <div class="orderItem" v-for="item in 9" :key="item">
              <p>{{ $t("account.orderID") }}:123456</p>
              <div class="orderItem-content">
                <div class="orderCode"><img src="" alt="" /></div>
                <div class="info">
                  <h5>疯狂星期{{ item }}</h5>
                  <p>{{ $t("account.price") }}：88$</p>
                  <p>{{ $t("account.date") }}：2023/5/2</p>
                </div>
                <div class="state">{{ $t("account.successed") }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- ------------------------ 2 -->
        <el-tab-pane :label="$t('account.inviteHistory')">
          <div class="card scrolly card2">
            <div class="orderItem" v-for="item in 9" :key="item">
              <div class="orderItem-content">
                <div class="orderCode"><img src="" alt="" /></div>
                <div class="info">
                  <h5>张{{ item }}</h5>
                  <p>E-mail:65465468765465@gmail.com</p>
                  <p>{{ $t("account.date") }}：2023/5/2</p>
                </div>
                <div class="state">{{ $t("account.msg1") }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { userInfoPinia } from "@/store/modules/userInfo";

const { locale } = useI18n();
const currentLan = ref(locale);

const userInfo = userInfoPinia();
//#region 二维码区域
// 点击复制邀请码
function copyInviteCode() {
  const inviteCode = document.getElementById("InviteCodeId").innerText;
  navigator.clipboard
    .writeText(inviteCode)
    .then(() => {
      ElMessage.success("邀请码已复制到剪贴板");
    })
    .catch((error) => {
      ElMessage.error("无法复制邀请码:", error);
    });
}
// 下载二维码图片
const codeImgRef = ref();
function DownloadCodeImg() {
  const link = document.createElement("a");
  link.href = codeImgRef.value.src;
  link.download = "image.jpg";
  link.click();
}
//#endregion

const router = useRouter();
function routerTo(url) {
  router.push(url);
}
</script>

<style lang="scss" scoped>
.page {
  height: 1200px;
  padding: 20px 0 0 20px;
  // height: calc(100vh - 84px);
  background-color: #fff;
  border-radius: 25px 0 0;
}

.left {
  width: 35%;
  height: 100%;
  margin-right: 2%;

  .border {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #000;
    border-radius: 5px;
  }

  &-one {
    .avatar {
      width: 80px;
      height: 80px;
      margin-right: 10px;
      background-color: red;
      border-radius: 50%;
    }

    .info {
      flex: 1;

      .name {
        height: 30px;
        margin-top: 10px;
        font-size: 20px;
      }

      .password {
        display: inline-block;
        // float: right;
        padding: 2px 8px;
        border: 1px solid #000;
        border-radius: 5px;
      }
    }
  }

  &-two {
    position: relative;
    height: 80px;

    .number {
      font-size: 30px;
      font-weight: 700;
    }

    .time {
      position: absolute;
      right: 90px;
    }

    .getMore {
      position: absolute;
      top: -1px;
      right: -1px;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background-color: skyblue;
    }
  }

  &-three {
    .codeImg {
      position: relative;
      width: 120px;
      height: 120px;
      margin-right: 10px;
      // background-color: red;
      img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        max-height: 100%;
      }
    }

    .other {
      position: relative;
      flex: 1;

      .btns {
        position: absolute;
        bottom: 10px;
        // padding: 0 80px;
        display: flex;
        justify-content: space-evenly;
        width: 100%;

        .myBtn {
          margin-right: 10px;
        }
      }
    }
  }
}

.right {
  width: 61%;
  height: 800px;
  // height: 95%;
  border: 1px solid #000;

  // element组件样式
  :deep(.el-tabs--border-card) {
    font-size: 20px;
    border: none;
  }

  .tabs {
    height: 760px;
    // height: 100%;
    .card {
      // height: 100%;
      height: 740px;
      padding: 10px;
      // height: 79vh;
      .orderItem {
        width: 100%;
        height: 110px;
        padding: 8px;
        margin-bottom: 10px;
        border: 1px solid #000;
        border-radius: 5px;

        p {
          font-size: 12px;
        }

        &-content {
          display: flex;
          width: 100%;
          // justify-content: space-between;
          .orderCode {
            width: 70px;
            height: 70px;
            background-color: skyblue;
          }

          .info {
            // width: 50%;
            flex: 1;
            margin-left: 10px;

            h5 {
              margin: 0;
            }

            p {
              margin-top: 5px;
            }
          }

          .state {
            margin-right: 30px;
          }
        }
      }
    }

    .card2 {
      .orderItem {
        padding: 20px;

        &-content {
          .orderCode {
            border-radius: 50%;
          }

          .state {
            font-size: 14px;
            line-height: 60px;
          }
        }
      }
    }

    :deep(.el-tabs__item.is-active) {
      color: #fff;
      background-color: #000;
    }

    :deep(.el-tabs__nav) {
      width: 100%;
    }

    :deep(.el-tabs__item) {
      width: 34%;
    }

    :deep(.el-tabs__item:hover) {
      color: #909393;
    }

    :deep(.el-tabs__content) {
      height: 760px;
      // height: calc(100% - 60px);
      padding: 0;
    }
  }
}

// 公共类名
.bigWord {
  font-size: 30px;
  font-weight: 700;
  margin: 0 10px;
}
</style>
