<template>
  <!-- 降雨报告单详情 -->
  <el-button plain type="warning" @click="downloadPdf" style="margin: 10px 0px">下载</el-button>
  <div class="publicContainer reportDetail" v-loading="showLoading" id="rainReport">
    <h1>孝感市建成区降雨分析报告</h1>
    <h4>报告时间：{{ detailData.createTime }}</h4>
    <p class="title">一、降雨事件</p>
    <p class="content">1,预报降雨：{{ detailData.weatherWarnDesc || '--' }}</p>
    <p class="content">2,实际降雨发生时长：{{ detailData.startTime }} 至 {{ detailData.endTime }} 。</p>
    <p class="content">3,累计降雨量：{{ detailData.accumulate || '--' }} mm。</p>
    <p class="content">4,发生内涝积水位置：{{ detailData.waterloggingSiteNumber || '--' }} 处。</p>
    <p class="content">5,共有{{ detailData.warnSiteNumber || '--' }} 处告警：</p>
    <div id="chartOneBG"></div>

    <p class="title">二、雨量站数据统计</p>
    <el-table :data="detailData.rainfallAnalysisVos" class="detailDataTable">
      <el-table-column label="站点名称" prop="stName" class="pdf-details" />
      <el-table-column label="站点编号" prop="stCode" class="pdf-details" />
      <el-table-column label="观测时间" prop="ttTime" class="pdf-details" />
      <el-table-column label="当日累计降雨量(mm)" prop="accumulate" class="pdf-details" />
      <el-table-column label="5分钟时段降雨量峰值(mm)" prop="maxMinute5" class="pdf-details" />
      <el-table-column label="1小时降雨量峰值(mm)" prop="maxHour1" class="pdf-details" />
      <el-table-column label="3小时降雨量峰值(mm)" prop="maxHour3" class="pdf-details" />
      <el-table-column label="6小时降雨量峰值(mm)" prop="maxHour6" class="pdf-details" />
      <el-table-column label="12小时降雨量峰值(mm)" prop="maxHour12" class="pdf-details" />
      <el-table-column label="24小时降雨量峰值(mm)" prop="maxHour24" class="pdf-details" />
    </el-table>

    <p class="title">三、内涝点监测数据统计</p>
    <el-table :data="detailData.waterloggingAnalysisVos">
      <el-table-column label="站点名称" prop="stName" class="pdf-details" />
      <el-table-column label="站点编号" prop="stCode" class="pdf-details" />
      <el-table-column label="观测时间" prop="ttTime" class="pdf-details" />
      <!-- <el-table-column label="水位峰值(m)" prop="maxWaterLevel" class="pdf-details" /> -->
      <el-table-column label="最大积水深度" prop="maxWaterLevel" class="pdf-details" />
      <el-table-column label="最大积水时间" prop="maxWaterTime" class="pdf-details" />
    </el-table>

    <p class="title">四、现场监测站点报警记录</p>
    <el-table :data="detailData.rtuWarnRecordVos">
      <el-table-column label="告警站点" prop="stName" class="pdf-details" />
      <el-table-column label="告警级别" prop="warnLevel" class="pdf-details">
        <template #default="scope">
          {{ scope.row.warnLevel == 'warn' ? '告警' : '预警' }}
        </template>
      </el-table-column>
      <el-table-column label="告警类型" prop="warnType" class="pdf-details">
        <template #default="scope">
          {{
            scope.row.warnType == 'water_level'
              ? '水位'
              : scope.row.warnType == 'flow'
              ? '流量'
              : scope.row.warnType == 'rain'
              ? '降雨'
              : scope.row.warnType == 'quality'
              ? '水质'
              : '其他'
          }}
        </template>
      </el-table-column>
      <el-table-column label="告警时间" prop="warnDatetime" class="pdf-details" />
      <el-table-column label="告警因子" prop="warnFactorName" class="pdf-details" />
      <el-table-column label="告警监测值" prop="warnFactorValueName" class="pdf-details" />
    </el-table>
    <p class="title">五、内涝点现场照片</p>
    <div class="flex waterlogImg">
      <div class="part" v-for="i in 9">
        <img src="" alt="" />
        <p>长兴工业园内涝积水点</p>
        <p>2023-10-12 13:00:10</p>
      </div>
    </div>
  </div>
</template>

<script setup stName="降雨报告单详情">
import chartOption from './riskChart';
import * as echarts from 'echarts';
import { analysisRainfallData } from '@/api/floodSys/floodYP';
import { pageToPDF } from '@/utils/exportPdf.js'; //导出下载PDF

const props = defineProps({
  rainId: {
    type: String,
    default: '',
  },
});
const { proxy } = getCurrentInstance();

const showLoading = ref(true);
const detailData = ref({
  startTime: '',
  endTime: '',
  accumulate: '',
});

let chart4 = null;
const initEchartsZB = async datas => {
  chart4 = echarts.init(document.getElementById('chartOneBG'));
  let xData = [];
  let yData = [];

  datas.rainfallDataVos.map(item => {
    xData.push(item.moniterTime.slice(0, 16));
    yData.push(item.accumulate);
  });
  chartOption.option4.xAxis.data = xData;
  chartOption.option4.series[0].data = yData;
  if (xData.length > 0) {
    chartOption.option4.graphic.invisible = true;
  } else {
    chartOption.option4.graphic.invisible = false;
  }
  chart4.clear();
  chart4.setOption(chartOption.option4);
};

// 获取数据
function getDetailData() {
  showLoading.value = true;
  analysisRainfallData(props.rainId).then(res => {
    detailData.value = res.data;
    initEchartsZB(res.data);
    showLoading.value = false;
  });
}

// 下载降雨报告单
function downloadPdf() {
  const lableList = document.getElementsByClassName('pdf-details');
  pageToPDF('降雨编号' + props.rainId + '降雨结论报告', document.querySelector('#rainReport'), lableList);
}

onMounted(() => {
  getDetailData();
});
onBeforeUnmount(() => {
  if (!!chart4) chart4.dispose();
});
</script>
<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.reportDetail {
  width: 100%;
  background: #fff;
  color: #333;
  margin-bottom: 30px;
  .waterlogImg {
    flex-wrap: wrap;
    .part {
      width: 18%;
      margin-left: 10px;
      margin-bottom: 10px;
      text-align: center;
      img {
        width: 100%;
        height: 150px;
      }
      p {
        line-height: 20px;
      }
    }
  }
  #chartOneBG {
    width: 100%;
    height: 300px;
  }
  h1 {
    text-align: center;
    color: $red;
    font-size: 26px;
  }
  h4 {
    color: $red;
    border-bottom: 3px solid $red;
    padding: 10px 0px;
    text-align: right;
  }
  .title {
    font-weight: bold;
    margin: 10px 0px;
  }
  .content {
    text-indent: 20px;
  }
}
.reportDetail {
  .el-table {
    --el-table-border-color: $mainColor1 !important;
    --el-table-bg-color: $mainColor1 !important;
    .el-table__body {
      border-bottom: 1px solid #333 !important;
    }
    .el-table__header-wrapper,
    .el-table__fixed-header-wrapper {
      th {
        word-break: break-word;
        background-color: #dee1e6 !important;
        height: 40px !important;
        font-size: 13px;
      }
    }
    .el-table__body-wrapper {
      background-color: #004770 !important;
      .el-button [class*='el-icon-'] + span {
        margin-left: 1px;
      }
      td.el-table-fixed-column--right {
        background: $mainBg !important;
      }
    }

    tr {
      background-color: #f8f8f9 !important;
    }
    tr:nth-of-type(odd) {
      background-color: #fff !important;
    }
    tr:hover > td {
      background-color: #f5f7fa !important;
    }

    th.el-table__cell,
    td.el-table__cell {
      text-align: center;
      border-bottom: 1px solid $mainBg !important;
      color: #000;
      border-right: none !important;
      position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
    }
    .el-table__empty-block {
      background-color: #fff !important;
      .el-table__empty-text {
        color: #c6c6c6 !important;
      }
    }
    .el-button {
      border: none !important;
      background: none !important;
      &:hover {
        background: none !important;
        transform: scale(1.01);
      }
    }
  }
}
</style>