<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <a-table
      :columns="tableColumns"
      :data-source="data"
      bordered
      :pagination="false"
      :scroll="{ x: 100 }">
      <template #title>
        <div
          style="display: flex; align-items: center; justify-content: space-between; width: 100%">
          <div style="display: flex; align-items: center; width: 85%">
            <div style="width: 10%">数据报表</div>
            <a-select
              v-model:value="typeValue"
              placeholder="请选择环境参数"
              style="width: 15%"
              :options="typeList" />
            <a-tree-select
              v-model:value="quyuvalue"
              style="width: 15%; margin-left: 10px"
              :tree-data="treeData2"
              tree-checkable
              allow-clear
              placeholder="请选择区域"
              tree-node-filter-prop="label"
              :maxTagCount="1" />
            <a-select
              v-model:value="frequencyValue"
              placeholder="请选择采集频率"
              style="width: 15%; margin-left: 10px"
              :options="frequencyOptions" />
            <a-date-picker style="width: 15%; margin-left: 10px" v-model:value="timeValue" />
            <a-button type="primary" style="margin-left: 10px" @click="getSelect"> 查询 </a-button>
          </div>
          <a-button type="primary"> 导出 </a-button>
        </div>
      </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, onMounted, defineOptions } from 'vue';
  // import { http } from '/nerv-lib/util/http';
  import { Pagination, SelectProps, TreeSelectProps, TableColumnType } from 'ant-design-vue';
  import { tableColumns as tableColumnsA } from './config';
  import type { Dayjs } from 'dayjs';
  // import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
  defineOptions({
    energyType: 'HistoryData', // 与页面路由name一致缓存才可生效
    components: {
      'a-pagination': Pagination,
    },
  });
  const typeList = ref();
  const typeValue = ref();
  const quyuvalue = ref<string[]>([]);
  // 采集频率
  const frequencyValue = ref<string | undefined>();

  // 采集频率list
  const frequencyOptions = ref<SelectProps['options']>([]);

  const treeData2 = ref<TreeSelectProps['treeData']>([]);
  const data = ref([]);
  const timeValue = ref<Dayjs>();
  let tableColumns = ref<TableColumnType[]>([]);

  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;
    // });
  };
  onMounted(() => {
    frequencyOptions.value = [
      {
        value: '1',
        label: '5分钟',
      },
      {
        value: '2',
        label: '10分钟',
      },
      {
        value: '3',
        label: '30分钟',
      },
      {
        value: '4',
        label: '1小时',
      },
      {
        value: '5',
        label: '天',
      },
    ];
    typeList.value = [
      {
        id: 1,
        value: '温度',
      },
      {
        id: 2,
        value: 'CO2浓度',
      },
      {
        id: 3,
        value: 'PM2.5',
      },
      {
        id: 4,
        value: '光照度',
      },
      {
        id: 5,
        value: 'TVOC',
      },
      {
        id: 6,
        value: '湿度',
      },
    ];
    treeData2.value = [
      {
        label: '办公区',
        value: '0-0',
        children: [
          {
            label: '办公一区',
            value: '0-0-0',
          },
          {
            label: '办公二区',
            value: '0-0-1',
          },
          {
            label: '办公三区',
            value: '0-0-2',
          },
          {
            label: '办公四区',
            value: '0-0-3',
          },
        ],
      },
      {
        label: '站厅',
        value: '0-1',

        children: [
          {
            label: '站厅一区',
            value: '0-1-0',
            // disabled: true,
          },
          {
            label: '站厅二区',
            value: '0-1-1',
          },
          {
            label: '站厅三区',
            value: '0-1-2',
          },
          {
            label: '站厅四区',
            value: '0-1-3',
          },
        ],
      },
    ];
    let tableColumnsB = [
      {
        title: '1:00',
        dataIndex: '1:00',
      },
      {
        title: '2:00',
        dataIndex: '2:00',
      },
      {
        title: '3:00',
        dataIndex: '3:00',
      },
      {
        title: '4:00',
        dataIndex: '4:00',
      },
    ];
    let columnA: any[] = [...tableColumnsA];
    columnA.push(...tableColumnsB);
    tableColumns.value = columnA;
  });

  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>
