<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      v-model:error="loadError"
      :finished="finished"
      finished-text="没有更多了"
      error-text="加载错误，请点击重新加载"
      @load="onLoad"
    >
      <ul class="list">
        <li v-for="(item, index) in list" :key="index" @click="toDetail(item)">
          <img :src="item.imgUrl" alt="" srcset="" />
          <span v-if="item.isRecommend > 0">精选</span>
        </li>
      </ul>
    </van-list>
  </van-pull-refresh>
</template>

<script setup>
import { ref, defineProps } from "vue";
import { useRouter, useRoute } from "vue-router";
import { queryList } from "@/api/shortVideo";

const router = useRouter();
const route = useRoute();
const props = defineProps({
  id: {
    type: String,
  },
});

const list = ref([]);
const loading = ref(false);
const loadError = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
const onLoad = async () => {
  // 异步更新数据
  let ret = await queryList({
    id: props.id,
    size: 10,
    lastId:
      refreshing.value || !list.value.length
        ? ""
        : list.value[list.value.length - 1].id,
    lastPublishTime:
      refreshing.value || !list.value.length
        ? ""
        : list.value[list.value.length - 1].auditTime,
    lastWeight:
      refreshing.value || !list.value.length
        ? ""
        : list.value[list.value.length - 1].isRecommend,
  });
  if (ret.code === 0) {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }
    list.value = list.value.concat(ret.data.list);
    finished.value = !ret.data.hasNext;
  } else {
    loadError.value = true;
  }
  loading.value = false;
};

const toDetail = (item) => {
  router.push(
    `/shotVideoPlay?id=${item.id}&saleUserId=${route.query.saleUserId || ""}`
  );
};
</script>

<style scoped lang="scss">
.list {
  display: flex;
  flex-wrap: wrap;
  li {
    width: calc(33.33% - 14px);
    height: 288px;
    margin-bottom: 20px;
    border-radius: 16px;
    overflow: hidden;
    margin-right: 20px;
    position: relative;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
    span {
      position: absolute;
      left: 0;
      top: 0;
      padding: 8px 12px;
      border-radius: 16px 0px 16px 0px;
      background: linear-gradient(
          91.62deg,
          rgba(233, 170, 122, 1) 0%,
          rgba(165, 103, 51, 1) 132.52%
        ),
        rgba(224, 161, 123, 1);
      color: #fff;
      font-size: 24px;
    }
  }
  li:nth-child(3n) {
    margin-right: 0;
  }
}
</style>
