<template>
  <FlexCol>
    <Image
      v-if="currentTaskBanner"
      :src="currentTaskBanner"
      :radius="20"
      :width="690"
      mode="widthFix"
    />
    <FlexCol :gap="20">
      <TaskList
        v-for="item in currentTaskDefItems"
        :key="item.title"
        :icon="item.icon"
        :title="item.title"
        :desc="item.desc"
        :enable="typeof item.enable === 'string' ? canCollect(item.enable) : item.enable"
        @click="handleClick(item)"
      />
    </FlexCol>
  </FlexCol>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useCollectStore } from '@/store/collect';
import { useTaskEntryForm } from '../forms/composeable/TaskEntryForm';
import { TaskMenuDef, type TaskMenuDefGoForm, type TaskMenuDefItem } from '../forms/tasks';
import { alert } from '@/components/utils/DialogAction';
import { getVillageInfoForm } from '../forms/forms';
import { navTo } from '@/components/utils/PageAction';
import { TaskRootDef } from '../forms/tasks';
import FlexCol from '@/components/layout/FlexCol.vue';
import Image from '@/components/basic/Image.vue';
import TaskList from '../components/TaskList.vue';
import VillageApi from '@/api/inhert/VillageApi';

const { goForm } = useTaskEntryForm();
const { canCollect, getCollectModuleInternalNameById } = useCollectStore();

const props = defineProps<{
  villageId: number,
  villageVolunteerId: number,
  taskName: string,
  taskTitle: string,
  taskPid: number,
}>();

async function loadList() {
  const { villageId, taskName, taskPid } = props;
  if (taskName) {
    currentTaskDefItems.value = TaskMenuDef[taskName].list.concat();
    currentTaskBanner.value = TaskMenuDef[taskName].banner;
  } else {
    currentTaskDefItems.value = TaskRootDef
  }
  if (taskPid >= 0) {
    const res = (await VillageApi.getCatalogList(villageId, taskPid));
    if (res.length === 0)
      return;
    currentTaskDefItems.value = res
      .map(item => {
        try {
          const collectModuleInternalName = getCollectModuleInternalNameById(item.collectModuleId);
          if (!collectModuleInternalName && item.collectModuleId)
            throw new Error('不存在定义的表单数据');
          const formDefine = collectModuleInternalName ? getVillageInfoForm(collectModuleInternalName, -1) : undefined;
          return {
            ...item,
            enable: true,
            catalogItem: item,
            goForm: collectModuleInternalName ? [ 
              collectModuleInternalName, 
              -1, 
              formDefine?.[2].typeName, 
              collectModuleInternalName === 'overview' ? 'common' : undefined,
              item.title 
            ] as TaskMenuDefGoForm : undefined,
            onClick: () => {
              if (item.haschild) {
                navTo('/pages/dig/forms/task', {
                  ...props,
                  taskName: '',
                  taskTitle: item.title,
                  taskPid: item.id,
                })
              } else {
                alert({
                  title: item.title,
                  content: '不存在定义的表单数据',
                })
              }
            }
          }
        } catch (e) {
          return {
            ...item,
            desc: '' + e,
            enable: false,
          }
        }
      });
  }
}

watch(() => props.taskPid, loadList);
onMounted(loadList);

const currentTaskDefItems = ref<TaskMenuDefItem[]>([]);
const currentTaskBanner = ref('');
const handleClick = (item: TaskMenuDefItem) => {
  
  if (!item.enable) {
    uni.showToast({
      title: '您没有完成任务的权限，如需要请联系管理员',
      icon: 'none',
      duration: 2000
    });
    return;
  }
  if (item.goForm instanceof Array) {
    goForm(...item.goForm);
    return;
  }
  else if (item.goForm) {
    navTo('/pages/dig/forms/task', {
      ...props,
      taskName: item.goForm.name,
      taskTitle: item.title,
      taskPid: (item as any).id,
    })
    return;
  }
  if (item.onClick) {
    item.onClick();
  }
}



</script>
