<template>
  <div class="dustMonitor">
    <customHeader>粉尘日常监测报表</customHeader>
    <div class="select-container">
      <span class="select-label">选择文件：</span>
      <a-select v-model:value="formSearch.fileId" style="width: 220px" size="small" placeholder="请选择...">
        <a-select-option v-for="item in selectList" :key="item.fileId">{{ item.fileName }}</a-select-option>
      </a-select>
      <a-button type="primary" style="margin-left: 10px" @click="getSearch">查询</a-button>
    </div>
    <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW"> </a-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { columns } from './dust-table.data';
import { getDustInfoList, getAllFileList } from './dsut-table.api';
import customHeader from '/@/components/vent/customHeader.vue';

let tableData = ref<any[]>([]);
let selectList = ref<any[]>([]);

let formSearch = reactive({
  pageNum: 1,
  pageSize: 1000,
  fileId: '',
  fileName: '',
});
//获取粉尘监测结果数据
async function getTableList(params: any) {
  let res = await getDustInfoList({ type: 'smoke', ...params });
  const content = res.content;
  let contentArr = JSON.parse(content);
  tableData.value = contentArr;
}
//获取所有文件列表
async function getAllFile() {
  let res = await getAllFileList({ type: 'smoke' });
  selectList.value = res.records.map((item: any) => ({
    fileId: item.fileId,
    fileName: item.fileName,
  }));
}
//查询
function getSearch() {
  const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
  const params = {
    fileId: formSearch.fileId,
    fileName: selectedFile ? selectedFile.fileName : '',
  };
  getTableList(params);
}
onMounted(() => {
  getTableList({ type: 'smoke' });
  getAllFile();
});
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

.dustMonitor {
  width: 100%;
  height: 100%;
  padding: 80px 10px 15px 10px;
  box-sizing: border-box;
  position: relative;
}

.select-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.select-label {
  margin-right: 10px;
  color: white;
}

.action-link {
  color: #1890ff;
  cursor: pointer;
}

.dustMonitor {
  width: 100%;
  height: 100%;
  padding: 80px 10px 15px 10px;
  box-sizing: border-box;
  position: relative;
}

:deep(.zxm-table-thead > tr > th:last-child) {
  border-right: 1px solid #91e9fe !important;
}

:deep(.zxm-picker-input > input) {
  color: #fff;
}

:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
  border: 1px solid var(--vent-form-item-border) !important;
  background-color: #ffffff00 !important;
}

:deep(.zxm-select-selection-item) {
  color: #fff !important;
}
</style>