<template>
  <!-- 值班 -->
  <div class="Beonduty ">
    <EachModuleTitle title="辅助研判" :isTab="false"></EachModuleTitle>
    <div class="typeList flex">
      <!-- <div
        class="flex-1 tab"
        :class="tabActive == i.value ? 'active' : ''"
        v-for="i in tabData"
        :key="i.value"
        @click="tabClickFun(i)"
      >
        {{ i.label }}
      </div> -->
      <div
        class="flex-1 tab"
      >
        防汛值班{{ ZBTJData?.fbDutySignUserNum||0 }}/{{ZBTJData?.fbDutyUserNum||0}}
      </div>
      <div
        class="flex-1 tab"
      >
        泵站值班{{ ZBTJData?.pumpDutySignNum||0 }}/{{ZBTJData?.pumpDutyNum||0}}
      </div>
      <div
        class="flex-1 tab"
      >
        排涝车辆{{ ZBTJData?.carOnlineNum||0 }}/{{ZBTJData?.carNum||0}}
      </div>
    </div>
    <div class="yjBtn flex flex-align-center">
      警情建议
      <div class="blue pointer" @click="startEmergencyResponse">{{yjtj?.recommendGrade}}</div>
    </div>
    <!-- 防汛值班 -->
    <div class="dutyBox">
      <div class="text">防汛值班</div>
      <div class="showDuty">
        <div class="eachdutyInfo">
          <div class="imgBox jrzbimg"></div>
          <div>
            <div class="typeText">今日值班</div>
            <div class="name jrzbName" v-for="(item) in jrzbText" :key="item" >
              <span :title="item.name+''+item.phone">{{item.name}}&nbsp; </span>
            </div>
            
          </div>
        </div>
        <div class="eachdutyInfo">
          <div class="imgBox dbldimg"></div>
          <div>
            <div class="typeText">带班领导</div>
            <div class="name dbldName" v-for="(item) in zbldText" :key="item" >
              <span :title="item.name+''+item.phone">{{item.name}}&nbsp; </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 排涝值守 -->
    <div class="dutyBox">
      <div class="text">排涝值守</div>
      <div class="showDuty">
        <div class="eachdutyInfo">
          <div class="imgBox jrxcimg"></div>
          <div>
            <div class="typeText">今日巡查人数</div>
            <div class="name jrzbName">{{PLZSData?.watchUserNum||0}}</div>
          </div>
        </div>
        <div class="eachdutyInfo">
          <div class="imgBox plddimg"></div>
          <div>
            <div class="typeText">排涝调度次数</div>
            <div class="name dbldName">{{PLZSData?.dispatchNum||0}}次</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 启动应急响应弹框 -->
        <el-dialog
      title="发布响应"
      style="height:670px"
      append-to-body
      modal-class="pmpSitNewDialog"
      v-model="floodDialogRelease"
      v-if="floodDialogRelease"
      width="1200px"
      :before-close="floodReleaseClose"
    >
      <FloodReleaseForm  @floodReleaseClose="floodReleaseClose" :fxType="1" :fxLeve="3" />
    </el-dialog>
  </div>
</template>
<script setup nama="Beonduty">
import { ref, reactive, onMounted } from 'vue';
import EachModuleTitle from '@/views/pictureOnMap/page/components/EachModuleTitle.vue';
import FloodReleaseForm from './FloodReleaseForm/index.vue';
import {
  drainageDispatchGetDutyCount,drainageDispatchGetFbTodayDutyUserShift,drainageDispatchGetWatchCount,getResponseRecommend
} from '@/api/FloodControlAndDrainage.js';
import bus from "@/bus";

const { proxy } = getCurrentInstance();
const tabData = [
  { label: '防汛值班(2/2)', value: '1' },
  { label: '泵站值班(10/10)', value: '2' },
  { label: '排涝车辆(10/18)', value: '3' },
];
const tabActive = ref(1);
const tabClickFun = item => {
  tabActive.value = item.value;
};
const floodDialogRelease=ref(false)
const startEmergencyResponse=()=>{
    floodDialogRelease.value=true

}
function floodReleaseClose(){
    floodDialogRelease.value=false
}
// 获取数据
const loading1=ref(false)
const loading2=ref(false)
const loading3=ref(false)
const ZBTJData=ref(null) //值班统计
const JRZBData=ref(null)  //今日防汛值班
const PLZSData=ref(null)  //排涝值守
function gitDataFunZBTJ() {
  loading1.value=true
  drainageDispatchGetDutyCount().then(res => {
    console.log('获取值班统计', res);
  loading1.value=false
    if (res && res.code == 200) {
      ZBTJData.value=res.data
    }
  },(error)=>{
    loading1.value=false
  });
}
const jrzbText=ref([])
const zbldText=ref([])
function gitDataFunJRZB() {
  loading2.value=true
  drainageDispatchGetFbTodayDutyUserShift().then(res => {
    console.log('获取今日防汛值班', res);
  loading2.value=false
    if (res && res.code == 200) {
      JRZBData.value=res.data
      let jrzb=JRZBData.value[0]?.dutyUserList
      let zbld=JRZBData.value[1]?.dutyUserList
      if(jrzb?.length>0){
        jrzb.map((e)=>{
        let obj={
          name:e.dutyUserName,
          phone:e.dutyUserPhone,
        }
        jrzbText.value.push(obj)
      })
      }
      if(zbld?.length>0){
        zbld.map((e)=>{
        let obj={
          name:e.dutyUserName,
          phone:e.dutyUserPhone,
        }
        zbldText.value.push(obj)
      })
      }
      
      
    }
  },(error)=>{
    loading2.value=false
  });
}
function gitDataFunPLZS() {
  loading3.value=true
  drainageDispatchGetWatchCount().then(res => {
    console.log('获取排涝值守', res);
  loading3.value=false
    if (res && res.code == 200) {
      PLZSData.value=res.data
    }
  },(error)=>{
    loading3.value=false
  });
}
const yjtj=ref(null)
// 获取预警推荐等级
function gitDataFunYJTJ() {
  getResponseRecommend().then(res => {
    console.log('获取警情建议', res);
    if (res && res.code == 200) {
      yjtj.value=res.data
    }
  },(error)=>{
  });
}
onMounted(() => {
  gitDataFunZBTJ()
  gitDataFunJRZB()
  gitDataFunPLZS()
  gitDataFunYJTJ()
});
onMounted(() => {});
</script>
<style lang="scss" scoped>
.Beonduty {
  .dutyBox {
    background: linear-gradient(0deg, #00134f 0%, #003065 100%);
    border-radius: 6px;
    border: 1px solid #163f80;
    display: flex;
    height: 100px;
    margin-top: 8px;
    .text {
      width: 50px;
      height: 100%;
      background: linear-gradient(0deg, rgba(0, 98, 183, 0.9) 0%, rgba(0, 98, 183, 0.3) 100%);
      border-radius: 6px;
      writing-mode: vertical-rl;
      text-align: center;
      padding-right: 14px;
      font-weight: bold;
      font-size: 16px;
      color: #ffffff;
    }
    .showDuty {
      display: flex;
      flex: 1;
      justify-content: space-around;
      align-items: center;
      .eachdutyInfo {
        display: flex;
        font-weight: 500;
        font-size: 14px;
        color: #CCDFFF;
      }
      .imgBox {
        width: 90px;
        height: 84px;
      }
      .jrzbimg {
        background: url('@/assets/images/pictureOnMap/jrzb.png') no-repeat center;
        background-size: 100% 100%;
      }
      .dbldimg {
        background: url('@/assets/images/pictureOnMap/dbld.png') no-repeat center;
        background-size: 100% 100%;
      }
      .jrxcimg {
background: url('@/assets/images/pictureOnMap/jrxc.png') no-repeat center;
        background-size: 100% 100%;
      }
      .plddimg {
background: url('@/assets/images/pictureOnMap/pldd.png') no-repeat center;
        background-size: 100% 100%;
      }
      .typeText {
        width: 95px;
        padding-top: 10px;
        padding-bottom: 5px;
      }
      .name {
        font-weight: bold;
        font-size: 16px;
        line-height: 25px;
      }
      .jrzbName {
        color: #2cb7ff;
      }
      .dbldName {
        color: #00FCFF;
      }
    }
  }
  .typeList {
    .tab {
      cursor: auto;
    }
  }
}
</style>