<template>
  <div id="YSIndex_right">
    <div class="canalAll flex flex-justcontent-spacebetween flex-align-center">
      全区合计<span><b class="lus">{{gqData.portChannelNum}}</b>条</span><span><b class="las">{{gqData.lengthSum}}</b>km</span>
    </div>
    <div class="canalList">
      <div class="list flex" v-for="i in allList" :key="i">
        <div class="name flex flex-justcontent-center flex-align-center"><div>{{i.waterRegionName}}<br/>({{i.lengthSum}})</div></div>
        <div class="info flex-1">
          <div class="ditch flex flex-justcontent-center" v-for="e in i.portChannelList" :key="e">
            <div class="one">{{e.name}}</div>
            <div class="two flex-1 flex flex-align-center"><div class="inBra" :style="{width:`${e.length/8*100}%`}"><span :style="{right:e.length<2?'-24px':''}">{{e.length}}</span></div></div>
            <div class="tre">目标：<span>{{e.targetQuality}}</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="YSIndex_right">
import { getPortChannelLengthSum } from '@/api/MonitorAssetsOnMap';
import { ref, reactive, toRefs, onMounted } from "vue";
const props = defineProps({
  //分区编号
  waterRegionCode: {
    type: [String],
    default: "",
  },
});
const AllData = reactive({});
watch(
  () => props.waterRegionCode,
  (val) => {
    console.log("YSIndex_right:分区编号变了", val);
    debugger
    if(val!=''){
      filetData(val)
    }else{
      getData()
    }
  },
  { immediate: true ,deep:true}
);
let gqData=ref({})
let allList=ref([])
function getData(){
  getPortChannelLengthSum().then(res=>{
    if(res.code==200){
      gqData.value=res.data
      allList.value=gqData.value.waterRegionList
    }
  })
}
function filetData(id){
  let list=gqData.value.waterRegionList.find(i=>{return i.waterRegionId==id})
  allList.value=[list]
}
onMounted(() => {
  // getData()
});
</script>

<style lang="scss" scoped>
#YSIndex_right {
  width: 100%;
  height: 100%;
}
.canalAll{
  height: 54px;
  background: url('@/assets/images/pictureOnMap/ystjbg.png') no-repeat;
  background-size:100% 100%;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
  padding: 0 45px 0 25px;
  position: relative;
  &::before{
    content: '';
    width:47px;
    height:14px;
    background: url('@/assets/images/pictureOnMap/ystj.png') no-repeat;
    background-size:100% 100%;
    position: absolute;
    left: 30%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  span{
    font-weight: 400;
    font-size: 14px;
    color: #CCDFFF;
  }
  b{
    font-weight: bold;
    font-size: 24px;
    margin-right:8px;
    font-family:'DINPro';
  }
  .lus{
    color: #27F388;
  }
  .las{
    color: #2FE9FF;
  }
}
.canalList{
  height: calc(100% - 64px);
  margin-top: 10px;
  overflow: auto;
  .list{
    background: linear-gradient(0deg, #00134F 0%, #003065 100%);
    border-radius: 6px;
    border: 1px solid #163F80;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .info{
    min-height:70px;
    padding: 10px 0 10px 10px;
    overflow: hidden;
  }
  .name{
    width: 80px;
    background: linear-gradient(0deg, rgba(0,98,183,0.9) 0%, rgba(0,98,183,0.3) 100%);
    border-radius: 6px;
    overflow: hidden;
    font-size: 16px;
    color: #FFFFFF;
    line-height:22px;
    text-align: center;
    padding: 0 12px;
  }
  .ditch{
    height: 24px;
    .one{
      font-weight: bold;
      font-size: 14px;
      color: #CCDFFF;
      width: 110px;
    }
    .tre{
      width: 80px;
      font-weight: bold;
      font-size: 14px;
      color: #CCDFFF;
      padding-left: 4px;
    }
  }
  .inBra{
    width: 30%;
    position: relative;
    height: 12px;
    border-radius: 0 6px 6px 0px;
    background: linear-gradient(90deg, #0066E5, #00B6FF);
    span{
      position: absolute;
      right:4px;
      top: 0;
      line-height: 12px;
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
    }
  }
}
</style>