<template>
  <page-view :loading="loading" has-bread>
    <basic-card :project="project as any" />

    <a-card v-if="tabKeys.length" :bordered="false" style="margin-top: 16px">
      <a-tabs v-model:active-key="tabKey" type="rounded" :animation="true" size="small" :justify="true">
        <a-tab-pane v-if="checkPermission('activity')" key="activity" :title="`歌曲列表(${count.activity})`">
          <activity-card
            style="padding: 0"
            :has-bread="false"
            :init-filter="{ status: '', project_id: projectKey }"
            :create-prop="{ initValue: { project_id: projectKey }, hideField: ['project_id'] }"
            :hide-search-item="['projectName', 'userName']"
            :export-name="project.name"
            :query-hook="() => syncActivityCount()"
          />
        </a-tab-pane>
        <a-tab-pane v-if="checkPermission('demo')" key="demo" :title="`Demo列表(${count.demo})`">
          <demo-card
            style="padding: 0"
            :has-bread="false"
            :init-filter="{ status: '', project_id: projectKey }"
            :create-prop="{ project_id: projectKey }"
            :hide-search-item="['projectName', 'createdForm', 'userName']"
            :export-name="project.name"
            :query-hook="() => syncDemoCount()"
          />
        </a-tab-pane>
        <a-tab-pane v-if="checkPermission('member')" key="member" :title="`厂牌成员(${count.member})`">
          <member-table :project-key="projectKey" :query-hook="() => syncMemberCount()" />
        </a-tab-pane>
        <a-tab-pane v-if="checkPermission('manage')" key="manage" :title="`厂牌管理(${count.manager})`">
          <manage-table :project-key="projectKey" :query-hook="() => syncManageCount()" @delete="onDeleteMaster" />
        </a-tab-pane>
        <a-tab-pane v-if="checkPermission('out-manage')" key="out-manage" :title="`外部管理(${count.out_manager})`">
          <out-manage-table :project-key="projectKey" :query-hook="() => syncOutManageCount()" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-view>
</template>

<script lang="ts" setup>
  import { onBeforeRouteLeave, useRoute } from 'vue-router';
  import { useRouteQuery } from '@vueuse/router';
  import { computed, onMounted, ref } from 'vue';
  import ActivityCard from '@/views/audition/activity/index.vue';
  import DemoCard from '@/views/audition/demo/index.vue';
  import BasicCard from '@/views/audition/project-show/components/basic-card.vue';
  import useLoading from '@/hooks/loading';

  import useProjectApi from '@/http/project';
  import useActivityApi from '@/http/activity';
  import ManageTable from '@/views/audition/project-show/components/manage-table.vue';
  import OutManageTable from '@/views/audition/project-show/components/out-manage-table.vue';
  import MemberTable from '@/views/audition/project-show/components/member-table.vue';
  import usePermission from '@/hooks/permission';
  import { isArray } from '@/utils/is';

  const routeName = useRoute()?.name as string;
  const checkPermission = (permission: string | string[]): boolean => {
    permission = isArray(permission) ? permission.map((item) => `${routeName}-${item}`) : `${routeName}-${permission}`;
    return usePermission().checkPermission(permission);
  };

  const tabKeys = computed((): string[] => {
    return ['activity', 'demo', 'member', 'manage', 'out-manage'].filter((item) => checkPermission(item));
  });

  const tabKey = useRouteQuery('tabKey', tabKeys.value[0] || '');

  const projectKey = Number(useRoute().params?.id);

  const project = ref({ name: '', master_id: 0, master: undefined });

  const { loading, setLoading } = useLoading(true);

  const count = ref({ activity: 0, demo: 0, member: 0, manager: 0, out_manager: 0 });

  const onDeleteMaster = (id: number) => {
    if (project.value.master_id === id) {
      project.value.master_id = 0;
      project.value.master = undefined;
    }
  };

  const syncActivityCount = () =>
    useActivityApi
      .get({ status: '', audit_status: 1, song_type: 1, project_id: projectKey, pageSize: 1 })
      .then(({ meta }) => (count.value.activity = meta.total));

  const syncDemoCount = () =>
    useActivityApi
      .get({ status: '', audit_status: 1, song_type: 2, project_id: projectKey, pageSize: 1 })
      .then(({ meta }) => (count.value.demo = meta.total));

  const syncManageCount = () =>
    useProjectApi.manageUsers(projectKey, { pageSize: 1 }).then(({ meta }) => (count.value.manager = meta.total));

  const syncMemberCount = () =>
    useProjectApi.memberUsers(projectKey, { pageSize: 1 }).then(({ meta }) => (count.value.member = meta.total));

  const syncOutManageCount = () =>
    useProjectApi.outManageUsers(projectKey, { pageSize: 1 }).then(({ meta }) => (count.value.out_manager = meta.total));

  onMounted(() => {
    useProjectApi
      .show(projectKey)
      .then((data) => (project.value = data as any))
      .finally(() => setLoading(false));
  });

  onBeforeRouteLeave((to, from) => {
    if (from.meta.from === to.name) {
      to.meta.reload = false;
    }
  });
</script>