<script setup lang="ts">
  import { useRoute, useRouter } from 'vue-router';
  import { computed, onMounted, ref } from 'vue';
  import useActivityApi from '@/http/activity';
  import BasicCard from '@/views/audition/demo-show/components/basic-card.vue';
  import MaterialTable from '@/views/audition/demo-show/components/material-table.vue';
  import ViewUserTable from '@/views/audition/activity-show/components/view-user-table.vue';
  import LikeUserTable from '@/views/audition/activity-show/components/like-user-table.vue';
  import { useRouteQuery } from '@vueuse/router';
  import usePermission from '@/hooks/permission';
  import { isArray } from '@/utils/is';

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

  const tabKeys = computed((): string[] => ['material', 'view-user', 'like-user'].filter((item) => checkPermission(item)));

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

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

  const activity = ref({});
  const total = ref({ submit_total: 0, match_total: 0, view_total: 0, like_total: 0, manager_total: 0 });

  const syncViewCount = () =>
    useActivityApi.viewUsers(activityKey, { pageSize: 1, limit: 1 }).then(({ meta }) => (total.value.view_total = meta.total));

  const syncLikeCount = () =>
    useActivityApi.likeUsers(activityKey, { pageSize: 1, limit: 1 }).then(({ meta }) => (total.value.like_total = meta.total));

  const router = useRouter();
  onMounted(async () => {
    await useActivityApi
      .show(activityKey, {
        songType: 2,
        setWith: [
          'project:id,name,is_promote,is_can_manage',
          'tags:id,name',
          'user:id,nick_name,real_name,identity',
          'links:id,nick_name,identity',
        ],
        setColumn: ['id', 'song_name', 'cover', 'lyric', 'expand', 'status', 'created_at', 'song_type', 'project_id', 'user_id'],
      })
      .then((data) => {
        activity.value = data;
      })
      .catch(() => router.replace({ name: 'exception-404' }));
  });
</script>

<template>
  <page-view has-bread>
    <basic-card :loading="!activity" :data="activity" />

    <a-card v-if="tabKeys.length" :bordered="false" style="margin-top: 20px">
      <a-tabs v-model:active-key="tabKey" :animation="true" :justify="true" :header-padding="false" type="rounded" size="small">
        <a-tab-pane v-if="checkPermission('material')" key="material" title="物料列表">
          <MaterialTable :data="activity" />
        </a-tab-pane>
        <a-tab-pane v-if="checkPermission('view-user')" key="view-user" :title="`试听用户(${total.view_total})`">
          <view-user-table :activity-id="activityKey" :query-hook="syncViewCount" />
        </a-tab-pane>
        <a-tab-pane v-if="checkPermission('like-user')" key="like-user" :title="`收藏用户(${total.like_total})`">
          <like-user-table :activity-id="activityKey" :query-hook="syncLikeCount" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-view>
</template>

<style lang="less" scoped>
  textarea.arco-textarea::-webkit-scrollbar {
    display: none;
  }
</style>