<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/demo-show/components/basic-card.vue";
import MaterialTable from "@/views/demo-show/components/material-table.vue";
import { useRouteQuery } from "@vueuse/router";
import useLoading from "@/hooks/loading";
import { Activity } from "@/types/activity";

const activityKey = Number(useRoute().params.id);
const tabKey = useRouteQuery("tabKey", "material");
const activity = ref<Activity>();

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

const router = useRouter();
onMounted(async () => {
  setLoading(true);
  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) => {
      activity.value = data;
    })
    .catch(() => router.replace({ name: "exception-404" }))
    .finally(() => setLoading(false));
});
</script>

<template>
  <page-view has-bread>
    <a-spin :loading="loading" style="width: 100%">
      <basic-card v-if="activity"  :data="activity as Activity" />
    </a-spin>

    <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 v-if="activity" :data="activity" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-view>
</template>

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