<template>
  <div id="ldkll-detail">
    <i class="dialog-close" @click="emit('closeDialog')"></i>
    <span class="title-dialog">{{ props.rowData.name }}</span>
    <ul class="ld-fields">
      <li><span>当前总客流</span><span>{{ props.rowData.count }}</span></li>
      <li><span>行人数</span><span>{{ props.rowData.walkingCount }}</span></li>
      <li><span>两轮车数</span><span>{{ props.rowData.bicycleCount }}</span></li>
      <li><span>三轮车数</span><span>{{ props.rowData.motorCount }}</span></li>
    </ul>
    <div id="ld-chart"></div>
  </div>
</template>

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

<script setup>
  import { watch, nextTick } from 'vue'
  import { setOnTimeRate } from '@/echarts/options'
  const props = defineProps(['row-data'])

  const emit = defineEmits(['closeDialog'])

  watch(()=>props.rowData, (val) => {
    nextTick(() => {
      setOnTimeRate(document.getElementById('ld-chart'), props.rowData.onTime)
    })
  },{immediate: true})

</script>

<style lang="scss" scoped>
#ldkll-detail {
  position: absolute;
  left: -280px;
  top: 38vh;
  width: 287px;
  height: 294px;
  background: url('../../../assets/imgs/page_ssky/bg-ldkll-detail.png') no-repeat;
  background-size: contain;
  box-sizing: border-box;
  padding: 20px;


  .dialog-close {
    top: 12px;
    right: 12px;
  }

  .ld-fields {
    display: flex;
    flex-wrap: wrap;
    margin-top: 17px;
    &>li {
      width: 55%;
      margin-bottom: 15px;
      &:nth-child(2n) {
        width: 45%;
      }
      &>span:first-child {
        display: inline-block;
        margin-right: 10px;
        font-size: 14px;
        line-height: 16px;
        width: 55%;
        text-align-last: justify;
      }
      &>span:last-child {
        font-size: 16px;
        line-height: 16px;
        font-family: BarlowBold;
        color: #8ed9fd;
      }
    }
  }

  #ld-chart {
    width: 150px;
    height: 150px;
    margin: 0 auto;
  }
}
</style>
