<template>
  <a-table :columns="columns" :data-source="data" bordered />
</template>

<script lang="ts">
  import { defineComponent, ref, inject, watch, onMounted } from 'vue';

  export default defineComponent({
    name: 'AnalysisTable',
    setup() {
      const columns = [
        {
          title: '设备/节点',
          dataIndex: 'key',
        },
        {
          title: '统计值',
          dataIndex: 'name',
        },
        {
          title: '同比',
          children: [
            {
              title: '△差值',
              dataIndex: 'position',
            },
            {
              title: '增长率',
              dataIndex: 'unit',
            },
          ],
        },
        {
          title: '环比',
          children: [
            {
              title: '△差值',
              dataIndex: 'position',
            },
            {
              title: '增长率',
              dataIndex: 'unit',
            },
          ],
        },
        {
          title: '纵向对比',
          children: [
            {
              title: '△差值',
              dataIndex: 'position',
            },
            {
              title: '增长率',
              dataIndex: 'unit',
            },
          ],
        },

        {
          title: '操作',
          dataIndex: 'date',
        },
      ];
      let data = ref<any[]>([]);

      interface PageData {
        // 图表 表格数据
        graphTableList: any[];
        // 图表 表格表头
        graphTableColumns: any[];
        // 图表 图表数据
        graphGraphList: any[];
        // 分析 表格数据
        analysisTableList: any[];
        // 分析 图表数据
        analysisGraphList: any[];
      }
      const pageData = inject<PageData>('pageData');

      if (!pageData) {
        throw new Error('pageData is not provided');
      }
      // 监听 pageData 的变化
      watch(
        () => pageData as PageData,
        (_newValue, _oldValue) => {
          data.value = pageData.analysisTableList;
        },
        { deep: true },
      );
      onMounted(() => {
        data.value = pageData.analysisTableList;
      });
      return {
        data,
        columns,
      };
    },
  });
</script>

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