<template>
  <div class="detail-real-box">
    <div class="box-zongjie">
      <div class="zongjie-item">
        <div class="item-name">一、预警响应</div>
        <div class="item-value">城市管理局于2023年04月23日 16时25分 根据气象预警信息，启动蓝色预警等级，通知通知相关人员提前2小时到现场进行布防值守。伴随雨强减弱，在经过3个多小时的现场巡逻，城市管理局于2023年4月23日
          19时45分分解除响应警报</div>
      </div>
      <div class="zongjie-item">
        <div class="item-name">二、事件总结</div>
        <div class="item-value">出动人员情况: 共出动47人值守，第三方应急支援10人赶赴现场</div>
        <div class="item-value">在线监测情况:雨量站在线数: 20个，综合监测站在线数: 10个，积水点监测站在线数: 15个</div>
        <div class="item-value">物资调用情况:沙袋: 20袋，移动抽水泵: 2台: 抽水皮带:3条</div>
        <div class="item-value">作业车辆情况一共出动3辆应急支援车</div>
      </div>
      <div class="zongjie-item">
        <div class="item-name">三、现场照片</div>
        <div class="item-value">
          <div class="imagecomponet">
            <div v-for="(item,index) in processFileList"
                 :key="index">
              <ImagePreview :src="item"
                            :width="120"
                            :height="120"
                            :FileList="processFileList"
                            :index="index"></ImagePreview>
            </div>
          </div>
        </div>
      </div>
      <div class="zongjie-item">
        <div class="item-name">四、雨量站监测数据</div>
        <el-table :data="allData.ylstable"
                  style="width: 100%; height: 200px;overflow-y: auto;"
                  v-loading="allData.loading3"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255, 255, 255, 0.3)"
                  :header-cell-style="{
        background: '#021533',
        height: '100px',
        color: '',
      }">

          <el-table-column prop='time'
                           label="开始时间">
          </el-table-column>

          <el-table-column prop='name'
                           label="雨量站名称"
                           width="110px">
          </el-table-column>

          <el-table-column prop='max'
                           label="最强1小时降雨(mm)">
          </el-table-column>

          <el-table-column prop='three'
                           label="累计3小时降雨(mm)">
          </el-table-column>

          <el-table-column prop='chongxian'
                           label="重现期">
          </el-table-column>
        </el-table>
      </div>

      <div class="zongjie-item">
        <div class="item-name">五、积水点监测数据</div>
        <el-table :data="allData.ylstable"
                  style="width: 100%; height: 200px;overflow-y: auto;"
                  v-loading="allData.loading4"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255, 255, 255, 0.3)"
                  :header-cell-style="{
        background: '#021533',
        height: '100px',
        color: '',
      }">

          <el-table-column prop='time'
                           label="开始时间">
          </el-table-column>

          <el-table-column prop='name'
                           label="积水点名称"
                           width="110px">
          </el-table-column>

          <el-table-column prop='max'
                           label="最大积水深度(m)">
          </el-table-column>

          <el-table-column prop='three'
                           label="积水时长(min)">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getImageUrl, removeAaary, findTreeObj } from "@/utils/ruoyi";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment";
import useUserStore from "@/store/modules/user";
const appStore = useUserStore();
import bus from "@/utils";

const processFileList = ref([
  getImageUrl("exp", "drainagefacility"),
  getImageUrl("bengzhanpic", "cockpit"),
])


const allData = reactive({
  zongjielist: [
    {
      name: '一、预警响应',
      value: 'XXX积水点',
    },
    {
      name: '二、事件总结',
      value: '039600001',
    },
    {
      name: '三、现场照片',
    },
  ],

  ylstable: [
    {
      name: "A雨量站",
      max: "10",
      three: "15",
      time: "2023-04-23 08:00",
      chongxian: "1",
    },
    {
      name: "A雨量站",
      max: "10",
      three: "15",
      time: "2023-04-23 08:00",
      chongxian: "1",
    },
    {
      name: "A雨量站",
      max: "10",
      three: "15",
      time: "2023-04-23 08:00",
      chongxian: "1",
    },

  ],
  loading3: false,
  jsdtable: [
    {
      name: "A雨量站",
      max: "10",
      three: "15",
      time: "2023-04-23 08:00",
      chongxian: "1",
    },
    {
      name: "A雨量站",
      max: "10",
      three: "15",
      time: "2023-04-23 08:00",
      chongxian: "1",
    },
    {
      name: "A雨量站",
      max: "10",
      three: "15",
      time: "2023-04-23 08:00",
      chongxian: "1",
    },

  ],
  loading4: false,
});

onMounted(() => {

});

</script>
<style lang="scss" scoped>
@import "@/assets/styles/map-detail.scss";

.box-zongjie {
  padding-top: 5px;
  width: 100%;
  height: 100%;
  color: rgba(246, 249, 254, 1);
  overflow: hidden;
  overflow-y: auto;

  .zongjie-item {
    .item-name {
      color: #b4cded;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      font-weight: bold;
    }
    .item-value {
      color: #ffffff;
      line-height: 20px;
      padding-left: 25px;
    }
  }
}

.imagecomponet {
  display: flex;
  flex-wrap: wrap;
}
</style>