<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>
    <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 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: 'unitName',
    },
    {
      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 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
    });
  };
    getTableList()
  // 分页器
  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>