<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: 'year',
          align: 'center',
          width: 230,
          colSpan: (rowData, rowIndex) => (rowIndex === 9 ? 21 : 1),
        },
        {
          title: '第一季度',
          key: 'quarterOne',
          align: 'center',
          children: [
            { title: '产出', key: 'oneCc', align: 'center' },
            { title: '效果', key: 'oneXg', align: 'center' },
            { title: '管理', key: 'oneGl', align: 'center' },
            { title: '加分', key: 'oneBonus', align: 'center' },
            {
              title: '最终得分',
              key: 'oneScore',
              align: 'center',
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.oneScore,
                  }
                );
              },
            },
          ],
        },
        {
          title: '第二季度',
          key: 'quarterTwo',
          align: 'center',
          children: [
            { title: '产出', key: 'twoCc', align: 'center' },
            { title: '效果', key: 'twoXg', align: 'center' },
            { title: '管理', key: 'twoGl', align: 'center' },
            { title: '加分', key: 'twoBonus', align: 'center' },
            {
              title: '最终得分',
              key: 'twoScore',
              align: 'center',
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.twoScore,
                  }
                );
              },
            },
          ],
        },
        {
          title: '第三季度',
          key: 'quarterThr',
          align: 'center',
          children: [
            { title: '产出', key: 'threeCc', align: 'center' },
            { title: '效果', key: 'threeXg', align: 'center' },
            { title: '管理', key: 'threeGl', align: 'center' },
            { title: '加分', key: 'threeBonus', align: 'center' },
            {
              title: '最终得分',
              key: 'threeScore',
              align: 'center',
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.threeScore,
                  }
                );
              },
            },
          ],
        },
        {
          title: '第四季度',
          key: 'quarterFou',
          align: 'center',
          children: [
            { title: '产出', key: 'fourCc', align: 'center' },
            { title: '效果', key: 'fourXg', align: 'center' },
            { title: '管理', key: 'fourGl', align: 'center' },
            { title: '加分', key: 'fourBonus', align: 'center' },
            {
              title: '最终得分',
              key: 'fourScore',
              align: 'center',
              render(row) {
                return h(
                  NTag,
                  {
                    bordered: false,
                    color: {
                      textColor: 'red',
                    },
                  },
                  {
                    default: () => row.fourScore,
                  }
                );
              },
            },
          ],
        },
        {
          title: '年度得分',
          key: 'score',
          align: 'center',
          render(row) {
            return h(
              NTag,
              {
                bordered: false,
                color: {
                  textColor: 'red',
                },
              },
              {
                default: () => row.score,
              }
            );
          },
        },
        {
          title: '考核支付系数',
          key: 'payRate',
          align: 'center',
        },
      ],
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style></style>