<template>
  <a-card class="general-card" title="待处理事项" :body-style="{ paddingBottom: '10px', height: '160px' }">
    <a-table
      row-key="id"
      :loading="loading"
      :data="source"
      :pagination="pagination"
      :show-header="false"
      :bordered="false"
      size="small"
      :table-layout-fixed="true"
      @page-change="onPageChange"
    >
      <template #columns>
        <a-table-column data-index="id" :width="36">
          <template #cell="{ rowIndex }">{{ getIndex(rowIndex) }}</template>
        </a-table-column>
        <a-table-column data-index="activity_id" :width="260" :ellipsis="true" :tooltip="true">
          <template #cell="{ record }">{{ getTitle(record) }}</template>
        </a-table-column>
        <a-table-column data-index="msg" :width="200" :ellipsis="true" :tooltip="true" />
        <a-table-column data-index="option" :width="50">
          <template #cell>
            <a-button type="text" @click="onClick()">处理</a-button>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-card>
</template>

<script lang="ts" setup>
import useLoading from '@/hooks/loading';
import { onMounted, ref } from 'vue';
import usePagination from '@/hooks/pagination';
import { add, multiply } from 'lodash';
import { useRouter } from 'vue-router';
import useDashboardApi from '@/api/dashboard';

type ToDoType = {
  id: number;
  project?: { id: number; name: string };
  song_name: string;
  msg: string;
};

const { loading, setLoading } = useLoading(false);
const { pagination, setPage, setPageSize, setTotal } = usePagination({ pageSize: 3, showPageSize: false, size: 'mini' });

const source = ref<ToDoType[]>([]);
const router = useRouter();

const getIndex = (index: number) => {
  return add(index + 1, multiply(pagination.value.current - 1, pagination.value.pageSize));
};
const getTitle = (record: ToDoType) => {
  return `厂牌【${record.project?.name || '无'}】提交的歌曲【${record.song_name}】未通过审核`;
};

const onClick = () => {
  router.push({ name: 'audition-apply', query: { auditStatus: 2 } });
};

const onQuery = () => {
  setLoading(true);
  useDashboardApi
    .todo({ page: pagination.value.current, pageSize: pagination.value.pageSize })
    .then(({ data, meta }) => {
      source.value = data as ToDoType[];
      setPage(meta.current);
      setPageSize(meta.limit);
      setTotal(meta.total);
    })
    .finally(() => {
      setLoading(false);
    });
};

const onPageChange = (page: number) => {
  pagination.value.current = page;
  onQuery();
};

onMounted(() => onPageChange(1));
</script>

<style lang="less" scoped>
:deep(.arco-table-cell) {
  padding: 5px 8px !important;

  & > .arco-table-td-content .arco-btn-size-small {
    padding: 5px !important;
  }
}
</style>