<template>
  <!-- 防汛排涝  辅助决策    右侧 调度辅助决策-->
  <div class="SchedulingAidedDecisionRight">
    <div class="moduleBox moduleBoxRight flex flex-v">
      <EachModuleTitle title="调度辅助决策" :isTab="false"></EachModuleTitle>
      <div class="tabBox">
        <div class="tabClass" :class="activeTab == item.value ? 'activeTab' : ''" v-for="item in tabArr" :key="item.value" @click="tabClick(item)">
          {{ item.label }}
        </div>
      </div>
          <!-- 列表 -->
    <div class="waterloggingList flex-1" v-loading="loading"
    element-loading-background="rgba(11, 18, 52, 0.3)">
      <div class="eachData" v-for="(item) in listData" :key="item.id" >
        <div class="topCon">
          <div class="leftCon">
            <div class="dingweiicon"></div>
            <div>{{item.streetName}}</div>
            <!-- <div class="equipmentStats onColor" v-if="item.status=='1'">在线</div>
            <div class="equipmentStats offColor" v-else>离线</div> -->
          </div>
          <!-- <div class="rightCon">
            <div>
              <span class="atSum">2</span>
              <span>/</span>
              <span>6</span>
              <span>开机</span>
            </div>
          </div> -->
        </div>
        <div class="waterLevelInfo">
          <div class="todayWater">
            <span>风险区域:</span>
            <span class="WaterSize leftWater">{{item.riskAreaList?.length||0}}</span>
          </div>
          <div class="yesterday " @click="eachDataClick(item)">
            <span>易渍水点:</span>
            <span class="WaterSize rightWater">{{item.waterloggingPointList?.length||0}}</span>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>
<script setup name="SchedulingAidedDecisionRight">
  import bus from '@/bus';
import { ref, reactive, onMounted } from 'vue';
import EachModuleTitle from '@/views/pictureOnMap/page/components/EachModuleTitle.vue';
import {
  drainageDispatchDrainageRiskAreaCount,
} from '@/api/FloodControlAndDrainage.js';
const { proxy } = getCurrentInstance();

const activeTab = ref('1');
const tabArr = ref([
  {
    label: '预警分析',
    value: '1',
  },
  // {
  //   label: '排涝风险区域',
  //   value: '2',
  // },
]);
const listData=ref([])
const tabClick=(item)=>{
activeTab.value=item.value
}
// 获取数据
const loading=ref(false)


const events_params = {
  setLayerVisible: { key: "setLayerVisible" },
  beansToMap: {key: 'beansToMap',id:['waterlog_community'],colors:['rgba(255,0,0,0.5)']},
  removeMapDatas: { key: 'removeMapDatas' },
}
function eachDataClick(item) {
  const {beansToMap,removeMapDatas,setLayerVisible} = events_params;
  bus.emit(removeMapDatas.key,beansToMap.id);
  bus.emit(beansToMap.key, {
    beans: item.waterloggingPointList.map(i => ({...i,color:beansToMap.colors[0],type:beansToMap.id[0]})),
    fields: {geometry:'geometry',name:'name'},
    type: beansToMap.id[0],
  });
  beansToMap.id.forEach(o => bus.emit(setLayerVisible.key,{layername:o,isCheck:true}));

}
function gitDataFun() {
  loading.value=true
  drainageDispatchDrainageRiskAreaCount().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>
.SchedulingAidedDecisionRight {

  .tabBox {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 4px 0;
    margin-bottom: 5px;
    .tabClass {
      width: 140px;
      height: 34px;
      background: linear-gradient(0deg, #0c2156 0%, #2291e1 100%);
      border-radius: 17px;
      border: 1px solid #308fee;
      font-weight: bold;
      font-size: 16px;
      text-align: center;
      line-height: 34px;
      color: #e0e5fa;
      // cursor: pointer;
    }
    .activeTab {
      background: linear-gradient(0deg, #0c3f57 0%, #1dd0c7 100%);
      border-radius: 17px;
      border: 1px solid #27f1c6;
    }
  }
    .waterloggingList {
    margin-bottom: 10px;
    // height: calc(100% - 190px);
    overflow-y: auto;
    .eachData {
      // height: 139px;
      background: linear-gradient(0deg, #00134f 0%, #003065 100%);
      border-radius: 6px;
      border: 1px solid #163f80;
      margin-bottom: 11px;
      // cursor: pointer;
      .topCon {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        background: linear-gradient(0deg, #05489a 0%, #003065 100%);
        border-radius: 6px 6px 0px 0px;
        .leftCon {
          padding-left: 8px;
          display: flex;
          align-items: center;

          font-weight: bold;
          font-size: 16px;
          color: #ffffff;
          .dingweiicon {
            width: 25px;
            height: 28px;
            background: url('@/assets/images/pictureOnMap/dingweiicon.png') no-repeat center;
            background-size: 100% 100%;
          }
          // .equipmentStats {
          //   padding-left: 10px;

          //   font-weight: 500;
          //   font-size: 14px;
          // }
          // .onColor {
          //   color: #24ff62;
          // }
          // .offColor {
          //   color: #ea3f54;
          // }
        }
        .rightCon {
          padding-right: 23px;
          display: flex;
          align-items: center;
          font-weight: 500;
font-size: 16px;
          .atSum {
            color: #2BB4FB;
          }
        }
      }
      .waterLevelInfo {
        height: 56px;
        padding:0 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
font-weight: bold;
font-size: 14px;
color: #CCDFFF;
.WaterSize {
font-weight: bold;
font-size: 16px;
line-height: 25px;
font-style: italic;
opacity: 0.97;
padding-left: 9px;
}
          .leftWater {

// color: #FF993E;
color: #ffffff;

          }
          .rightWater {

color: #EF4054;


          }
.yesterday {
  cursor: pointer;
}

      }
    }
  }
}
</style>