<script setup lang="ts">
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

import { useTextReport } from '../../hooks/text'
import { useModal } from '@/views/Content/hooks/modal'

const props = defineProps({
  type: {
    type: String,
    required: true,
  },
})

const { getTextReportList } = useTextReport()

const { openDetailsModal } = useModal()

const list = ref([])

onMounted(async () => {
  console.log(props.type, 'props.type')
  list.value = await getTextReportList(props.type)
})

const textClick = item => {
  console.log(item, 'item s')
  openDetailsModal({
    contentString: item.detailContent,
    titleString: item.title,
  })
}
</script>

<template>
  <div class="w-h-full">
    <n-scrollbar>
      <vue3-seamless-scroll :list="list" :hover="true" :step="0.2">
        <div
          class="cursor-pointer leading-8 hover:text-blue-400"
          v-for="(item, index) in list"
          :key="item.title"
          @click="textClick(item)"
        >
          <span class="inline-block w-6">{{ index + 1 }}. </span>
          {{ item.title }}
        </div>
      </vue3-seamless-scroll>
    </n-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
</style>
