<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"
        :extra="item.extra"
        :goButtonText="isView ? '查看' : '去完成'"
        :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';
import { useAuthStore } from '@/store/auth';

const { goForm, goPreviewForm } = useTaskEntryForm();
const authStore = useAuthStore();
const { canCollect, canCollectCatalog, getCollectModuleInternalNameById } = useCollectStore();

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

async function loadList() {
  if (props.taskName) {
    currentTaskDefItems.value = TaskMenuDef[props.taskName].list.concat();
    currentTaskBanner.value = TaskMenuDef[props.taskName].banner;
  } else {
    currentTaskDefItems.value = TaskRootDef
  }
  if (props.taskPid >= 0) {
    const res = (await VillageApi.getCatalogList(
      props.villageId, 
      authStore.isAdmin ? undefined : props.villageVolunteerId,
      props.taskPid
    ));
    if (res.length === 0)
      return;
    currentTaskDefItems.value = res
      .map(item => {
        try {
          const collectModuleInternalName = getCollectModuleInternalNameById(item.collectModuleId);
          const formDefine = collectModuleInternalName ? getVillageInfoForm(collectModuleInternalName, -1) : undefined;
          return {
            ...item,
            extra: authStore.isAdmin && item.total >= 0 ? `已采编 ${item.total}` : '',
            enable: canCollectCatalog(item.id),
            catalogItem: item,
            goForm: collectModuleInternalName ? [ 
              collectModuleInternalName, 
              item.typeId ?? -1, 
              formDefine?.[2].typeName, 
              collectModuleInternalName === 'overview' ? 'common' : undefined,
              item.title,
              item.id
            ] as TaskMenuDefGoForm : undefined,
            onClick: () => {
              if (item.haschild) {
                navTo('/pages/dig/forms/task', {
                  ...props,
                  taskName: '',
                  taskTitle: item.title,
                  taskPid: item.id,
                  isView: props.isView,
                })
              } else {
                alert({
                  title: item.title,
                  content: '您暂无权限采集该板块',
                })
              }
            }
          }
        } catch (e) {
          return {
            ...item,
            desc: '' + (e instanceof Error ? e.message : e),
            enable: false,
          }
        }
      });
  }
}

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

const currentTaskDefItems = ref<TaskMenuDefItem[]>([]);
const currentTaskBanner = ref('');
const handleClick = (item: TaskMenuDefItem) => {
  
  if (!item.enable && !authStore.isAdmin) {
    uni.showToast({
      title: '您没有完成任务的权限，如需要请联系管理员',
      icon: 'none',
      duration: 2000
    });
    return;
  }

  if (item.goForm instanceof Array) {
    if (props.isView)
      goPreviewForm(...item.goForm);
    else
      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,
      isView: props.isView,
    })
    return;
  }
  if (item.onClick) {
    item.onClick();
  }
}
</script>
