<template>
  <div class="help-list" ref="helpListRef" @scroll="onScroll">
    <div v-if="list.length">
      <div class="block" v-for="(item, index) in list" :key="index">
        <span>{{ item.nickname }}</span>
        <span>acabou de sacar</span>
        <span class="flex-ct">
          <h-img
            width="0.5rem"
            style="margin-right: 0.1rem"
            src="base/JB_R$.png"
          />
          {{ item.help2Progress / 100 }}
        </span>
      </div>
    </div>
    <van-empty description="No Card" image-size="100" v-else />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { useBaseStore } from "@/stores/modules/base";
const userStore = useUserStore();
const baseStore = useBaseStore();

interface DataProps {
  _id: string;
  uid: number;
  pageIndex: number;
  pageSize: number;
}

const props = defineProps({
  myTask: { type: Object, default: {}, required: true },
});

const data = reactive<DataProps>({
  _id: props.myTask._id,
  uid: userStore.userInfo.uid,
  pageIndex: 1,
  pageSize: 10,
});

const helpListRef = ref();

const list = computed(() => {
  return baseStore.helpList;
});

const onScroll = async () => {
  const scrollTop = helpListRef.value.scrollTop;
  const clientHeight = helpListRef.value.clientHeight;
  const scrollHeight = helpListRef.value.scrollHeight;
  if (scrollTop + clientHeight == scrollHeight) {
    data.pageIndex++;
    await baseStore.loadMoreHelpList(data);
  }
};

onMounted(async () => {
  await baseStore.refreshHelpList(data);
});
</script>

<style lang="scss" scoped>
.help-list {
  height: 6rem;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
    width: 0;
  }
  .block {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    padding: 0.25rem;
    font-size: 0.4rem;
    font-weight: 500;
  }
  .block:nth-child(2n) {
    background: #004f43;
  }
  .block:nth-child(2n + 1) {
    background: #00362f;
  }
}
</style>
