<template>
  <FlexCol :padding="30" :gap="20">
    <Image
      src="https://mn.wenlvti.net/app_static/xiangan/banner_dig_summary.jpg"
      :radius="20"
      round
      mode="widthFix"
      :width="690"
    />
    <FlexCol :gap="20">
      <TaskList
        icon="icon-task-summary-1"
        title="行政区划"
        desc="村落行政区域划分及变迁"
        @click="goForm(1, '行政区划')"
      />
      <TaskList
        icon="icon-task-summary-5"
        title="村落综述"
        desc="村落整体概况介绍"
        @click="goForm(5, '村落综述')"
      />
      <TaskList
        icon="icon-task-summary-2"
        title="地理信息"
        desc="地理位置和自然环境特征"
        @click="goForm(2, '地理信息')"
      />
      <TaskList
        icon="icon-task-summary-3"
        title="建设与保护"
        desc="村落发展与文化遗产保护"
        @click="goForm(3, '建设与保护')"
      />
      <TaskList
        icon="icon-task-summary-4"
        title="人口与经济"
        desc="人口与经济情况"
        @click="goForm(4, '人口与经济')"
      />
    </FlexCol>
    <XBarSpace />
  </FlexCol>
</template>

<script setup lang="ts">
import { useCollectStore } from '@/store/collect';
import { useTaskEntryForm } from '../composeable/TaskEntryForm';
import FlexCol from '@/components/layout/FlexCol.vue';
import Image from '@/components/basic/Image.vue';
import TaskList from '../components/TaskList.vue';
import XBarSpace from '@/components/layout/space/XBarSpace.vue';

const { canCollect } = useCollectStore();
const t = useTaskEntryForm();

function goForm(subId: number, title: string) {
  t.goForm('overview', subId, undefined, 'common', title);
}
</script>
