<template>
  <n-data-table :key="(row) => row.key"
                :data="data"
                :loading="tableLoading"
                :columns="columns"
                :single-line="false" />
</template>

<script>
import { reactive, toRefs, h } from 'vue';
import { NTag } from 'naive-ui';

export default {
  props: {
    data: Array,
    tableLoading: Boolean,
  },
  setup() {
    const state = reactive({
      columns: [
        {
          title: '工程项目',
          key: 'projectName',
          align: 'center',
          width:120,
        },
        {
          title: '第一季度',
          key: 'One',
          align: 'center',
          children: [
            {
              title: '已核销',
              key: 'written1',
              align: 'center',
              width:70,
            },
            {
              title: '已整改',
              key: 'rectified1',
              align: 'center',
              width:70,
            },
            {
              title: '待整改',
              key: 'unRectified1',
              align: 'center',
              width:70,
            },
            {
              title: '问题总数',
              key: 'questionTotal1',
              align: 'center',
              width:60,
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.questionTotal1,
                  }
                );
              },
            },
          ],
        },
        {
          title: '第二季度',
          key: 'One',
          align: 'center',
          children: [
            {
              title: '已核销',
              key: 'written2',
              align: 'center',
              width:70,
            },
            {
              title: '已整改',
              key: 'rectified2',
              align: 'center',
              width:70,
            },
            {
              title: '待整改',
              key: 'unRectified2',
              align: 'center',
              width:70,
            },
            {
              title: '问题总数',
              key: 'questionTotal2',
              align: 'center',
              width:60,
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.questionTotal2,
                  }
                );
              },
            },
          ],
        },
        {
          title: '第三季度',
          key: 'One',
          align: 'center',
          children: [
            {
              title: '已核销',
              key: 'written3',
              align: 'center',
              width:70,
            },
            {
              title: '已整改',
              key: 'rectified3',
              align: 'center',
              width:70,
            },
            {
              title: '待整改',
              key: 'unRectified3',
              align: 'center',
              width:70,
            },
            {
              title: '问题总数',
              key: 'questionTotal3',
              align: 'center',
              width:60,
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.questionTotal3,
                  }
                );
              },
            },
          ],
        },
        {
          title: '第四季度',
          key: 'One',
          align: 'center',
          children: [
            {
              title: '已核销',
              key: 'written4',
              align: 'center',
              width:70,
            },
            {
              title: '已整改',
              key: 'rectified4',
              align: 'center',
              width:70,
            },
            {
              title: '待整改',
              key: 'unRectified4',
              align: 'center',
              width:70,
            },
            {
              title: '问题总数',
              key: 'questionTotal4',
              align: 'center',
              width:60,
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.questionTotal4,
                  }
                );
              },
            },
          ],
        },
        {
          title: '问题数合计',
          key: 'questionTotal',
          align: 'center',
          width:70,
          render(row) {
            return h(
              NTag,
              {
                bordered: false,
                color: {
                  textColor: 'red',
                },
              },
              {
                default: () => row.questionTotal,
              }
            );
          },
        },
      ],
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style></style>