<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 useUserApi from '@/http/user';
  import { TableData } from '@arco-design/web-vue';
  import { useRouter } from 'vue-router';
  import DateTableColumn from '@/components/filter/date-table-column.vue';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import ActivityTableColumn from '@/components/filter/activity-table-column.vue';

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

  const tableRef = ref();
  const { loading, setLoading } = useLoading(false);
  const filter = ref({ activity_name: '', project_name: '', tag_name: '', use_sing_type: '', use_sing_status: '', activity_status: '' });

  const total = ref(0);

  const { statusOption } = useActivityApi;
  const { workSingTypeOption, workSingStatusOption } = useActivityApi;

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

    return useUserApi
      .submitSongs(props.userKey, { ...filter.value, ...params, sortBy: 'id', sortType: 'desc' })
      .finally(() => setLoading(false));
  };

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

  const onReset = () => {
    filter.value = { activity_name: '', project_name: '', tag_name: '', use_sing_type: '', use_sing_status: '', activity_status: '' };
    onSearch();
  };

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

  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="activity_name">
        <a-input v-model="filter.activity_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.use_sing_type" :options="workSingTypeOption" allow-clear placeholder="请选择" />
      </filter-search-item>
      <filter-search-item label="试唱结果" filed="status">
        <a-select v-model="filter.use_sing_status" :options="workSingStatusOption" allow-clear placeholder="请选择" />
      </filter-search-item>
      <filter-search-item label="试唱状态" filed="status">
        <a-select v-model="filter.activity_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="试唱歌曲"
        name-index="activity_name"
        sub-index="activity_title"
        cover-index="activity_cover"
      />
      <filter-table-column :width="100" data-index="mode" title="试唱方式">
        <template #default="{ record }">
          <template v-if="record.mode === 1">自主上传</template>
          <template v-else>{{ record.sing_type === 'Full' ? '唱整首' : '唱片段' }}</template>
        </template>
      </filter-table-column>
      <date-table-column :width="110" data-index="submit_at" title="提交时间" />
      <filter-table-column :width="120" data-index="status" title="试唱结果">
        <template #default="{ record }">
          <span v-if="record.status === 1">已确认</span>
          <span v-else-if="record.status === 2">不合适</span>
          <span v-else-if="record.status === 0 && [3, 5].indexOf(record.activity_status) !== -1">未采纳</span>
          <span v-else-if="record.status === 0 && record.activity_status === 1">待采纳</span>
          <span v-else>其他</span>
        </template>
      </filter-table-column>
      <filter-table-column :width="320" data-index="demo_url" title="试唱音频">
        <template #default="{ record }">
          <audio-player :url="record.demo_url" />
        </template>
      </filter-table-column>
      <enum-table-column :width="110" data-index="status" title="试唱状态" :option="useActivityApi.statusOption" />
    </filter-table>
  </a-card>
</template>

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