<template>
  <!-- 降雨报告 -->
  <div class="rainReportPage">
    <div class="partTitleHM">
      降雨报告
      <el-button size="small" style="float: right; width: 70px; margin: 10px 60px 0px 0px" @click="dialogShowModal = true">
        内涝模型
      </el-button>
    </div>
    <div class="partContHM">
      <div class="scrollMapHM">
        <div class="scrollTitle flex">
          <p style="width: 108px">开始时间</p>
          <p>结束时间</p>
          <p>雨强</p>
          <p>累计降雨量</p>
          <p>操作</p>
        </div>
        <Vue3SeamlessScroll :list="dataList" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
          <div class="scrollCont flex" v-for="item in dataList" :key="item.id">
            <p class="ellipsis" :title="item.startTime" style="width: 108px">{{ item.startTime }}</p>
            <p class="ellipsis" :title="item.endTime">{{ item.endTime }}</p>
            <p class="ellipsis">
              <dict-tag :options="rainfall_intensity" :value="String(item.rainIntensity)" />
            </p>
            <p class="ellipsis">{{ item.accumulate }}mm</p>
            <p class="ellipsis reports" @click="checkReport(item)">查看报告</p>
          </div>
        </Vue3SeamlessScroll>
      </div>
    </div>
    <!-- 查看报告单 -->
    <el-dialog title="降雨报告单" v-model="dialogShowDetail" width="1100px" append-to-body>
      <ReportDetail v-if="dialogShowDetail" :rainId="rainId"></ReportDetail>
    </el-dialog>
    <!-- 内涝模型 -->
    <el-dialog title="内涝模型" v-model="dialogShowModal" width="1800px" append-to-body>
      <RiskDetail></RiskDetail>
    </el-dialog>
  </div>
</template>

<script setup>
import { rainfallSessionInfoList } from '@/api/publicService/index';

import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import ReportDetail from '@/views/floodSys/floodYP/historyEventDetail.vue'; //查看报告单
import RiskDetail from '@/views/floodSys/floodYP/riskAsses.vue'; //内涝模型

const { proxy } = getCurrentInstance();
const { rainfall_intensity } = proxy.useDict('rainfall_intensity'); //降雨强度  字典数据
const dialogShowDetail = ref(false);
const dialogShowModal = ref(false);
const rainId = ref('');

const dataList = ref([]);

// 获取降雨报告数据
async function getJYData() {
  let res = await rainfallSessionInfoList();
  if (res && res.code == 200) {
    dataList.value = res.data;
  }
}

// 查看报告
function checkReport(item) {
  rainId.value = item.id;
  dialogShowDetail.value = true;
}

onMounted(() => {
  getJYData();
});
</script>

<style lang="scss">
.rainReportPage {
  width: 100%;
  .scrollMapHM {
    p {
      width: 18%;
    }
    .reports {
      color: #3afff8;
    }
  }
}
</style>