<template>
  <!-- 预案分析 -->
  <div class="YuAnfenxi " >
    <div class="leve2Title">预案分析</div>
    <div class="YuAnfenxiBox"  v-loading="loading"
    element-loading-background="rgba(11, 18, 52, 0.3)">
    <div v-if="listData">
    <div class="tableBox flex" >
      <div class="leftName" >
        <div>降雨情形</div>
      </div>
      <div class="rightInfo flex-1">
        <div class="topTitle">
          <div>条件</div>
          <div>是否触发</div>
        </div>
        <div class="eachData" v-for="(item) in listData.analysisList" :key="item">
          <div class="text">{{item.condition}}</div>
          <div class="type " :class="item.flag?'yesColor':''">{{item.flag?'是':'否'}}</div>
        </div>
        <!-- <div class="eachData">
          <div class="text">3小时降雨量＞35mm</div>
          <div class="type">否</div>
        </div>
        <div class="eachData">
          <div class="text">日降雨量＞＝150mm</div>
          <div class="type">否</div>
        </div> -->
      </div>
    </div>
    <div class="tableBox flex">
      <div class="leftName" >
        <div>渍水情形</div>
      </div>
      <div class="rightInfo flex-1">
        <div class="topTitle">
          <div>条件</div>
          <div>是否触发</div>
        </div>
        <div class="eachData">
          <div class="text">渍水深度＞30cm，持续时间＞30分钟</div>
          <div class="type" :class="listData.waterDepthReach?'yesColor':''">{{listData.waterDepthReach?'是':'否'}}</div>
        </div>
        <div class="eachData">
          <div class="text">渍水面积＞城区1%，持续时间＞6小时</div>
          <div class="type" :class="listData.waterAreaReach?'yesColor':''">{{listData.waterAreaReach?'是':'否'}}</div>
        </div>

      </div>
        </div>
    </div>
    </div>
  </div>
</template>
<script setup nama="YuAnfenxi">
import { ref, reactive, onMounted } from 'vue';
import {
  drainageDispatchGetPlanAnalysis,
} from '@/api/FloodControlAndDrainage.js';
const { proxy } = getCurrentInstance();
// 获取数据
const loading=ref(false)
const listData=ref(null)
function gitDataFun() {
  loading.value=true
  drainageDispatchGetPlanAnalysis().then(res => {
    console.log('获取预案分析', res);
  loading.value=false
    if (res && res.code == 200) {
      listData.value=res.data
    }
  },(error)=>{
    loading.value=false
  });
}
onMounted(() => {
  gitDataFun()
});
</script>
<style lang="scss" scoped>
.YuAnfenxi {
    height: 100%;
    .YuAnfenxiBox {
    // overflow-y: auto;
    }
  .tableBox {
    padding: 10px 0;
    
    .leftName {
      width: 50px;
      background: linear-gradient(0deg, rgba(0, 98, 183, 0.8) 0%, rgba(0, 98, 183, 0.1) 100%);
      border: 1px solid #0b9bff;
      font-weight: bold;
      font-size: 16px;
      color: #ffffff;
      line-height: 100%;
      position: relative;
    div {
        position: absolute;
        // width: 100%;
        // height: 100%;
        min-height: 70px;
        writing-mode: vertical-rl;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
       
    }
    }
    .rightInfo {
      .topTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 22px;
        height: 38px;
        background: linear-gradient(0deg, rgba(0, 98, 183, 0.8) 0%, rgba(0, 98, 183, 0.1) 100%);
        border: 1px solid #0b9bff;
        border-left: 0;
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
      }
      .eachData {
        display: flex;
        height: 30px;
        justify-content: space-between;
        align-items: center;
        padding: 0 22px;
        background: linear-gradient(0deg, #00134f 0%, #003065 100%);
        border: 1px solid #163f80;
        border-top: 0;
        font-weight: 500;
        font-size: 14px;
        color: #d2e2ff;
      font-family: 'SourceHanSansCN-Regular';

        .yesColor {
            color: #2CB7FF;
        }
      }
    }
  }
}
</style>