<template>
  <div class="Lundu-info">
    <div class="bodyForLundu">
      <i   class="dialog-close" @click="handleClose"></i>
      <span class="lundu-title">{{ LdInfo.value.berthName|| '未查到信息' }}</span>
      <div  class="lundu-body">
        <div class="bin-left">
        <li><span>当前总客流:</span><span>{{ LdInfo.value.total}}</span></li>
        <li><span>二轮车数:</span><span>{{ LdInfo.value.twoWheels}}</span></li>
        <li><span>客流阈值:</span><span>{{ LdInfo.value.threshold == null?'无': LdInfo.value.threshold }}</span></li>
      </div>
        <div class="bin-right">
          <li><span>行人数:</span><span>{{ LdInfo.value.passerby}}</span></li>
          <li><span>三轮车数:</span><span>{{LdInfo.value.triWheels}}</span></li>
          <li><span>是否预警:</span><span>{{ LdInfo.value.isWarn == null?'无': LdInfo.value.isWarn}}</span></li>
        </div>
      </div>

     </div>
  </div>
</template>

<script>
export default {
  name: 'clickLundu',
}
</script>

<script setup>
  import {ref, reactive, onMounted} from 'vue'
  import { ElMessage } from 'element-plus'
  import 'element-plus/es/components/message/style/css'
  import 'element-plus/es/components/date-picker/style/css'

  import { GetLDInfo } from '@/apis/other'

  import bus from "@/utils/bus";

  const emit = defineEmits(['closeThis'])
  // import {ueCallBoatCloseDrive} from "@/utils/UIInteractions";
  const props = defineProps(['datas'])
  onMounted(() => {
    console.log(props.name)
    console.log(props.datas.name)
    getData()
  })
  let LdInfo = reactive({value:{berthName:null,total:0,twoWheels:0,threshold:null,passerby:0,triWheels:0,isWarn:null}})


 function getData()
 {
   console.log(props.datas.name)
   GetLDInfo(props.datas.name).then(res=>{
     if (res.data!=null && res.data!=undefined && res.data!='')
     {
       LdInfo.value= res.data.Rows[0]
     }
   })
 }

 function handleClose()
 {
   emit('closeThis')
 }

</script>

<style lang="scss" scoped>
.Lundu-info {
  position: absolute;
  bottom: 20vh;
  left: calc(70% - 100px);
  transform: translateX(-50%);
  align-items: center;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;


  .bodyForLundu{
    width: 389px;
    height: 200px;
    background: url('@/assets/imgs/common/lundu-bg.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: 30vh;
    left: calc(80% - 550px);

    .dialog-close {
      top: 8px;
    }

    .lundu-title{
      display: flex;
      height: 50px;
      padding-left: 20px;
      line-height: 50px;
      text-align: left;
      /*background: #f0d60d;*/
      flex-direction: column;
      font-size: 19px;
      font-weight: bold;
      font-style: italic;
      color: #FFFFFF;
    }
    .lundu-body{
      height: 150px;
      display: flex;
      flex-direction: row;
      .bin-left{
        list-style: none;
        height:100% ;
        width: 48%;
        li:nth-child(1), li:nth-child(2){
          width: 100%;
          margin-top:15px;
          font-size: 17px;
          span:first-child{
            display: inline-block;
            width: 50%;
            text-align: justify;
            text-justify: distribute-all-lines;
            text-align-last: justify;
          }
          span:last-child{
            font-weight: bold;
            color: #ffe45f;
          }
        }
        li:last-child{
          width: 100%;
          margin-top:15px;
          font-size: 17px;
          span:first-child{
            display: inline-block;
            width: 50%;
            text-align: justify;
            text-justify: distribute-all-lines;
            text-align-last: justify;
          }
          span:last-child:nth-child(2){
            font-weight: bold;
            color: #ffe45f;
          }
        }
      }
      .bin-right{
        list-style: none;
        height:100% ;
        width: 48%;
        li:nth-child(1), li:nth-child(2){
          width: 100%;
          margin-top:15px;
          font-size: 17px;
          span:first-child{
            display: inline-block;
            width: 50%;
            text-align: justify;
            text-justify: distribute-all-lines;
            text-align-last: justify;
          }
          span:last-child{
            font-weight: bold;
            color: #ffe45f;
          }
        }
        li:last-child{
          width: 100%;
          margin-top:15px;
          font-size: 17px;
          span:first-child{
            display: inline-block;
            width: 50%;
            text-align: justify;
            text-justify: distribute-all-lines;
            text-align-last: justify;
          }
          span:last-child{
            font-weight: bold;
          }
        }
      }
    }

  }


}

</style>
