<template>
  <div class="substation">
    <!-- 厂站数据维护 -->
    <div class="searchBox">
      <n-space>
        <n-date-picker v-model:value="timeRange" type="datetimerange" clearable />
        <n-button type="primary" @click="handleClick('search')">
          <template #icon>
            <n-icon>
              <Search />
            </n-icon> </template
          >搜索
        </n-button>
        <n-button type="primary" @click="handleClick('download')">
          <template #icon>
            <n-icon>
              <Download />
            </n-icon> </template
          >模板下载
        </n-button>
        <n-button type="primary" @click="handleClick('export')">
          <template #icon>
            <n-icon>
              <CloudUpload />
            </n-icon> </template
          >批量导入
        </n-button>
      </n-space>
    </div>
    <div class="tableBox">
      <n-data-table
        ref="tableRef"
        :bordered="true"
        striped
        :max-height="700"
        :columns="columns"
        :data="tableData"
        :remote="true"
        scroll-x="5500"
        :loading="tableLoading"
        :pagination="pagination"
      >
      </n-data-table>
    </div>
    <!-- 批量导入弹窗 -->
    <n-modal
      v-model:show="showModalImport"
      :mask-closable="false"
      :show-icon="false"
      preset="dialog"
      title="批量导入"
      :style="{ width: '500px' }"
    >
      <n-form :label-width="100" :model="addFormValue" label-placement="left">
        <n-form-item label="文件导入：" style="display: grid">
          <n-upload :max="1" accept=".xlsx,.xls" @before-upload="uploadImport">
            <n-button>上传文件</n-button>
            <p style="margin-top: 10px">支持扩展名.xlsx,.xls,文件个数:1个(若需重新上传,需要先删除当前文件)</p>
          </n-upload>
        </n-form-item>
      </n-form>
      <template #action>
        <n-space>
          <n-button @click="() => (showModalImport = false)">取消</n-button>
          <n-button type="primary" @click="handleClick('sureImport')">确定</n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script>
import { reactive, toRefs, ref, h, onMounted } from 'vue';
import { Search, CloudUpload, Download } from '@vicons/ionicons5';
import { czgqSearch, czgqExport } from '@/services';
import { formatDate, downloadBlob } from '@/utils/util';
import axios from 'axios';

export default {
  name: 'substation',
  components: {
    Search,
    CloudUpload,
    Download,
  },
  setup() {
    const allData = reactive({
      timeRange: null,
      showModalImport: false,
      importFormFile: '', //导入的文件流,
      tableData: [],
      tableLoading: true,
      columns: [
        {
          title: '黄机流域污水厂合计(万吨)',
          key: 'flowAreaSewageStationTotal',
          align: 'center',
        },
        {
          title: '流域污水处理量合计(万吨)',
          key: 'flowAreaSewageTotal',
          align: 'center',
        },
        {
          title: '长江水位(米)',
          key: 'changjiangSw',
          align: 'center',
        },
        {
          title: '雨量(米)',
          key: 'changjiangYl',
          align: 'center',
        },
        {
          title: '分散设施合计(万吨)',
          key: 'diserDevTotal',
          align: 'center',
        },
        {
          title: '总水量(万吨)',
          key: 'waterTotal',
          align: 'center',
        },
        {
          title: '常青路泵站',
          align: 'center',
          children: [
            {
              title: '处理水量(万吨)',
              key: 'cqlStationDealTotal',
              align: 'center',
            },
            {
              title: '最高液位(米)',
              key: 'cqlStationHigh',
              align: 'center',
            },
            {
              title: '最低液位(米)',
              key: 'cqlStationLow',
              align: 'center',
            },
          ],
        },
        {
          title: '古二泵站',
          align: 'center',
          children: [
            {
              title: '处理水量(万吨)',
              key: 'gebStationDealTotal',
              align: 'center',
            },
            {
              title: '最高液位(米)',
              key: 'gebStationHigh',
              align: 'center',
            },
            {
              title: '最低液位(米)',
              key: 'gebStationLow',
              align: 'center',
            },
          ],
        },
        {
          title: '汉西厂',
          align: 'center',
          children: [
            {
              title: '处理水量(万吨)',
              key: 'hanWestTotal',
              align: 'center',
            },
            {
              title: '最高液位(米)',
              key: 'hanWestHigh',
              align: 'center',
            },
            {
              title: '最低液位(米)',
              key: 'hanWestLow',
              align: 'center',
            },
          ],
        },
        {
          title: '黄埔厂',
          align: 'center',
          children: [
            {
              title: '处理水量(万吨)',
              key: 'hpuDealTotal',
              align: 'center',
            },
            {
              title: '最高液位(米)',
              key: 'hpuDealHigh',
              align: 'center',
            },
            {
              title: '最低液位(米)',
              key: 'hpuDealLow',
              align: 'center',
            },
          ],
        },
        {
          title: '黄孝河水位(铁路桥泵站m)',
          key: 'hxhSwNight',
          align: 'center',
        },
        {
          title: '机场河分散-处理水量(万吨)',
          key: 'jchDiserDealTotal',
          align: 'center',
        },
        {
          title: '机场河临时污水厂',
          align: 'center',
          children: [
            {
              title: '(10万吨)',
              key: 'jchTmpSewage10total',
              align: 'center',
            },
            {
              title: '(3万吨)',
              key: 'jchTmpSewage3total',
              align: 'center',
            },
            {
              title: '(10万吨)最高液位(米)',
              key: 'jchTmpSewageHigh',
              align: 'center',
            },
            {
              title: '(10万吨)最低液位(米)',
              key: 'jchTmpSewageLow',
              align: 'center',
            },
          ],
        },
        {
          title: '机场河西渠水位',
          align: 'center',
          children: [
            {
              title: '钢坝闸下游(8点)',
              key: 'jichang8dDn',
              align: 'center',
            },
            {
              title: '钢坝闸下游(12点)',
              key: 'jichang12dDn',
              align: 'center',
            },
            {
              title: '钢坝闸下游(20点)',
              key: 'jichang20dDn',
              align: 'center',
            },
            {
              title: '钢坝闸上游(8点)',
              key: 'jichang8dUp',
              align: 'center',
            },
            {
              title: '钢坝闸上游(12点)',
              key: 'jichang12dUp',
              align: 'center',
            },
            {
              title: '钢坝闸上游(20点)',
              key: 'jichang20dUp',
              align: 'center',
            },
          ],
        },
        {
          title: '建设渠分散-处理水量(万吨)',
          key: 'jsqDiserDealTotal',
          align: 'center',
        },
        {
          title: '建设渠泵站',
          align: 'center',
          children: [
            {
              title: '处理水量(万吨)',
              key: 'jsqStationDealTotal',
              align: 'center',
            },
            {
              title: '最高液位(米)',
              key: 'jsqStationHigh',
              align: 'center',
            },
            {
              title: '最低液位(米)',
              key: 'jsqStationLow',
              align: 'center',
            },
          ],
        },
        {
          title: '三金潭厂',
          align: 'center',
          children: [
            {
              title: '处理水量(万吨)',
              key: 'sjtDealTotal',
              align: 'center',
            },
            {
              title: '最高液位(米)',
              key: 'sjtDealHigh',
              align: 'center',
            },
            {
              title: '最低液位(米)',
              key: 'sjtDealLow',
              align: 'center',
            },
          ],
        },
        {
          title: '铁路桥分散-处理水量(万吨)',
          key: 'tlqDiserPhrase1DealTotal',
          align: 'center',
        },
        {
          title: '铁路桥泵站一期',
          align: 'center',
          children: [
            {
              title: '处理水量(万吨)',
              key: 'tlqPhrase1DealTotal',
              align: 'center',
            },
            {
              title: '最高液位(米)',
              key: 'tlqPhrase1High',
              align: 'center',
            },
            {
              title: '最低液位(米)',
              key: 'tlqPhrase1Low',
              align: 'center',
            },
          ],
        },
        {
          title: '铁路桥泵站二期',
          align: 'center',
          children: [
            {
              title: '处理水量(万吨)',
              key: 'tlqPhrase2DealTotal',
              align: 'center',
            },
            {
              title: '最高液位(米)',
              key: 'tlqPhrase2High',
              align: 'center',
            },
            {
              title: '最低液位(米)',
              key: 'tlqPhrase2Low',
              align: 'center',
            },
          ],
        },
        {
          title: '铁路桥地下水厂10万吨',
          align: 'center',
          children: [
            {
              title: '处理水量(万吨)',
              key: 'tlqUnderDeal10total',
              align: 'center',
            },
            {
              title: '最高液位(米)',
              key: 'tlqUnderDealHigh',
              align: 'center',
            },
            {
              title: '最低液位(米)',
              key: 'tlqUnderDealLow',
              align: 'center',
            },
          ],
        },
      ],
    });
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      onChange: (page) => {
        paginationReactive.page = page;
        getTableData();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        getTableData();
      },
    });
    // 查询数据
    async function getTableData() {
      let startDate = allData.timeRange ? formatDate(allData.timeRange[0]) : null;
      let endDate = allData.timeRange ? formatDate(allData.timeRange[1]) : null;
      let pramas = {
        current: paginationReactive.page,
        size: paginationReactive.pageSize,
        endDate: endDate,
        startDate: startDate,
      };
      allData.tableLoading = true;
      let res = await czgqSearch(pramas);
      if (res && res.code == 200) {
        let datas = res.data;
        allData.tableData = datas.records;
        paginationReactive.pageCount = datas.pages;
        paginationReactive.itemCount = datas.total;
      }
      allData.tableLoading = false;
    }
    // 点击事件
    async function handleClick(type, row) {
      switch (type) {
        case 'search':
          getTableData();
          break;
        case 'export':
          allData.showModalImport = true;
          break;
        case 'sureImport':
          // 文件导入的确定点击
          importFileSure();
          break;
        case 'download':
          const token = localStorage.getItem('tokenXF');
          axios
            .get(`/api/comsys/stationhxhofflinedata/factoryStationTemplateDown`, {
              headers: {
                token: token,
              },
              responseType: 'blob',
              params: {},
            })
            .then(function (res) {
              console.log(res, 'res');
              downloadBlob(res.data, decodeURIComponent(res.headers['content-disposition'].split('filename=')[1]));
            });
          break;
      }
    }
    // 文件导入
    const uploadImport = async (file) => {
      let formdata = new FormData();
      formdata.append('file', file.file.file);
      allData.importFormFile = formdata;
    };
    // 导入确定点击
    const importFileSure = async () => {
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' },
      };
      let res = await czgqExport(allData.importFormFile, config);
      if (res && res.code === 200) {
        allData.showModalImport = false;
        getTableData();
      }
    };

    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(allData),
      pagination: paginationReactive,
      handleClick,
      uploadImport,
    };
  },
};
</script>

<style lang="less">
.substation {
  width: 100%;
  .tableBox {
    margin: 10px auto;
    .n-data-table .n-data-table-th {
      vertical-align: middle;
      border-right: 1px solid #214959;
    }
    .n-data-table .n-data-table-td {
      border-right: 1px solid #214959;
    }
  }
}
</style>