<template>
  <view :class="pageClass">
    <!-- 背景图 -->
    <!-- <image class="bgc" src="../../assets/img/avatar.png"></image> -->
    <!-- 头像 -->
    <view class="avatarBox">
      <image
        class="avatar"
        src="../../assets/img/avatar.png"
        mode="scaleToFill"
      />
      <view @click="chooseAvatar" class="changeAvatar">
        <image src="../../assets/img/reset.png" mode="aspectFit" />
      </view>
    </view>
    <!-- 金币 -->
    <view class="coinBox">
      我的金币:&nbsp; &nbsp;30
      <text @click="goBuyCoin">购买金币</text></view
    >
    <!-- tab栏 -->
    <view class="tabsBox">
      <view
        class="tabItem"
        v-for="item in tabList"
        :key="item.id"
        :class="showListActive == item.id ? 'active' : ''"
        @click="clickTabHandle(item)"
      >
        {{ item.name }}</view
      >
    </view>
    <!-- 显示风格列表内容 -->
    <scroll-view
      :scroll-y="true"
      v-show="showListActive == 1"
      class="showStyleList"
    >
      <view v-for="item in 7" :key="item" class="showListItem">
        <view class="top">
          <text class="name">风格名称</text>
          <view class="time">
            <text>生成时间</text>
            <!-- 更多 -->
            <view class="moreBox">
              <image src="../../assets/icon/more.png" mode="widthFix" />
            </view>
          </view>
        </view>
        <scroll-view :scroll-x="true" class="imgListBox">
          <view v-for="item in 6" :key="item" class="item">
            <image
              src="../../assets/icon/uploadImg.png"
              class="cover"
              mode="aspectFill"
            ></image>
          </view>
        </scroll-view>
      </view>
    </scroll-view>
    <!-- 显示视频列表内容 -->
    <scroll-view
      :scroll-y="true"
      v-show="showListActive == 2"
      class="showVideoList"
    >
      <view v-for="item in 7" :key="item" class="showListItem">
        <image
          class="showImg"
          src="../../assets/img/avatar.png"
          mode="aspectFit"
        />

        <view class="videoInfo">
          <view class="name">视频名称</view>
          <view class="time">生成时间</view>
        </view>
        <!-- 播放按钮 -->
        <view class="playIcon">
          <image src="../../assets/icon/play.png" mode="aspectFit" />
        </view>
        <!-- 更多 -->
        <view class="moreBox">
          <image src="../../assets/icon/more.png" mode="widthFix" />
        </view>
      </view>
    </scroll-view>
    <!-- 显示邀请列表内容 -->
    <view class="InviteBox" v-show="showListActive == 3">
      <scroll-view :scroll-y="true" class="showInviteList">
        <view v-for="item in 9" class="InviteList">
          <up-avatar :src="avatarUrl" size="50"></up-avatar>
          <view class="info">
            <view class="name">猕猴桃</view>
            <view class="time">2023/7/29</view>
          </view>
          <view class="getCoin"> 金币+2 </view>
        </view>
      </scroll-view>
      <view class="inviteBtn">继续邀请好友</view>
    </view>
    <!-- 显示消费列表内容 -->
    <view v-show="showListActive == 4" class="showOrderList">
      <view class="top">
        <text>名称</text>
        <text>时间</text>
        <text>金币</text>
      </view>
      <scroll-view :scroll-y="true" class="bottom">
        <view class="OrderListItem" v-for="item in 16">
          <view class="name">大西瓜</view>
          <view class="time">2023/7/29 </view>
          <view class="coin">-2金币</view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
//#region 导入

import { ref, reactive, computed } from "vue";
import { voiceTotalApi } from "../../api/login.js";
import { userInfoModules } from "@/store/modules/userInfo";
import imageCompression from "browser-image-compression"; //压缩图片插件
//#endregion

// 定义,杂项
const userInfoModulesPinia = userInfoModules();
const pageClass = computed(() => {
  if (userInfoModulesPinia.platForm == 1) {
    return "page pageH5";
  } else {
    return "page";
  }
});

//#endregion
//#region 头像
const avatarUrl = ref(null);
function chooseAvatar(params) {
  uni.chooseImage({
    count: 1, // 最多可以选择的图片张数，这里设置为1，只选择一张图片
    success: async (res) => {
      // avatarUrl.value = res.tempFilePaths[0];
      // TODO: 在这里处理图片上传逻辑，你可以调用上传接口将图片上传到服务器
      // 示例代码：
      // uploadImageToServer(tempFilePaths[0]);
      // 图片压缩
      console.log(res.tempFiles[0].size);
      if (userInfoModulesPinia.platForm != 1) {
        uni.compressImage({
          src: res.tempFilePaths[0],
          quality: 20,
          success: (res2) => {
            avatarUrl.value = res2.tempFilePath;
            console.log(res2.tempFilePath);
          },
        });
      } else {
        const options = {
          maxSizeMB: 2, // 最大压缩大小为 4MB
          useWebWorker: true, // 使用 Web Worker 进行压缩，提高性能
        };
        const compressedFile = await imageCompression(
          res.tempFiles[0],
          options
        );
        //compressedFile是一个blob对象
        avatarUrl.value = URL.createObjectURL(compressedFile);
        console.log(compressedFile);
        // avatarUrl.value = compressedFile;
        console.log("压缩图片h5");
      }
    },
    fail: (err) => {
      console.error("选择图片失败", err);
    },
  });
}
function goBuyCoin() {
  uni.navigateTo({
    url: "buyCoin",
  });
}
//#endregion

//#region tab
const tabList = ref([
  { name: "我的写真", id: 1 },
  { name: "我的视频", id: 2 },
  { name: "我的邀请", id: 3 },
  { name: "消费记录", id: 4 },
]);
const showListActive = ref(1);
function clickTabHandle(e) {
  showListActive.value = e.id;
}
//#endregion

//#region

//#endregion
</script>

<style lang="scss">
.page {
  position: relative;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  // background: url("../../assets/img/avatar.png");
  .bgc {
    position: absolute;
    width: 750rpx;
    height: 750rpx;
    transform: scale(1.5);
    top: 187rpx;
    left: 0;
    object-fit: cover;
    z-index: -2;
    backdrop-filter: blur(3px);
    // backdrop-filter: blur(20px);
  }
}
.pageH5 {
  height: calc(100vh - 44px);
}
.avatarBox {
  position: relative;
  width: 260rpx;
  height: 260rpx;
  .avatar {
    width: 260rpx;
    height: 260rpx;
    border-radius: 130rpx;
  }
  .changeAvatar {
    position: absolute;
    right: -20rpx;
    bottom: 0;
    width: 66rpx;
    height: 66rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.coinBox {
  margin-top: 38rpx;
  line-height: 50rpx;
  text {
    margin-left: 28rpx;
    display: inline-block;
    width: 160rpx;
    height: 50rpx;
    border-radius: 50rpx;
    font-size: 26rpx;
    text-align: center;
    // font-weight: 700;
    background-color: rgba(255, 255, 255, 0.1);
  }
}
// tab栏样式
.tabsBox {
  display: flex;
  justify-content: space-between;
  margin-top: 50rpx;
  .tabItem {
    margin: 0 9rpx;
    width: 160rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 12rpx;
    background-color: rgba(255, 255, 255, 0.1);
  }
  .active {
    background-color: rgba(255, 79, 0, 1);
  }
}

// 风格列表
.showStyleList {
  flex: 1;
  overflow: hidden;
  margin-top: 30rpx;
  width: 690rpx;
  .showListItem {
    margin-top: 10rpx;
    .top {
      display: flex;
      justify-content: space-between;
      padding: 0 30rpx;
      margin-bottom: 20rpx;
      .name {
        font-weight: 900;
      }
      .time {
        display: inline-block;
        font-size: 22rpx;
        font-weight: 100;
        line-height: 33rpx;
        text {
          margin-right: 50rpx;
        }
        .moreBox {
          display: inline-block;
          width: 8rpx;
          height: 33rpx;
          image {
            vertical-align: top;
            width: 100%;
          }
        }
      }
    }
    .imgListBox {
      white-space: nowrap;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      height: 200rpx;
      .item {
        width: 150rpx;
        height: 200rpx;
        border-radius: 30rpx;
        margin-right: 30rpx;
        display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
        flex-direction: column;
        align-items: center;
        .cover {
          width: 150rpx;
          height: 200rpx;
          border-radius: 30rpx;
        }
      }
    }
  }
}
// 视频列表
.showVideoList {
  flex: 1;
  overflow: hidden;
  margin-top: 30rpx;
  width: 690rpx;
  padding: 15rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  word-break: keep-all;
  .showListItem {
    position: relative;
    display: inline-block;
    width: 330rpx;
    height: 440rpx;
    background-color: #000;
    margin-bottom: 25rpx;
    border-radius: 25rpx;
    overflow: hidden;
    .showImg {
      position: absolute;
      top: 0;
      z-index: 1;
      width: 100%;
    }
    .videoInfo {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100rpx;
      padding: 10rpx 20rpx;
      background-color: red;
      z-index: 2;
      .name {
        font-weight: 900;
        margin-bottom: 10rpx;
      }
      .time {
        font-size: 22rpx;
        font-weight: 100;
      }
    }
    .playIcon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      image {
        width: 72rpx;
        height: 72rpx;
      }
    }
    .moreBox {
      position: absolute;
      top: 23rpx;
      right: 26rpx;
      width: 8rpx;
      height: 33rpx;
      image {
        width: 100%;
      }
    }
  }
  .showListItem:nth-child(odd) {
    margin-right: 30rpx;
  }
}
// 邀请列表
.InviteBox {
  width: 100%;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  .inviteBtn {
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    transform: translate(-50%, 0);
    width: 520rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 30rpx;
    background-color: rgba(255, 79, 0, 1);
    border-radius: 50rpx;
  }
}
.showInviteList {
  position: relative;
  margin-top: 15rpx;
  flex: 1;
  overflow: hidden;
  width: 100%;
  .InviteList {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 12rpx;
    width: 100%;
    height: 120rpx;
    border-radius: 24rpx;
    background-color: rgba(255, 255, 255, 0.1);
    .u-avatar {
      margin: 0 30rpx;
      height: 120rpx !important;
    }
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .name {
        font-weight: bold;
      }
      .time {
        font-size: 22rpx;
      }
    }
    .getCoin {
      width: 145rpx;
      height: 120rpx;
      line-height: 120rpx;
      text-align: center;
      margin-right: 30rpx;
    }
  }
  .InviteList:last-child::after {
    content: "";
    width: 1rpx;
    height: 130rpx;
    padding-bottom: 130rpx;
  }
}
// 消费列表
.showOrderList {
  position: relative;
  flex: 1;
  margin-top: 30rpx;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 24rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 15rpx 20rpx;
  // padding-top: 80rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  .top {
    width: 100%;
    padding: 0 50rpx;
    height: 64rpx;
    line-height: 64rpx;
    border-radius: 40rpx;
    display: flex;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.2);
    font-size: 22rpx;
  }
  .bottom {
    // flex: 1;
    width: 100%;
    overflow: hidden;
    .OrderListItem {
      display: flex;
      justify-content: space-between;
      padding: 0 20rpx;
      height: 65rpx;
      line-height: 65rpx;
      .name,
      .coin {
        font-weight: 900;
      }
      .time {
        font-weight: 100;
      }
    }
  }
}
</style>
