<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">
        <FlexRow
          v-for="item in loader.list.value"
          :key="`${item.userId}-${item.checkId ?? item.id}`"
          align="center"
          justify="space-between"
          gap="gap.sm"
          backgroundColor="white"
          padding="space.md"
          radius="radius.md"
        >
          <Touchable
            flex="1"
            direction="row"
            justify="space-between"
            @click="openEdit(item)"
          >
            <FlexCol flex="1">
              <Text :text="item.inheritor ?? item.title ?? '?'" />
              <Text fontConfig="subText" :text="subLine(item)" />
            </FlexCol>
          </Touchable>
          <Text fontConfig="subText" :text="progressLabel(item.progress)" />
          <Button
            v-if="canReview(item)"
            type="primary"
            size="small"
            @click.stop="openReview(item)"
          >
            审核
          </Button>
          <Icon name="arrow-right-bold" />
        </FlexRow>
      </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 InheritorCheckListRow } from '@/api/collect/AssessmentContent';
import SimpleDropDownPicker, { type SimpleDropDownPickerItem } from '@/common/components/SimpleDropDownPicker.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.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 Button from '@/components/basic/Button.vue';

const search = ref('');
/** 与接口一致：-100=全部，其余为 progress 精确筛选 */
const progressFilter = ref(-100);

const progressOptions: SimpleDropDownPickerItem[] = [
  { id: -100, name: '全部状态' },
  { id: -1, name: '未提交' },
  { id: 0, name: '草稿' },
  { id: 1, name: '已自评' },
  { id: 2, name: '项目保护单位审核完成' },
  { id: 3, name: '县（区）文旅部门审核完成' },
  { id: 4, name: '设区市/省非遗中心审核完成' },
  { id: 5, name: '省文化和旅游厅审核完成' },
];

const progressLabels: Record<number, string> = {
  [-1]: '未提交',
  0: '草稿',
  1: '已自评',
  2: '项目保护单位审核完成',
  3: '县（区）文旅部门审核完成',
  4: '设区市/省非遗中心审核完成',
  5: '省文化和旅游厅审核完成',
};

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

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

function canReview(item: InheritorCheckListRow) {
  return Boolean(item.checkId && item.userId != null && item.progress != null && item.progress >= 1 && item.progress < 5);
}

function openEdit(item: InheritorCheckListRow) {
  const cid = item.checkId ?? item.id;
  const uid = item.userId ?? 0;
  navTo('./evaluation-form', { id: cid, userId: uid });
}

function openReview(item: InheritorCheckListRow) {
  const cid = item.checkId;
  const uid = item.userId;
  if (!cid || uid == null) {
    return;
  }
  navTo('./evaluation-form-review', {
    id: cid,
    userId: uid,
    progress: item.progress ?? '',
  });
}

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

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