<template>
  <!-- 数据统计 -->
  <div class="dataStats">
    <div class="tableLineMonitor">
      <el-icon @click="checkLine('2')" title="图形报表分析"><Histogram /></el-icon>
    </div>
    <!-- 表格 -->
    <div class="tableBox animate__animated animate__zoomIn">
      <el-table v-loading="tableLoading" :data="tableData">
        <el-table-column
          :label="item.title + item.unit"
          :prop="item.key"
          v-for="item in tableHead"
          :key="item.key"
          :width="tableHead.length > 5 ? '160' : ''"
          :fixed="item.key == 'ut' ? 'right' : false"
        >
          <!-- 有二级 -->
          <el-table-column :label="item2.title" :prop="item2.key" v-if="item.isChild == 0" v-for="item2 in item.childList" :key="item2.key">
            <template #default="scope">
              <div v-html="scope.row[item2.key]"></div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <Pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getTableBodyData"
      />
    </div>
  </div>
</template>
<script setup>
import { dataAnalysisHead, dataAnalysisBody } from '@/api/dataAnalysis/syntherticData';

const props = defineProps({
  searchDate: Array,
  stationCode: String,
});
const { proxy } = getCurrentInstance();
const emits = defineEmits(['changeOneData']);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  startTime: props.searchDate[0] || '',
  endTime: props.searchDate[1] || '',
  stCode: '',
});
const total = ref(0);
const tableData = ref([]);
const tableHead = ref([]);
const tableLoading = ref(false);

// 获取列表数据
async function getList(code) {
  // console.log('数据统计---', code, props.searchDate);
  if (!!!code) return; //无code时不显示数据
  tableLoading.value = true;
  // 动态表头
  let params = { stCode: code };
  let res = await dataAnalysisHead(params);
  if (res && res.code == 200) {
    tableHead.value = res.data || [];
  }
  // 数据
  queryParams.value.stCode = code;
  queryParams.value.startTime = props.searchDate[0];
  queryParams.value.endTime = props.searchDate[1];
  let res2 = await dataAnalysisBody(queryParams.value);
  if (res2 && res2.code == 200) {
    tableData.value = res2.data || [];
    total.value = res2.total;
  }
  tableLoading.value = false;
}
// 分页切换加载
function getTableBodyData() {
  tableLoading.value = true;
  queryParams.value.stCode = props.stationCode;
  queryParams.value.startTime = props.searchDate[0];
  queryParams.value.endTime = props.searchDate[1];
  dataAnalysisBody(queryParams.value).then(res => {
    tableData.value = res.data || [];
    total.value = res.total;
  });
  tableLoading.value = false;
}
// 点击切换
function checkLine(val) {
  emits('changeOneData', val);
}
// 初始化
onMounted(() => {
  getList(props.stationCode);
});
defineExpose({
  getList,
});
onBeforeUnmount(() => {});
</script>
<style lang="scss">
.dataStats {
  width: 100%;
  .tableBox {
    .el-pagination {
      right: 25%;
    }
    .el-scrollbar {
      height: calc(100vh - 650px);
    }
    .el-table {
      border: 1px solid #066592;
      .redIcon {
        font-size: 20px;
        color: red;
      }
    }
  }
}
</style>