<template>
  <!-- 降雨报告 -->
  <div class="rainReportPage">
    <div class="partTitleHM">降雨报告</div>
    <div class="partContHM">
      <div class="scrollMapHM">
        <div class="scrollTitle flex">
          <p>开始时间</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">{{ item.start }}</p>
            <p class="ellipsis">{{ item.end }}</p>
            <p class="ellipsis">{{ item.yq }}</p>
            <p class="ellipsis">{{ item.num }}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>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import ReportDetail from '@/views/floodSys/floodYP/historyEventDetail.vue';

const { proxy } = getCurrentInstance();
const dialogShowDetail = ref(false);
const rainId = ref('');

const dataList = ref([
  { start: '2024-04-12 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
  { start: '2024-04-13 10:12:20', end: '2024-06-12 13:12:20', yq: '大雨', num: 24.2, id: 1 },
  { start: '2024-05-12 10:12:20', end: '2024-06-12 13:12:20', yq: '中雨', num: 8.5, id: 1 },
  { start: '2024-05-15 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
  { start: '2024-06-12 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
  { start: '2024-06-15 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
  { start: '2024-06-18 10:12:20', end: '2024-06-12 13:12:20', yq: '小雨', num: 3.2, id: 1 },
]);

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

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

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