<template>
  <FlexCol :padding="30" :gap="20">
    <Image
      src="https://mn.wenlvti.net/app_static/xiangan/banner_dig_trip.jpg"
      :radius="20"
      round
      mode="widthFix"
      :width="690"
    />
    <FlexCol :gap="20">
      <TaskList
        icon="icon-task-trip-3"
        title="旅游导览"
        :enable="canCollect('travel_guide')"
        @click="goForm('travel_guide', 0, undefined, undefined, '旅游导览')"
      />
      <TaskList
        icon="icon-task-trip-1"
        title="游览路线"
        :enable="canCollect('route')"
        @click="goForm('route', 1, undefined, undefined, '游览路线')"
      />
      <TaskList
        icon="icon-task-trip-2"
        title="活动时间"
        :enable="canCollect('route')"
        @click="goForm('route', 2, undefined, undefined, '活动时间')"
      />
      <TaskList
        icon="icon-task-trip-4"
        title="路线特色"
        :enable="canCollect('route')"
        @click="goForm('route', 3, undefined, undefined, '路线特色')"
      />
    </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 { goForm } = useTaskEntryForm();
</script>
