<template>
  <!-- 降雨报告 -->
  <div class="rainReportPage">
    <div class="partTitleHM">
      降雨报告
      <el-button size="small" style="float: right; width: 70px; margin: 10px 50px 0px 0px" @click="dialogShowModal = true">
        内涝模型
      </el-button>
      <el-select
        filterable
        clearable
        v-model="timeIndex"
        placeholder="请选择日期"
        @change="checkTime"
        @clear="getJYData"
        size="small"
        style="margin: 10px 10px 0px 0px; width: 160px; float: right"
      >
        <el-option v-for="item in allList" :key="item.id" :label="item.startTime" :value="item.id" />
      </el-select>
    </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>
        <div class="scrollContent">
          <div class="scrollCont flex flex-justcontent-spacebetween" 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>
        </div>
      </div>
    </div>
    <!-- 查看报告单 -->
    <el-dialog title="降雨报告单" v-model="dialogShowDetail" width="1150px" append-to-body>
      <ReportDetail v-if="dialogShowDetail" :rainId="rainId"></ReportDetail>
    </el-dialog>
    <!-- 内涝模型 -->
    <el-dialog title="内涝模型" v-model="dialogShowModal" width="1800px" append-to-body>
      <RiskDetail v-if="dialogShowModal"></RiskDetail>
    </el-dialog>
  </div>
</template>

<script setup>
import { rainfallSessionInfoList } from '@/api/publicService/index';
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([]);
const allList = ref([]);
const timeIndex = ref('');

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

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

// 点击日期选择
async function checkTime() {
  dataList.value = allList.value.filter(item => item.id == timeIndex.value);
}

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

<style lang="scss">
.rainReportPage {
  width: 100%;
  .scrollMapHM {
    height: 245px;
    .scrollContent {
      height: 200px;
      overflow: auto;
    }
    p {
      width: 18%;
    }
    .reports {
      color: #3afff8;
    }
  }
}
</style>