<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import useActivityApi from '@/http/activity';
  import { AnyObject } from '@/types/global';
  import UserTableColumn from '@/components/filter/user-table-column.vue';
  import NumberTableColumn from '@/components/filter/number-table-column.vue';
  import { TableData } from '@arco-design/web-vue';
  import { useRouter } from 'vue-router';
  import ActivityTableColumn from '@/components/filter/activity-table-column.vue';
  import DateTableColumn from '@/components/filter/date-table-column.vue';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';

  const router = useRouter();
  const props = defineProps<{ userKey: number }>();

  const tableRef = ref();
  const { loading, setLoading } = useLoading(false);
  const filter = ref({ song_name: '', project_name: '', tag_name: '', status: '', createBetween: [] });

  const total = ref(0);

  const { statusOption } = useActivityApi;

  const onQuery = async (params?: AnyObject) => {
    setLoading(true);
    useActivityApi.get({ user_id: props.userKey, pageSize: 1 }).then(({ meta }) => (total.value = meta.total));

    return useActivityApi
      .get({
        user_id: props.userKey,
        ...filter.value,
        ...params,
        setColumn: ['id', 'cover', 'song_name', 'user_id', 'project_id', 'sub_title', 'status', 'created_at'],
        setWith: ['project:id,name', 'user:id,real_name,nick_name,identity', 'tags:id,name', 'outSideManages:id,user_id,activity_id'],
        setWithCount: ['viewUsers as view_count', 'collectionUsers as like_count', 'submitUsers as submit_work_count'],
        setSort: ['-id'],
      })
      .finally(() => setLoading(false));
  };

  const onSearch = () => tableRef.value?.onPageChange(1);

  const onRowClick = (record: TableData) => router.push({ name: 'audition-activity-show', params: { id: record.id } });

  const onReset = () => {
    filter.value = { song_name: '', project_name: '', tag_name: '', status: '', createBetween: [] };
    onSearch();
  };

  onMounted(() => onReset());

  defineExpose({ total });
</script>

<template>
  <a-card :bordered="false">
    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
      <filter-search-item label="歌曲名称" filed="song_name">
        <a-input v-model="filter.song_name" allow-clear placeholder="请输入" />
      </filter-search-item>
      <filter-search-item label="厂牌名称" filed="project_name">
        <a-input v-model="filter.project_name" allow-clear placeholder="请输入" />
      </filter-search-item>
      <filter-search-item label="标签名称" filed="tag_name">
        <a-input v-model="filter.tag_name" allow-clear placeholder="请输入" />
      </filter-search-item>
      <filter-search-item label="状态" filed="status">
        <a-select v-model="filter.status" :options="statusOption" allow-clear placeholder="请选择" />
      </filter-search-item>
    </filter-search>
    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" hover-type="pointer" @row-click="onRowClick">
      <activity-table-column data-index="id" title="试唱歌曲" />
      <number-table-column :width="120" data-index="view_count" title="试听人数" />
      <number-table-column :width="120" data-index="like_count" title="收藏人数" />
      <number-table-column :width="120" data-index="submit_work_count" title="提交人数" />
      <user-table-column :width="140" data-index="user_id" user="user" title="创建人" />
      <date-table-column :width="110" data-index="created_at" title="创建时间" />
      <enum-table-column :width="110" data-index="status" title="状态" :option="statusOption" />
    </filter-table>
  </a-card>
</template>

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