<template>

  <div class="remain-3d">
  
    <div class="title">
      <div class="name">留存车辆列表</div>
      <Icon @click="onClose" class="icon" icon="ep:close" /> 
    </div>
  
    <div class="search">
  
      <div class="inp-item">
        <div class="inp-name">车牌号：</div>
        <div class="inp-content">
          <el-input v-model="params.carPlate" placeholder="请输入..." />
        </div>
      </div>
  
      <el-button @click="goReset" class="reset">重置</el-button>
  
    </div>

    <div class="sumarry">

      <div
        class="i-text"
        v-for="(item, x) in summary"
        :key="x"
      >
        {{item.text}} ({{ item.num }})
      </div>

    </div>
  
    <div class="list">
  
      <el-scrollbar class="scroll">
  
        <div class="row header">
          <div class="col-1">车牌</div>
          <div class="col-2">
            <div class="inner">
              <Filter v-bind="{ options: CAR_TYPES, defaultText: '车辆类型' }" v-model="params.vehicleType" />
            </div>
          </div>
          <div class="col-3">进入时间</div>
          <div class="col-4">
            <div class="inner">
              <Filter v-bind="{ options: useDirections, defaultText: '方向' }" v-model="params.direct" />
            </div>
          </div>
        </div>
  
        <div
          v-for="(item, x) in carlist"
          :key="item.code"
          :class="['row', { 'stripe-row': x % 2 === 0 }]"
          @click="goTracker(item)"
        >
          <div :class="['col-1', { act: carTracked?.infos.id === item.carId }]">
            <div class="inner">{{ item.carPlate }}</div>
          </div>
          <div class="col-2">
            <div class="inner">{{ CAR_MAP[item.vehicleType] }}</div>
          </div>
          <div class="col-3">
            <div class="inner">{{ item.inTunnelTime.slice(5, -3) }}</div>
          </div>
          <div class="col-4">
            <div class="inner">{{ directMap[item.tunnelId] }}</div>
          </div>
        </div>
  
      </el-scrollbar>
  
    </div>
  
  </div>
  
  </template>
  
  <script lang='ts' setup>
  
  import Filter from '../Coms/Filter.vue'
  import { remainCars } from '@/api/home'
  import { CAR_TYPES, ASYNC_DIRECTIONS } from '@/config/dict'
  import { bus, carTracked } from '@/views/3DModel/_state'
  
  const emits = defineEmits(['list-close'])
  
  const carlist = ref([])
  const sign = ref(null)
  
  const params = reactive({
    carPlate: '',
    vehicleType: '',
    tunnelIds: [],
    pageNo: 1,
    pageSize: 100,
    total: 0,
    direct: '',
  })

  // 车辆汇总
  const summary = computed(() => {

    const temp = [
      { text: '危化品车辆', num: 0 },
      { text: '货车', num: 0 },
      { text: '客车', num: 0 },
      { text: '轿车', num: 0 },
      { text: '其他', num: 0 }
    ]

    const transArr = [0, 2, 3, 1, 4]

    carlist.value.forEach(item => {
      temp[transArr[item.vehicleType]].num ++
    })

    return temp

  })
  
  // 方向
  const useDirections = computed(() => {
    return ASYNC_DIRECTIONS().map(({ name, seKey }) => {
      return { name, type: seKey }
    })
  })
  
  // 车辆类型
  const CAR_MAP = Object.fromEntries(CAR_TYPES.map(item => {
    return [item.type, item.name]
  }))
  
  const directMap = computed(() => {
    return Object.fromEntries(ASYNC_DIRECTIONS().map(item => {
      return [item.seKey, item.name]
    }))
  })
  
  const getCars = async (x?: number) => {
  
    params.pageNo = x || 1
    if (params.direct) {
      params.tunnelIds = [params.direct]
    } else {
      params.tunnelIds = ['xl_tunnel_up', 'xl_tunnel_down']
    }
  
    const res = await remainCars(params)
    carlist.value = res.vehicleInfoList.records
  
  
    if (!sign.value) {
      sign.value = setInterval(() => {
        getCars()
      }, 2000)
    }
  
  }
  
  // 关闭列表
  const onClose = () => {
    emits('list-close')
  }
  
  // 车辆追踪
  const goTracker = (xCar) => {
    bus.emit('3d-track', xCar)
  }
  
  // 条件重置
  const goReset = () => {
    params.direct = ''
    params.carPlate = ''
    params.vehicleType = ''
    params.pageNo = 1
  }
  
  onMounted(() => {
  
    getCars()
  
  })
  
  onUnmounted(() => {
    clearInterval(sign.value)
  })
  
  </script>
  
  <style lang='scss' scoped>
  
  .remain-3d {
    position: absolute;
    width: 420px;
    top: 0px;
    background: rgba(14, 42, 85, 0.8);
    padding: 15px;
    box-sizing: border-box;
    border-radius: 4px;
    z-index: 9;
    .sumarry {
      padding-bottom: 10px;
      display: flex;
      color: white;
      font-size: 13px;
      .i-text {
        margin-left: 10px;
      }
    }
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        font-size: 16px;
        font-weight: 600;
        color: white;
      }
      .icon {
        color: white;
        cursor: pointer;
      }
    }
    .search {
      display: flex;
      justify-content: space-between;
      margin: 15px 0;
      .inp-item {
        flex-grow: 1;
        display: flex;
        align-items: center;
        color: white;
        font-size: 14px;
        .inp-name {
          // width: 100px;
          flex-shrink: 0;
        }
        .inp-content {
          flex-grow: 1;
        }
      }
      .reset {
        margin-left: 10px;
        font-size: 13px;
      }
    }
    .list {
      height: calc(100vh - 70px);
      overflow: hidden;
      .row {
        display: flex;
        min-height: 40px;
        color: white;
        font-size: 13px;
        justify-content: space-between;
        &.stripe-row {
          background: rgba(69, 116, 182, 0.2);
          border-radius: 4px;
        }
  
        &:not(.header) {
          cursor: pointer;
        }
  
        .col-1,
        .col-2,
        .col-3,
        .col-4 {
          line-height: 18px;
          position: relative;
          width: 25%;
          // flex-grow: 1;
          padding: 12px 10px;
          box-sizing: border-box;
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
  
        .col-1{
          &.act::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background: #00DDFF;
            position: absolute;
            left: -2px;
            top: 50%;
            margin-top: -3px;
          }
        }
        .col-3 {
          width: 30%;
          flex-shrink: 0;
        }
        .col-4 {
          width: 20%;
          flex-shrink: 0;
        }
      }
    }
  
  }
  
  </style>