<template>
  <div>
    <!-- <a-table 
      :columns="column" 
      :data-source="data" 
      bordered
      :pagination="false"
      :scroll="{ x: 2000 }">
      <template #title>
        <a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" valueFormat="YYYY" />
      </template>
    </a-table> -->
    <ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" />
    <!-- <a-pagination 
      :current="queryParams.pageNum"
      :total="total"
      :page-size="queryParams.pageSize"
      style="display: flex;justify-content: center;margin-top: 16px;"
      :show-size-changer="true"
      :show-quick-jumper="true"
      @change="onChange" /> -->
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { http } from '/nerv-lib/util/http';
  import { Pagination } from 'ant-design-vue';
  import dayjs, { Dayjs } from 'dayjs';
  import { carbonEmission } from '/@/api/carbonEmissionFactorLibrary';
  defineOptions({
    energyType: 'CarbonEmissions', // 与页面路由name一致缓存才可生效
    components: {
      'a-pagination': Pagination,
    },
  });
  const orgId = ref('');
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  orgId.value = result;
  const fetch = (api, params = { orgId } ) => {
    return http.post(api, params);
  };
  const data = ref([]);
  const selectYear = ref<Dayjs>(dayjs( new Date().getFullYear().toString()));
  const total = ref<number>()
  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    year: selectYear.value.format('YYYY'),
    orgId: orgId.value
  })
  
  // 年份选择改变触发
  // const changeYearData = () => {
  //   queryParams.value.year = selectYear.value
  //   getTableList()
  // }
  // 表头
  const mainRef = ref();
  const column: TableColumnsType [] = [
    {
      title: '排放类型',
      dataIndex: 'cnValue',
      customCell: (record, rowIndex) => {
        if (rowIndex == undefined) {
          return {
            rowSpan: 0,
            colSpan: 0,
          };
        }
        const rowSpan = getRowSpan('cnValue', record, data.value);
        if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
          return {
            rowSpan: 0,
            colSpan: 0,
          };
        }
        return {
          rowSpan: rowSpan,
        };
      },
    },
    {
      title: '能源种类',
      dataIndex: 'energyType',
    },
    {
      title: '计量单位',
      dataIndex: 'unit',
    },
    {
      title: '加权平均',
      dataIndex: 'averageFactorValue',
    },
    {
      title: '全年',
      dataIndex: 'carbonYearly',
    },
    {
      title: '1月',
      dataIndex: 'jan',
    },
    {
      title: '2月',
      dataIndex: 'feb',
    },
    {
      title: '3月',
      dataIndex: 'mar',
    },
    {
      title: '4月',
      dataIndex: 'apr',
    },
    {
      title: '5月',
      dataIndex: 'may',
    },
    {
      title: '6月',
      dataIndex: 'jun',
    },
    {
      title: '7月',
      dataIndex: 'jul',
    },
    {
      title: '8月',
      dataIndex: 'aug',
    },
    {
      title: '9月',
      dataIndex: 'sep',
    },
    {
      title: '10月',
      dataIndex: 'oct',
    },
    {
      title: '11月',
      dataIndex: 'nov',
    },
    {
      title: '12月',
      dataIndex: 'dec',
    },
  ];
  const year = ref(selectYear.value.format('YYYY'))
  const tableConfig = ref({
    title: '碳排统计',
    api: carbonEmission.carbonEmissionStatistics,
    params: {
      orgId,
      year
    },
    columns: [
      {
        title: '排放类型',
        dataIndex: 'cnValue',
        customCell: (record, rowIndex) => {
          if (rowIndex == undefined) {
            return {
              rowSpan: 0,
              colSpan: 0,
            };
          }
          const rowSpan = getRowSpan('cnValue', record, data.value);
          if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
            return {
              rowSpan: 0,
              colSpan: 0,
            };
          }
          return {
            rowSpan: rowSpan,
          };
        },
      },
      {
        title: '能源种类',
        dataIndex: 'energyType',
      },
      {
        title: '计量单位',
        dataIndex: 'unit',
      },
      {
        title: '加权平均',
        dataIndex: 'averageFactorValue',
      },
      {
        title: '全年',
        dataIndex: 'carbonYearly',
      },
      {
        title: '1月',
        dataIndex: 'jan',
      },
      {
        title: '2月',
        dataIndex: 'feb',
      },
      {
        title: '3月',
        dataIndex: 'mar',
      },
      {
        title: '4月',
        dataIndex: 'apr',
      },
      {
        title: '5月',
        dataIndex: 'may',
      },
      {
        title: '6月',
        dataIndex: 'jun',
      },
      {
        title: '7月',
        dataIndex: 'jul',
      },
      {
        title: '8月',
        dataIndex: 'aug',
      },
      {
        title: '9月',
        dataIndex: 'sep',
      },
      {
        title: '10月',
        dataIndex: 'oct',
      },
      {
        title: '11月',
        dataIndex: 'nov',
      },
      {
        title: '12月',
        dataIndex: 'dec',
      },
    ],
    formConfig: {
      schemas: [
        {
          field: 'year',
          label: '年份',
          component: 'NsDatePicker',
          componentProps: {
            picker: 'year',
            valueFormat: 'YYYY',
            defaultValue: selectYear.value.format('YYYY'),
          },
        },
      ],
      params: {},
    },
    rowKey: 'id',
  });
  // 合并单元格
  const getRowSpan = (dataIndex: string, record: any, data: any, dependents: string[] = []) => {
    let rowSpan = 1;
    for (let i = data.indexOf(record) + 1; i < data.length; i++) {
      let shouldMerge = true;
      for (const dependent of dependents) {
        if (data[i][dependent] !== record[dependent]) {
          shouldMerge = false;
          break;
        }
      }
      if (shouldMerge && data[i][dataIndex] === record[dataIndex]) {
        rowSpan++;
      } else {
        break;
      }
    }
    return rowSpan;
  };
  // 获取表格数据
  // const getTableList = () => {
  //   fetch(carbonEmission.carbonEmissionStatistics , queryParams.value).then((res) => {
  //     data.value = res.data.records
  //     total.value = res.data.total
  //   });
  // };
  // 分页器
  // const onChange = (pageNumber: number,size: number) => {
  //   queryParams.value.pageNum = pageNumber;
  //   queryParams.value.pageSize = size;
  //   getTableList()
  // };
</script>
<style scoped lang="less">
  :deep(.ant-table-title){
    display: flex;
  }
  :deep(.ant-table-container){
    padding: 0px 16px;
  }
</style>
<style scoped>
  th.column-money,
  td.column-money {
    text-align: right !important;
  }
</style>