<template>
  <FlexCol padding="space.lg">
    <SearchBar v-model="search" @search="loader.reload()" placeholder="输入关键词搜索"  />
    <SimplePageContentLoader :loader="loader">
      <template v-if="loader.isFinished.value">
        <Touchable 
          v-for="item in loader.list.value" :key="item.id"
          direction="row"
          justify="space-between"
          @click="navTo('assessment/evaluation-form', { id: item.id })"
        >
          <FlexCol>
            <Text :text="item.inheritor ?? '?'" />
            <Text :text="item.mobile || item.unit || '?'" />
          </FlexCol>
          <Icon name="arrow-right-bold" />
        </Touchable>
      </template>
    </SimplePageContentLoader>
    <XBarSpace />
  </FlexCol>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
import AssessmentContentApi from '@/api/collect/AssessmentContent';
import FlexCol from '@/components/layout/FlexCol.vue';
import SimplePageContentLoader from '@/components/loader/SimplePageContentLoader.vue';
import XBarSpace from '@/components/layout/space/XBarSpace.vue';
import Text from '@/components/basic/Text.vue';
import Icon from '@/components/basic/Icon.vue';
import SearchBar from '@/components/form/SearchBar.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import { navTo } from '@/components/utils/PageAction';

const search = ref('');
const loader = useSimplePageListLoader(10, async (page, pageSize) => {
  const list = await AssessmentContentApi.getSelfAssessmentList({
    year: new Date().getFullYear(),
    page,
    pageSize,
  });
  return {
    list: list.data,
    total: list.total,
  };
});
</script>
