<template>
  <div>
    <a-table 
      :columns="tableColumns" 
      :data-source="data" 
      bordered
      :pagination="false"
      :scroll="{ x: 2000 }">
      <template #title>
        <a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" />
      </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 { tableColumns } from '../config';
  import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
  defineOptions({
    energyType: 'CarbonEmissions', // 与页面路由name一致缓存才可生效
    components: {
      'a-pagination': Pagination,
    },
  });
  const data = ref([]);
  const selectYear = ref<Dayjs>();
  const total = ref<number>()
  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
  })
  const orgId = ref('');
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  orgId.value = result;
  const fetch = (api, params = { orgId } ) => {
    return http.post(api, params);
  };
  
  // 年份选择改变触发
  const changeYearData = () => {
    queryParams.value.year = selectYear.value.format('YYYY')
    getTableList()
  }
  // 获取表格数据
  const getTableList = () => {
    fetch(energyConsumption.pageList , 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">
  ::v-deep .ant-table-title{
    display: flex;
  }
  ::v-deep .ant-table-container{
    padding: 0px 16px;
  }
</style>
<style scoped>
  th.column-money,
  td.column-money {
    text-align: right !important;
  }
</style>