<script setup lang="ts" name="user-show">
  import { computed, onBeforeMount, ref, watch } from 'vue';
  import useUserApi from '@/http/user';
  import { onBeforeRouteLeave, useRoute } from 'vue-router';
  import BasicCard from '@/views/user/info/components/basic-card.vue';
  import ListenActivityTable from '@/views/user/info/components/listen-activity-table.vue';
  import LikeActivityTable from '@/views/user/info/components/like-activity-table.vue';
  import PublishActivityTable from '@/views/user/info/components/publish-activity-table.vue';
  import SubmitActivityTable from '@/views/user/info/components/submit-activity-table.vue';
  import ManageProjectTable from '@/views/user/info/components/manage-project-table.vue';
  import ManageActivityTable from '@/views/user/info/components/manage-activity-table.vue';
  import GroupMemberTable from '@/views/user/info/components/group-member-table.vue';
  import DemoActivityTable from '@/views/audition/demo/index.vue';

  import useLoading from '@/hooks/loading';
  import { User } from '@/utils/model';
  import { useRouteQuery } from '@vueuse/router';
  import usePermission from '@/hooks/permission';
  import { isArray } from '@/utils/is';
  import useActivityApi from '@/http/activity';

  const userId = Number(useRoute().params?.id);
  const user = ref({ identity: 0, scope: 0 });
  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 { loading, setLoading } = useLoading(true);

  const tabKeys = computed((): string[] => {
    const keys = ['listen-activity', 'like-activity', 'submit-activity', 'manage-activity', 'member', 'demo'];

    if ([1, 2].includes(user.value.scope)) {
      keys.push('publish-activity');
    }
    if ([2].includes(user.value.scope)) {
      keys.push('project');
    }
    return keys.filter((item) => checkPermission(item));
  });

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

  const listenRef = ref();
  const likeRef = ref();
  const submitRef = ref();
  const activityRef = ref();
  const groupMemberRef = ref();
  const publishRef = ref();
  const projectRef = ref();

  const count = ref({ demo: 0 });

  watch(
    () => tabKeys.value,
    () => (tabKeys.value.includes(tabKey.value) ? undefined : (tabKey.value = tabKeys.value[0] || ''))
  );

  onBeforeMount(() => {
    useUserApi
      .show(userId)
      .then((data) => (user.value = data))
      .finally(() => setLoading(false));
  });

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

  const syncDemoCount = () =>
    useActivityApi.get({ audit_status: 1, song_type: 2, user_id: userId, pageSize: 1 }).then(({ meta }) => {
      count.value.demo = meta.total;
    });
</script>

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

    <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" :header-padding="false">
        <a-tab-pane v-if="checkPermission('listen-activity')" key="listen-activity" :title="`试听歌曲(${listenRef?.total})`">
          <listen-activity-table ref="listenRef" :user-key="userId" />
        </a-tab-pane>
        <a-tab-pane v-if="checkPermission('like-activity')" key="like-activity" :title="`收藏歌曲(${likeRef?.total})`">
          <like-activity-table ref="likeRef" :user-key="userId" />
        </a-tab-pane>
        <a-tab-pane v-if="checkPermission('submit-activity')" key="submit-activity" :title="`试唱歌曲(${submitRef?.total})`">
          <submit-activity-table ref="submitRef" :user-key="userId" />
        </a-tab-pane>
        <a-tab-pane v-if="checkPermission('manage-activity')" key="manage-activity" :title="`管理歌曲(${activityRef?.total})`">
          <manage-activity-table ref="activityRef" :user-key="userId" />
        </a-tab-pane>
        <a-tab-pane v-if="checkPermission('member')" key="member" :title="`Ta的成员(${groupMemberRef?.total})`">
          <group-member-table ref="groupMemberRef" :user-key="userId" />
        </a-tab-pane>
        <a-tab-pane
          v-if="checkPermission('publish-activity') && tabKeys.includes('publish-activity')"
          key="publish-activity"
          :title="`发布歌曲(${publishRef?.total})`"
        >
          <publish-activity-table ref="publishRef" :user-key="userId" />
        </a-tab-pane>
        <a-tab-pane
          v-if="checkPermission('project') && tabKeys.includes('project')"
          key="project"
          :title="`Ta的厂牌(${projectRef?.total})`"
        >
          <manage-project-table ref="projectRef" :user-key="userId" />
        </a-tab-pane>
        <a-tab-pane v-if="checkPermission('demo') && tabKeys.includes('demo')" key="demo" :title="`Ta的Demo(${count.demo})`">
          <demo-activity-table
            style="padding: 0"
            :has-bread="false"
            :init-filter="{ user_id: userId }"
            :hide-search-item="['projectName', 'createdForm', 'userName', 'auditBetween']"
            :query-hook="() => syncDemoCount()"
          />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-view>
</template>

<style scoped lang="less"></style>