<script setup lang="ts">
  import { AnyObject } from '@/types/global';
  import useLoading from '@/hooks/loading';
  import useUserApi from '@/http/user';
  import { onMounted, ref } from 'vue';
  import NumberTableColumn from '@/components/filter/number-table-column.vue';
  import useActivityApi from '@/http/activity';
  import { useRouter } from 'vue-router';
  import { TableData } from '@arco-design/web-vue';
  import UserTableColumn from '@/components/filter/user-table-column.vue';
  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: '' });

  const total = ref(0);

  const onQuery = async (params?: AnyObject) => {
    setLoading(true);
    useUserApi.likeSongs(props.userKey, { pageSize: 1, setColumn: ['id'] }).then(({ meta }) => (total.value = meta.total));

    return useUserApi.likeSongs(props.userKey, { ...filter.value, ...params, setSort: ['-like_at'] }).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: '' };
    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="useActivityApi.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="like_at" title="收藏时间" />
      <enum-table-column :width="110" data-index="status" title="状态" :option="useActivityApi.statusOption" />
    </filter-table>
  </a-card>
</template>

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