<template>
  <div class="page">
    <u-list
      class="styleListBox"
      @scrolltolower="scrolltolower"
      lowerThreshold="100"
    >
      <u-list-item class="glodYBox">
        <u-list-item
          v-for="item in styleList"
          :key="item.id"
          class="styleListBoxItme"
        >
          <view class="styleInfo" @click="createPhoto(item)">
            <image :src="item.coverImg" mode="aspectFit" />
            <text class="name">{{ item.title }}</text>
            <text class="single">{{ peopleNum(item.mouldType) }}</text>
          </view>
        </u-list-item>
      </u-list-item>
    </u-list>
  </div>
</template>

<script setup>
//#region 导入
import { onPullDownRefresh } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { getListApi } from "../../api/closeStyle";
//#endregion

//#region 页面下拉刷新
// onPullDownRefresh(async () => {
//   uni.showLoading({
//     title: "加载中...",
//     mask: true,
//   });
//   pageNum.value = 1;
//   pageSize.value = 8;
//   styleList.value = [];
//   await getList();
//   uni.hideLoading();
//   uni.stopPullDownRefresh();
// });
//#endregion

//#region 列表加载
const pageNum = ref(1);
const pageSize = ref(20);
const styleList = ref([]);
// 得到列表
async function getList() {
  try {
    const res = await getListApi(pageNum.value, pageSize.value);
    styleList.value = res.data.list;
  } catch (error) {
    uni.showToast({
      title: "获取列表失败，请重试",
      icon: "none",
    });
  }
}
getList();
// 触底加载更多
const scrolltolower = async () => {
  try {
    uni.showLoading({
      title: "加载中...",
      mask: true,
      duration: 2000,
    });
    pageNum.value += 1;
    const res = await getListApi(pageNum.value, pageSize.value);
    styleList.value.push(...res.data.list);
    setTimeout(function () {
      uni.hideLoading();
    }, 500);

    if (res.data.list.length == 0) {
      pageNum.value -= 1;
      uni.showToast({
        title: "已加载全部内容",
        icon: "none",
      });
    }
  } catch (error) {
    setTimeout(function () {
      uni.hideLoading();
    }, 500);
    uni.showToast({
      title: "获取数据失败，请重试",
      icon: "none",
    });
  }
};

// 处理单人双人多人
function peopleNum(num) {
  if (num == 1) {
    return "单人";
  } else if (num == 2) {
    return "双人";
  } else if (num == 3) {
    return "三人";
  }
}
//#endregion ---------------------

//#region 点击图片
function createPhoto(item) {
  if (item.mouldType == 1) {
    uni.navigateTo({
      url: `/pages/closeStyle/goCreatePhoto?id=${item.id}`,
    });
  } else {
    uni.navigateTo({
      url: `/pages/closeStyle/multiplayer?id=${item.id}`,
    });
  }
}
//#endregion ---------------------
</script>

<style lang="scss">
.page {
  background-color: #222527;
}
.u-list {
  width: 650rpx;
  .glodYBox {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }
  .u-list-item {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }
  .styleInfo {
    position: relative;
    display: flex !important;
    flex-wrap: wrap !important;
    width: 300rpx;
    height: 480rpx;
    margin-bottom: 50rpx;
    border-radius: 24rpx;
    overflow: hidden;
    image {
      width: 300rpx;
      height: 400rpx;
    }
    .name {
      background-color: #393b3d;
      width: 100%;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 30rpx;
      font-weight: bold;
    }
    .single {
      position: absolute;
      top: 11rpx;
      right: 13rpx;
      width: 72rpx;
      height: 41rpx;
      text-align: center;
      line-height: 41rpx;
      background: rgba(0, 0, 0, 0.4);
      font-size: 22rpx;
      // opacity: 0.4;
      border-radius: 12rpx;
    }
  }
}
</style>
