<template>
  <FlexCol padding="space.lg" gap="gap.md">
    <FlexRow justify="space-between" gap="gap.sm">
      <SearchBar v-model="search" placeholder="输入关键词搜索" :innerStyle="{ width: '400rpx' }" @search="loader.reload()" />
      <SimpleDropDownPicker
        v-model="progressFilter"
        :columns="progressOptions"
        default-text="全部状态" 
      />
    </FlexRow>
    <SimplePageListLoader :loader="loader">
      <FlexCol gap="gap.md">
        <Touchable
          v-for="item in loader.list.value"
          :key="`${item.userId}-${item.agreementId ?? 0}`"
          direction="row"
          justify="space-between"
          backgroundColor="white"
          padding="space.md"
          radius="radius.md"
          @click="openRow(item)"
        >
          <FlexCol>
            <Text :text="item.title || item.partyB || '—'" />
            <Text fontConfig="subText" :text="subLine(item)" />
          </FlexCol>
          <FlexRow align="center" gap="gap.sm">
            <Text fontConfig="subText" :text="progressLabel(item.progress)" />
            <Icon name="arrow-right-bold" />
          </FlexRow>
        </Touchable>
      </FlexCol>
    </SimplePageListLoader>
    <XBarSpace />
  </FlexCol>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
import { navTo } from '@/components/utils/PageAction';
import AssessmentContentApi, { type UserAgreementListRow } from '@/api/collect/AssessmentContent';
import SimpleDropDownPicker, { type SimpleDropDownPickerItem } from '@/common/components/SimpleDropDownPicker.vue';
import FlexCol from '@/components/layout/FlexCol.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 SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
import FlexRow from '@/components/layout/FlexRow.vue';

const search = ref('');
const progressFilter = ref(-100);

/** 与 ich/check/getUserAgreement 列表进度一致 */
const progressOptions: SimpleDropDownPickerItem[] = [
  { id: -100, name: '全部状态' },
  { id: -1, name: '未提交' },
  { id: 0, name: '草稿' },
  { id: 1, name: '已自评' },
  { id: 2, name: '审核完成' },
];

const agreementProgressLabels: Record<number, string> = {
  [-1]: '未提交',
  0: '草稿',
  1: '已自评',
  2: '审核完成',
};

function progressLabel(p: number | null | undefined) {
  if (p === null || p === undefined)
    return '未填写';
  return agreementProgressLabels[p] ?? `未填写`;
}

function subLine(item: UserAgreementListRow) {
  return [item.mobile, item.ichTitle].filter(Boolean).join(' · ') || '—';
}

function openRow(item: UserAgreementListRow) {
  const id = item.agreementId && item.agreementId > 0 ? item.agreementId : 0;
  const uid = item.userId ?? 0;
  navTo('./argeement-sign', { id, userId: uid });
}

const loader = useSimplePageListLoader(20, async (page, pageSize) => {
  const pv = progressFilter.value;
  const progress = pv > -50 ? pv : undefined;
  const list = await AssessmentContentApi.getUserAgreementList({
    year: new Date().getFullYear(),
    page,
    pageSize,
    keywords: search.value?.trim() || undefined,
    progress,
  });
  return {
    list: list.data,
    total: list.total,
  };
});

watch(progressFilter, () => {
  loader.reload();
});
</script>
