<script setup lang="tsx">
  import SuperTable from '~/components/SuperTable.vue';
  import * as echarts from 'echarts';
  import type { TableProps, TableRowData } from 'tdesign-vue-next';
  import { useWindowSize } from '@vueuse/core';

  const store = useArticleStore();
  const { pagination, articleList } = storeToRefs(store);

  const columns = ref<TableProps['columns']>([
    {
      colKey: 'index',
      title: '序号',
      cell: (_, { rowIndex }: { rowIndex: number }) => (
        <div>
          {(pagination.value!.current! - 1) * pagination.value!.pageSize! +
            rowIndex +
            1}
        </div>
      ),
    },
    {
      colKey: 'name',
      title: '作者姓名',
    },
    {
      colKey: 'amount',
      title: '文章数量',
    },
    {
      colKey: 'operator',
      title: '操作',
      cell: (_, { row }) => (
        <div class="w-40 flex flex-row justify-evenly">
          <t-button onClick={() => manageArticle(row)}>进入文章管理</t-button>
        </div>
      ),
    },
  ]);

  function pageChange(x: { current: number; pageSize: number }) {
    if (pagination.value) {
      pagination.value.current = x.current;
      pagination.value.pageSize = x.pageSize;
      store.getArticleList();
    }
  }

  function manageArticle(row: TableRowData) {
    const router = useRouter();
    router.push(`/base/articleManage/${row.id}`);
    // router.push()
  }

  onMounted(async () => {
    await store.getTotal();
    await store.getArticleList();
    const chartDom = document.getElementById('echarts')!;
    const chart = echarts.init(chartDom);

    const option = {
      title: {
        text: '柱状图示例',
        left: 'center',
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: articleList.value.map((item: ArticleUser) => item.name),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: articleList.value.map((item: ArticleUser) => item.amount),
          type: 'bar',
          itemStyle: {
            color: (params: { dataIndex: number }) => {
              const colors = [
                '#f1dbc3',
                '#7493a8',
                '#edc5ac',
                '#cdaba2',
                '#abb0b3',
                '#cfc2b9',
                '#a2979f',
              ];
              return colors[params.dataIndex % colors.length];
            },
          },
        },
      ],
    };
    chart.setOption(option);
    watch(useWindowSize().width, (_val) => {
      chart.resize();
    });
  });
</script>

<template>
  <div class="p-6">
    <div class="flex md:flex-row flex-col">
      <div
        class="flex-[1] m-2 p-6 bg-white rounded-xl dark:bg-zinc-800 border-2 dark:border-zinc-600"
      >
        <SuperTable
          v-model:pagination="pagination"
          :data="articleList"
          :columns="columns"
          :loading="false"
          @page-change="pageChange"
        />
      </div>
      <div
        class="m-2 flex-[1] p-6 bg-white dark:bg-zinc-800 border-2 dark:border-zinc-600 rounded-xl"
      >
        <div id="echarts" class="w-full h-96"></div>
      </div>
    </div>
  </div>
</template>

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