<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: '1月',
          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: 'oneScore',
              align: 'questionTotal1',
              width:60,
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.questionTotal1,
                  }
                );
              },
            },
          ],
        },
        {
          title: '2月',
          key: 'Two',
          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: '3月',
          key: 'Three',
          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: '4月',
          key: 'Four',
          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: '5月',
          key: 'Five',
          align: 'center',
          children: [
            {
              title: '已核销',
              key: 'written5',
              align: 'center',
              width:70,
            },
            {
              title: '已整改',
              key: 'rectified5',
              align: 'center',
              width:70,
            },
            {
              title: '待整改',
              key: 'unRectified5',
              align: 'center',
              width:70,
            },
            {
              title: '问题总数',
              key: 'questionTotal5',
              align: 'center',
              width:60,
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.questionTotal5,
                  }
                );
              },
            },
          ],
        },
        {
          title: '6月',
          key: 'Six',
          align: 'center',
          children: [
            {
              title: '已核销',
              key: 'written6',
              align: 'center',
              width:70,
            },
            {
              title: '已整改',
              key: 'rectified6',
              align: 'center',
              width:70,
            },
            {
              title: '待整改',
              key: 'unRectified6',
              align: 'center',
              width:70,
            },
            {
              title: '问题总数',
              key: 'questionTotal6',
              align: 'center',
              width:60,
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.questionTotal6,
                  }
                );
              },
            },
          ],
        },
        {
          title: '7月',
          key: 'Seven',
          align: 'center',
          children: [
            {
              title: '已核销',
              key: 'written7',
              align: 'center',
              width:70,
            },
            {
              title: '已整改',
              key: 'rectified7',
              align: 'center',
              width:70,
            },
            {
              title: '待整改',
              key: 'unRectified7',
              align: 'center',
              width:70,
            },
            {
              title: '问题总数',
              key: 'questionTotal7',
              align: 'center',
              width:60,
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.questionTotal7,
                  }
                );
              },
            },
          ],
        },
        {
          title: '8月',
          key: 'Eight',
          align: 'center',
          children: [
            {
              title: '已核销',
              key: 'written8',
              align: 'center',
              width:70,
            },
            {
              title: '已整改',
              key: 'rectified8',
              align: 'center',
              width:70,
            },
            {
              title: '待整改',
              key: 'unRectified8',
              align: 'center',
              width:70,
            },
            {
              title: '问题总数',
              key: 'questionTotal8',
              align: 'center',
              width:60,
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.questionTotal8,
                  }
                );
              },
            },
          ],
        },
        {
          title: '9月',
          key: 'Nine',
          align: 'center',
          children: [
            {
              title: '已核销',
              key: 'written9',
              align: 'center',
              width:70,
            },
            {
              title: '已整改',
              key: 'rectified9',
              align: 'center',
              width:70,
            },
            {
              title: '待整改',
              key: 'unRectified9',
              align: 'center',
              width:70,
            },
            {
              title: '问题总数',
              key: 'questionTotal9',
              align: 'center',
              width:60,
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.questionTotal9,
                  }
                );
              },
            },
          ],
        },
        {
          title: '10月',
          key: 'Ten',
          align: 'center',
          children: [
            {
              title: '已核销',
              key: 'written10',
              align: 'center',
              width:70,
            },
            {
              title: '已整改',
              key: 'rectified10',
              align: 'center',
              width:70,
            },
            {
              title: '待整改',
              key: 'unRectified10',
              align: 'center',
              width:70,
            },
            {
              title: '问题总数',
              key: 'questionTotal10',
              align: 'center',
              width:60,
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.questionTotal10,
                  }
                );
              },
            },
          ],
        },
        {
          title: '11月',
          key: 'Eleven',
          align: 'center',
          children: [
            {
              title: '已核销',
              key: 'written11',
              align: 'center',
              width:70,
            },
            {
              title: '已整改',
              key: 'rectified11',
              align: 'center',
              width:70,
            },
            {
              title: '待整改',
              key: 'unRectified11',
              align: 'center',
              width:70,
            },
            {
              title: '问题总数',
              key: 'questionTotal11',
              align: 'center',
              width:60,
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.questionTotal11,
                  }
                );
              },
            },
          ],
        },
        {
          title: '12月',
          key: 'Twelve',
          align: 'center',
          children: [
            {
              title: '已核销',
              key: 'written12',
              align: 'center',
              width:70,
            },
            {
              title: '已整改',
              key: 'rectified12',
              align: 'center',
              width:70,
            },
            {
              title: '待整改',
              key: 'unRectified12',
              align: 'center',
              width:70,
            },
            {
              title: '问题总数',
              key: 'questionTotal12',
              align: 'center',
              width:60,
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.questionTotal12,
                  }
                );
              },
            },
          ],
        },
        {
          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>