<template>
  <view class="page" id="page">
    <!-- tab栏 -->
    <view class="tabBox">
      <u-tabs
        :list="sexList"
        lineWidth="50"
        lineColor="#ff4f00"
        :itemStyle="{ width: '150rpx', height: '90rpx', padding: '0' }"
        :activeStyle="{ color: '#ff4f00', fontsize: '30rpx' }"
        :inactiveStyle="{ color: '#fff', fontsize: '30rpx' }"
        @click="chooseTab"
      ></u-tabs>
      <view class="moreTabs">
        <!-- <view class="moreIcon" @click="showPopup = true"> 更多 </view> -->
        <view class="moreIcon" @click="showPopup = true"> 更多 </view>
      </view>
    </view>
    <!-- 更多tab弹出层 -->
    <u-popup
      closeable="true"
      mode="top"
      :round="20"
      :show="showPopup"
      @close="closePopup"
      @open="openPopup"
    >
      <view class="popupBox">
        <view class="type">性别</view>
        <view class="typeBox">
          <view
            v-show="item.name"
            class="typeBox-item"
            :class="item.id == sex ? 'itemActive' : ''"
            @click="chooseSex(item)"
            v-for="item in sexList2"
            :key="item.id"
            >{{ item.name }}</view
          >
        </view>
        <view class="type">类型</view>
        <view class="typeBox">
          <view
            v-show="item.name"
            class="typeBox-item"
            :class="item.id == mouldType ? 'itemActive' : ''"
            @click="chooseMouldType(item)"
            v-for="item in mouldTypeList"
            :key="item.id"
            >{{ item.name }}</view
          >
        </view>
      </view>
    </u-popup>
    <!-- 模版选择 -->
    <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>
        <view
          v-if="styleList.length == 0"
          style="width: 100%; text-align: center"
          >暂无数据</view
        >
      </u-list-item>
    </u-list>
  </view>
</template>

<script setup>
//#region 导入
import { ref, watch, onMounted } from "vue";
import { getListApi } from "../../api/closeStyle";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { userInfoModules } from "@/store/modules/userInfo";
const userInfoModulesPinia = userInfoModules();
//#endregion -----------------------

//#region tab栏
// 性别
const sex = ref(2);
const sexList = ref([
  { name: "女", id: 2 },
  { name: "男", id: 1 },
  { name: "单人", id: 3 },
  { name: "多人", id: 4 },
]);
const sexList2 = ref([
  { name: "女", id: 2 },
  { name: "男", id: 1 },
]);

// 类型
const mouldType = ref("");
const mouldTypeList = ref([
  { name: "单人", id: 1 },
  { name: "多人", id: 2 },
]);
// 点击tab
function chooseTab(item) {
  if (item.id < 3) {
    sex.value = item.id;
    mouldType.value = "";
  } else if (item.id == 3) {
    mouldType.value = 1;
    sex.value = "";
  } else if (item.id == 4) {
    mouldType.value = 2;
    sex.value = "";
  }
}
// 更多里的tab 性别
function chooseSex(item) {
  if (sex.value == item.id) {
    if (mouldType.value == "") {
      return;
    } else {
      sex.value = "";
    }
  } else {
    sex.value = item.id;
    mouldType.value = "";
  }
}
// 更多里的tab  类型
function chooseMouldType(item) {
  if (mouldType.value == item.id) {
    if (sex.value == "") {
      return;
    } else {
      mouldType.value = "";
    }
  } else {
    mouldType.value = item.id;
    sex.value = "";
  }
}
//#endregion

//#region 更多tab弹出层
const showPopup = ref(false);
function closePopup() {
  showPopup.value = false;
}
function openPopup() {}
function toCreated() {
  // uni.navigateTo({ url: "/pages/createing/index" });
}
//#endregion -----------------------

//#region 列表加载
const pageNum = ref(1);
const pageSize = ref(20);
// const sex = ref(2); //1男2女
const styleList = ref([]);
// 得到列表
async function getList() {
  try {
    uni.showLoading({
      title: "加载中...",
      mask: true,
    });
    const res = await getListApi(
      pageNum.value,
      pageSize.value,
      sex.value,
      mouldType.value
    );
    styleList.value = res.data.list;
    uni.hideLoading();
  } catch (error) {
    uni.hideLoading();
    uni.showToast({
      title: "获取列表失败，请重试",
      icon: "none",
    });
  }
}
// 监听性别tab变化
watch(
  () => mouldType.value,
  (old) => {
    pageNum.value = 1;
    pageSize.value = 20;
    getList();
  }
);
watch(
  () => sex.value,
  () => {
    pageNum.value = 1;
    pageSize.value = 20;
    getList();
  }
);
getList();
// 触底加载更多
const scrolltolower = async () => {
  try {
    uni.showLoading({
      title: "加载中...",
      mask: true,
    });
    pageNum.value += 1;
    const res = await getListApi(
      pageNum.value,
      pageSize.value,
      sex.value,
      mouldType.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",
        mask: false,
      });
    }
  } 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) {
  uni.navigateTo({
    url: `/pages/createing/index?id=${item.id}`,
  });
  // if (item.mouldType == 1) {
  // } else {
  //   uni.navigateTo({
  //     url: `/pages/closeStyle/multiplayer?id=${item.id}`,
  //   });
  // }
}
//#endregion ---------------------

//#region 页面初始化和卸载
const resetTimer = ref(null);
onMounted(() => {
  window.document.addEventListener("touchstart", () => {
    // 用户点击时，清除之前的定时器
    clearTimeout(resetTimer.value);
    // 重新设定120秒后触发的定时器
    resetTimer.value = setTimeout(() => {
      userInfoModulesPinia.clearStorage();
      window.webview.raiseEvent("pageRefresh", "test_params");
      uni.redirectTo({ url: "/pages/login/index" });
    }, 300000);
  });
  resetTimer.value = setTimeout(() => {
    userInfoModulesPinia.clearStorage();
    window.webview.raiseEvent("pageRefresh", "test_params");
    uni.redirectTo({ url: "/pages/login/index" });
  }, 300000);
});
onUnload(() => {
  uni.hideLoading();
  clearTimeout(resetTimer.value);
});
//#endregion -----------------------
</script>

<style lang="scss" scoped>
// <!-- tab栏 -->
.tabBox {
  position: relative;
  width: 100vw;

  .u-tabs {
    :deep(.u-tabs__wrapper__nav__item__text) {
      font-size: 30rpx;
    }
    // width: calc(100% - 100rpx);
    width: 100%;
    color: #fff !important;
    margin-bottom: 30rpx;
    // :deep(.u-tabs__wrapper__nav__item-7) {
    //   color: #00ff33 !important;
    //   margin-right: 90rpx !important;
    // }
  }
  .moreTabs {
    position: absolute;
    top: 0;
    right: 0;
    width: 200rpx;
    height: 90rpx;
    background: linear-gradient(90deg, transparent 20%, #333 100%);
    // background-color: red;
    .moreIcon {
      margin-left: 50rpx;
      margin-top: 15rpx;
      width: 130rpx;
      height: 60rpx;
      border-radius: 40rpx;
      background-color: #ff4f00;
      text-align: center;
      line-height: 60rpx;
    }
  }
}
// <!-- 更多tab弹出层 -->
.u-popup {
  :deep(.u-popup__content__close--top-right) {
    top: 35rpx;
    right: 35rpx;
  }
  :deep(.uicon-close) {
    font-size: 30rpx !important;
  }
}
.popupBox {
  padding-bottom: 30rpx;
  .type {
    padding: 30rpx 30rpx 0 30rpx;
    color: #000;
    font-weight: 900;
    font-size: 32rpx;
  }
  .typeBox {
    padding: 0 0 0 30rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    color: #1f1212;
    font-size: 26rpx;
    &-item {
      margin-top: 20rpx;
      margin-right: 30rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      // margin: 0 30rpx;
      width: 200rpx;
      border: 2rpx solid #ccc;
      border-radius: 30rpx;
    }
    .itemActive {
      color: #ff4f00;
      border: 2rpx solid #ff4f00;
    }
  }
}
// <!-- 模版选择 -->
.u-list {
  overflow: hidden;
  height: calc(100vh - 200rpx) !important;
  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>
