<template>
  <div>
    <van-swipe
      :loop="false"
      :width="(84 / 375) * width"
      :show-indicators="false"
    >
      <van-swipe-item
        v-for="(item, index) in tgList"
        :key="index"
        @click="goToPage(`/tg?id=${item.id}`)"
      >
        <div class="user-item">
          <img class="phone" :src="item.avatar" />
          <p>{{ item.showName }}</p>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="user-item" @click="goToPage('/MyAttention')">
          <div class="more-img">...</div>
          <p>全部关注</p>
        </div>
      </van-swipe-item>
    </van-swipe>
    <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"
      >
        <ImgTextItem
          v-for="(item, index) in list"
          :key="index"
          :item="item"
          :index="index"
          @click="goToPage(`/videoPlay?id=${item.id}`)"
          @update="updateItem"
        />
        <Empty text="暂无内容" v-if="!list.length" />
      </van-list>
    </van-pull-refresh>
    <!-- <GroupItem />
    <ImgTextItem />
    <ViewPointItem /> -->
    <!-- <VideoItem /> -->
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
// import GroupItem from "./GroupItem.vue";
import ImgTextItem from "./ImgTextItem.vue";
// import ViewPointItem from "./ViewPointItem.vue";
// import VideoItem from "@/components/VideoItem.vue";
import { useWindowSize } from "@vueuse/core";
import { getFollowTgList, queryLivePlan } from "@/api/index";
import Empty from "@/components/Empty.vue";

const { width } = useWindowSize();
const router = useRouter();
const goToPage = (page) => {
  router.push(page);
};

// 获取投顾列表
const tgList = ref([]);
const getTgList = async () => {
  let ret = await getFollowTgList();
  if (ret.code === 0) {
    tgList.value = ret.data;
  }
};
getTgList();

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

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

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
const onLoad = async () => {
  // 异步更新数据
  let ret = await queryLivePlan({
    type: 4,
    size: 10,
    current: current.value,
    lastAuditTime:
      refreshing.value || !list.value.length
        ? ""
        : list.value[list.value.length - 1].auditTime,
    lastCreateTime:
      refreshing.value || !list.value.length
        ? ""
        : list.value[list.value.length - 1].createTime,
    lastStatus:
      refreshing.value || !list.value.length
        ? ""
        : list.value[list.value.length - 1].liveStatus,
  });
  if (ret.code === 0) {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }
    current.value++;
    list.value = list.value.concat(ret.data.list);
    finished.value = !ret.data.hasNext;
  } else {
    loadError.value = true
  }
  loading.value = false;
};

const updateItem = (index) => {
  list.value[index].isFavor = 1;
};
</script>
<style scoped lang="scss">
.user-item {
  img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 12px;
  }
  .more-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #f5f6f7;
    color: #606877;
    font-size: 44px;
    font-weight: 400;
    line-height: 44px;
    margin: 0 auto 12px;
  }
  p {
    color: #666666;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 44px;
  }
}
</style>
