<template>
  <view :class="pageClass">
    <!-- 背景图 -->
    <!-- <image class="bgc" src="../../assets/img/avatar.png"></image> -->

    <!-- 毛玻璃 -->
    <view class="glass">
      <image src="../../assets/img/homeImg.jpg" mode="scaleToFill" />
    </view>
    <!-- 头像 -->
    <view class="avatarBox">
      <image
        v-if="userInfoModulesPinia.myAvatar"
        class="avatar"
        :src="userInfoModulesPinia.myAvatar"
        mode="aspectFill"
      />
      <image
        v-if="!userInfoModulesPinia.myAvatar"
        class="avatar"
        src="../../assets/img/logo-5.png"
        mode="aspectFill"
      />
      <view @click="chooseAvatar" class="changeAvatar">
        <image src="../../assets/img/reset.png" mode="aspectFit" />
      </view>
    </view>

    <!-- 金币 -->
    <view class="coinBox" v-if="userInfoModulesPinia.token">
      我的金币:&nbsp; &nbsp;{{ userInfoModulesPinia.myGlod }}
      <image src="../../assets/icon/icon.png" mode="scaleToFill" />
      <text class="buyCoinText" @click="goBuyCoin">购买金币</text></view
    >
    <view class="coinBox" v-if="!userInfoModulesPinia.token"
      >登录即可体验更多功能哦！
      <text class="goLogin" @click="goLoginHandel">去登录!</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>
    <!-- 未登录 -->
    <view
      v-if="!userInfoModulesPinia.token"
      class="goLogin"
      style="margin-top: 30rpx"
      @click="goLoginHandel"
    >
      登录体验更多功能
    </view>
    <!-- 显示写真列表内容 -->
    <scroll-view
      @scrolltolower="getMorePhotoList"
      :scroll-y="true"
      v-show="showListActive == 1 && userInfoModulesPinia.token"
      class="showStyleList"
    >
      <view
        v-for="item in PhotoList"
        :key="item.id"
        class="showListItem"
        @click="goLookPhoto(item.id, item.status)"
      >
        <view class="top">
          <text class="name">{{ item.title }}</text>
          <view class="time">
            <text
              >生成时间
              {{ dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss") }}</text
            >
            <!-- 更多 -->
            <view class="moreBox" @click.stop="clickDel(item)">
              <image src="../../assets/icon/more.png" mode="widthFix" />
            </view>
          </view>
        </view>
        <!-- 成功时 -->
        <scroll-view
          v-if="item.status == 2"
          :scroll-x="true"
          class="imgListBox"
        >
          <view v-for="item2 in item.photoList" :key="item2.id" class="item">
            <image :src="item2.image" class="cover" mode="aspectFill"></image>
          </view>
        </scroll-view>
        <!-- 生产中时 -->
        <scroll-view
          v-if="item.status != 2"
          :scroll-x="true"
          class="imgListBox"
        >
          <view class="creating">
            <image
              src="../../assets/img/logo-4.png"
              class="cover"
              mode="widthFix"
            ></image>
            <text>生成中,请稍后</text>
          </view>
        </scroll-view>
      </view>
      <!-- 空处理 -->
      <view v-show="PhotoList.length == 0" class="noData"
        >暂无数据 ,
        <text @click="goCloseStyle" class="goCreate">去生成！</text>
      </view>
    </scroll-view>
    <!-- 显示视频列表内容 -->
    <scroll-view
      :scroll-y="true"
      v-show="showListActive == 2 && userInfoModulesPinia.token"
      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 && userInfoModulesPinia.token"
    >
      <scroll-view :scroll-y="true" class="showInviteList">
        <view v-for="item in 9" :key="item" 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 && userInfoModulesPinia.token"
      class="showOrderList"
    >
      <view class="top">
        <text>名称</text>
        <text>时间</text>
        <text>金币</text>
      </view>
      <scroll-view
        :scroll-y="true"
        class="bottom"
        @scrolltolower="getMoreConsumeList"
      >
        <view class="OrderListItem" v-for="item in ConsumeList" :key="item.id">
          <view class="name">{{ getConsumeName(item.type) }}</view>
          <view class="time">{{
            dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss")
          }}</view>
          <view class="coin">{{ getSymbol(item.type) }}{{ item.goldNum }}</view>
        </view>
        <!-- 空处理 -->
        <view v-show="ConsumeList.length == 0" class="noData">暂无数据</view>
      </scroll-view>
    </view>
    <!-- 弹出层 -->
    <view v-if="showPopup" class="mask">
      <view class="myPopup">
        <image
          @click="showPopup = false"
          src="../../assets/icon/close.png"
          mode="scaleToFill"
        />
        <view class="text">确定要删除这个写真吗?</view>
        <view class="del" @click="deletePhoto">删除</view>
        <view class="cancel" @click="showPopup = false">取消</view>
      </view>
    </view>
  </view>
</template>

<script setup>
//#region 导入
import dayjs from "dayjs";
import {
  onLoad,
  onShareAppMessage,
  onShareTimeline,
  onAddToFavorites,
  onShow,
} from "@dcloudio/uni-app";
import { ref, reactive, computed, inject } from "vue";
// import App from "../../App.vue";
import {
  findImageApi,
  findGlodApi,
  getPhotoListApi,
  getConsumeListApi,
  deleteApi,
} from "../../api/home.js";
import { userInfoModules } from "@/store/modules/userInfo";
import imageCompression from "browser-image-compression"; //压缩图片插件
//#endregion

//#region 定义,杂项
const userInfoModulesPinia = userInfoModules();
const pageClass = computed(() => {
  if (userInfoModulesPinia.platForm == 1) {
    return "page pageH5";
  } else {
    return "page";
  }
});
// console.log(userInfoModulesPinia.token, "token123123");
//#endregion

//#region 头像
const avatarUrl = ref(null);
function chooseAvatar() {
  uni.setStorageSync("action", 1);
  uni.switchTab({
    url: "/pages/uploadPhoto/uploadPhoto",
  });
  return;
}
//#endregion

//#region 路由跳转
function goBuyCoin() {
  if (userInfoModulesPinia.platForm == 3) {
    uni.showToast({
      title: "暂未开放",
      icon: "none",
      mask: true,
    });
  } else {
    uni.navigateTo({
      url: "/pages/index/buyCoin",
    });
  }
}

function goLookPhoto(id, status) {
  if (status != 2) {
    uni.showToast({
      title: "正在生成,请稍后",
      icon: "none",
    });
    return;
  }
  uni.navigateTo({
    url: `/pages/lookPhoto/index?id=${id}`,
  });
}

function goCloseStyle() {
  if (!userInfoModulesPinia.myAvatar) {
    uni.showToast({
      title: "请先上传头像",
      icon: "none",
      mask: true,
    });
  } else {
    uni.navigateTo({
      url: `/pages/closeStyle/closeStyle`,
    });
  }
}

//#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) {
  if (!userInfoModulesPinia.token) {
    return;
  }
  showListActive.value = e.id;

  pageNum1.value = 1;
  pageNum2.value = 1;
  if (e.id == 1) {
    getPhotoList(pageSize1.value, pageNum1.value);
  } else if (e.id == 2) {
  } else if (e.id == 3) {
  } else if (e.id == 4) {
    getConsumeList(pageSize2.value, pageNum2.value);
  }
}
//#endregion

//#region 获取写真列表
const pageSize1 = ref(8);
const pageNum1 = ref(1);
const PhotoList = ref(7);
async function getPhotoList(pageSize, pageNum) {
  try {
    const res = await getPhotoListApi(pageSize, pageNum);
    PhotoList.value = res.data.list;
  } catch (error) {}
}

/**
 * @description:触底加载更多写真列表
 */
async function getMorePhotoList() {
  try {
    pageNum1.value += 1;
    const res = await getPhotoListApi(pageSize1.value, pageNum1.value);
    if (res.data.list.length == 0) {
      pageNum1.value -= 1;
    }
    PhotoList.value.push(...res.data.list);
  } catch (error) {
    uni.showToast({
      title: "获取数据失败，请重试",
      icon: "none",
    });
  }
}
//#endregion 获取图片,金币,

//#region 获取消费记录
const pageSize2 = ref(20);
const pageNum2 = ref(1);
const ConsumeList = ref(20);
async function getConsumeList(pageSize, pageNum) {
  try {
    const res = await getConsumeListApi(pageSize, pageNum);
    ConsumeList.value = res.data.list;
  } catch (error) {}
}

/**
 * @description:触底加载更多消费记录
 */
async function getMoreConsumeList() {
  try {
    pageNum2.value += 1;
    const res = await getConsumeListApi(pageSize2.value, pageNum2.value);
    if (res.data && res.data.list && res.data.list.length == 0) {
      pageNum2.value -= 1;
    }
    ConsumeList.value.push(...res.data.list);
  } catch (error) {
    console.log(error, "error");
    uni.showToast({
      title: "获取数据失败，请重试",
      icon: "none",
    });
  }
}
// 判断消费名称
function getConsumeName(type) {
  if (type == 1) {
    return "注  册";
  } else if (type == 2) {
    return "邀  请";
  } else if (type == 3) {
    return "充值金币";
  } else if (type == 10) {
    return "生成照片";
  } else if (type == 11) {
    return "照片超分";
  }
}
// 判断正负
function getSymbol(type) {
  if ([1, 2, 3].includes(type)) {
    return "+";
  } else {
    return "";
  }
}
//#endregion 获取图片,金币,

const myAvatar = ref(
  "https://suimang.oss-accelerate.aliyuncs.com/capi/2023-08-25/03b58cd2f52c49829435addbf1ec435a.jpg?x-oss-process=image/resize,w_10000/quality,q_60"
);
const myGlod = ref(0);

async function findImage() {
  try {
    const res = await findImageApi();
    myAvatar.value = res.data.image;
  } catch (error) {}
}

async function findGlod() {
  try {
    const res = await findGlodApi();
    if (!res.data) {
      myGlod.value = 0;
    } else {
      myGlod.value = res.data.digitalAvatarResidueGlod;
      userInfoModulesPinia.myGlod = res.data.digitalAvatarResidueGlod
        ? res.data.digitalAvatarResidueGlod
        : 0;
    }
  } catch (error) {}
}
//#region 跳转
function goLoginHandel() {
  uni.navigateTo({
    url: "/pages/login/index",
  });
}
//#endregion ---------------------------

//#region 删除弹出框
const showPopup = ref(false);
const temporarily = ref(null); //暂存的
// const delModalContent = "确定要删除这个写真吗?";
function clickDel(item) {
  showPopup.value = true;
  temporarily.value = item;
}
async function deletePhoto() {
  try {
    const data = {
      id: temporarily.value.id,
    };
    const res = await deleteApi(data);
    pageNum1.value = 1;
    await getPhotoList(pageSize1.value, pageNum1.value);
    showPopup.value = false;
    console.log(res);
    // if (res.data.code == 200) {
    // } else {
    //   uni.showToast({
    //     title: "删除失败，请重试",
    //     icon: "none",
    //   });
    // }
  } catch (error) {
    console.log(error, "删除失败");
  }
}
//#endregion ---------------------------

//#region 初始化和卸载
function init() {
  if (userInfoModulesPinia.token == 1) {
    getPhotoList(pageSize1.value, pageNum1.value);
  } else {
    setTimeout(init, 500); // 继续等待 0.5 秒后再次执行函数
  }
}
onLoad(async () => {
  if (userInfoModulesPinia.token) {
    findGlod();
    getPhotoList(pageSize1.value, pageNum1.value);
    getConsumeList(pageSize2.value, pageNum2.value);
  }
  // setTimeout(() => {
  // findImage();
  // findGlod();
  // getPhotoList();
  // }, 2000);
});

onShow(() => {
  if (userInfoModulesPinia.token) {
    pageNum1.value = 1;
    pageNum2.value = 1;
    findGlod();
    getPhotoList(pageSize1.value, pageNum1.value);
    getConsumeList(pageSize2.value, pageNum2.value);
  }
});

// 分享到朋友圈
// onShareTimeline((res) => {
//   return {
//     title: "邃芒智像",
//   };
// });

// 收藏
// onAddToFavorites((res) => {
//   return {
//     title: "邃芒智像",
//   };
// });

//#endregion ---------------------------
onShareAppMessage((res) => {
  return {
    title: "邃芒智像",
  };
});
//#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;
  image {
    width: 33rpx;
    height: 33rpx;
    vertical-align: middle;
  }
  .buyCoinText {
    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);
  }
}
.goLogin {
  color: #ff4f00;
  text-decoration: underline;
}
// 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: 30rpx;
    .top {
      display: flex;
      justify-content: space-between;
      padding: 0 10rpx;
      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 {
          padding: 0 0 0 40rpx;
          display: inline-block;
          width: 48rpx;
          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;
        }
      }
      .creating {
        position: relative;
        width: 200rpx;
        height: 200rpx;
        border-radius: 30rpx;
        margin-right: 30rpx;
        display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
        flex-direction: column;
        align-items: center;
        .cover {
          width: 200rpx;
          height: 200rpx;
          border-radius: 30rpx;
        }
        text {
          position: absolute;
          top: 50%;
          left: 150%;
          transform: translate(-50%, -50%);
          width: 100%;
          font-weight: 900;
          text-align: center;
          color: #ff4f00;
        }
      }
    }
  }
  .noData {
    text-align: center;
    .goCreate {
      color: #ff4f00;
      text-decoration: underline;
    }
  }
}
// 视频列表
.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;
      // background-color: #393b3d;
      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 50rpx;
      height: 65rpx;
      line-height: 65rpx;
      .name,
      .coin {
        font-weight: 900;
      }
      .time {
        font-weight: 100;
      }
    }
  }
}
// 弹出层遮罩层
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
}
// 弹出层
.myPopup {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600rpx;
  height: 500rpx;
  padding: 30rpx;
  background: #000000;
  border-radius: 24rpx;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  image {
    position: absolute;
    top: -20rpx;
    right: -20rpx;
    width: 70rpx;
    height: 70rpx;
  }
  .text {
    height: 250rpx;
    line-height: 250rpx;
  }
  .del {
    width: 70%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 80rpx;
    background-color: #ff4f00;
    margin-bottom: 30rpx;
  }
  .cancel {
    width: 70%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 80rpx;
    border: #ff4f00 2rpx solid;
  }
}
</style>
