<script setup lang="ts" name="audition-demo-show">
import { useRoute, useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import useActivityApi from '@/api/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';

const activityKey = Number(useRoute().params.id);
const tabKey = useRouteQuery('tabKey', 'material');

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

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 style="margin-top: 16px">
      <a-tabs v-model:active-key="tabKey" :animation="true" :header-padding="false" :justify="true" type="rounded">
        <a-tab-pane key="material" title="歌曲物料">
          <material-table :data="activity" />
        </a-tab-pane>
        <a-tab-pane key="listen-user" :title="`试听用户(${total.view_total})`">
          <view-user-table :activity-id="activityKey" @init-total="(value) => (total.view_total = value)" />
        </a-tab-pane>
        <a-tab-pane key="like-user" :title="`收藏用户(${total.like_total})`">
          <like-user-table :activity-id="activityKey" @init-total="(value) => (total.like_total = value)" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-view>
</template>

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