<script setup lang="tsx">
  import type { TableProps, TableRowData } from 'tdesign-vue-next';
  import BackButton from '~/components/BackButton.vue';
  import { TButton } from '#components';
  const userId = useRoute().params.userId as string;
  const store = useArticleStore();
  const avatarURL = ref('');
  const { currentManageUser, currentUserPagination, currentUserArticleList } =
    storeToRefs(store);
  onMounted(async () => {
    try {
      await store.getCurrentManageUserInfo(userId);
      avatarURL.value = (await store.getCurrentManageUserAvatar(true))!;
      await store.getCurrentManageUserArticleTotal();
      await store.getCurrentManageUserArticleList();
    } catch (e) {
      await MessagePlugin.error(e as string);
    }
  });
  const columns = ref<TableProps['columns']>([
    {
      colKey: 'index',
      title: '序号',
      cell: (_, { rowIndex }: { rowIndex: number }) => (
        <div>
          {(currentUserPagination.value!.current! - 1) *
            currentUserPagination.value!.pageSize! +
            rowIndex +
            1}
        </div>
      ),
    },
    {
      colKey: 'title',
      title: '文章标题',
    },
    {
      colKey: 'mainIdea',
      title: '文章大意',
    },
    {
      colKey: 'operator',
      title: '操作',
      width: '10%',
      cell: (_, { row }) =>
        h('div', { class: 'w-48 flex flex-row justify-evenly' }, [
          h(
            TButton,
            {
              onClick: () => checkArticle(row),
            },
            { default: () => '查看' },
          ),
          h(
            TButton,
            {
              onClick: () => modifyArticle(row),
            },
            { default: () => '修改' },
          ),
          h(
            TButton,
            {
              onClick: () => deleteArticle(row),
            },
            { default: () => '删除' },
          ),
        ]),
    },
  ]);

  function modifyArticle(row: TableRowData) {
    store.currentArticle = {
      id: row.id,
      title: row.title,
      mainIdea: row.mainIdea,
      content: row.content,
    };
    useRouter().push(`/base/articleManage/${userId}/modifyArticle`);
  }
  function checkArticle(row: TableRowData) {
    store.currentArticle = {
      id: row.id,
      title: row.title,
      mainIdea: row.mainIdea,
      content: row.content,
    };
    useRouter().push(`/base/articleManage/${userId}/checkArticle`);
  }
  async function deleteArticle(row: TableRowData) {
    const { id } = row;
    await store.deleteArticle(id);
    await store.getCurrentManageUserArticleTotal();
    await store.getCurrentManageUserArticleList();
  }
  async function pageChange(x: { current: number; pageSize: number }) {
    if (currentUserPagination.value) {
      currentUserPagination.value.current = x.current;
      currentUserPagination.value.pageSize = x.pageSize;
      await store.getCurrentManageUserArticleList();
    }
  }
</script>

<template>
  <BasicInfo
    :avatar-url="avatarURL"
    :show-welcome="false"
    :data="currentManageUser"
  >
    <template #header>
      <back-button class="ml-3" />
    </template>
    <div
      class="h-full bg-white rounded-xl m-2 p-6 border-2 dark:bg-neutral-800 dark:border-zinc-600"
    >
      <div class="p-4 pt-0">
        <t-button
          @click="
            () => {
              store.currentArticle = {
                id: 0,
                title: '',
                mainIdea: '',
                content: '',
              };
              useRouter().push(`/base/articleManage/${userId}/addNewArticle`);
            }
          "
        >
          添加新文章
        </t-button>
      </div>
      <super-table
        v-model:pagination="currentUserPagination"
        :data="currentUserArticleList"
        :columns="columns"
        :loading="false"
        @page-change="pageChange"
      ></super-table>
    </div>
  </BasicInfo>
</template>

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