<template>
<Transition name="slide">
  <div class="remain-3d" v-if="isVisible">
  
    <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 allCars"
          :key="item.code"
          :class="['row', { 'stripe-row': x % 2 === 0 }]"
          @click="goTracker(item)"
        >
          <div :class="['col-1', { act: carTracked?.id === item.id }]">
            <div class="inner">{{ item.plate }}</div>
          </div>
          <div class="col-2">
            <div class="inner">{{ CAR_MAP[item.type] }}</div>
          </div>
          <div class="col-3">
            <div class="inner">{{ item.time.slice(5, -3) }}</div>
          </div>
          <div class="col-4">
            <div class="inner">{{ DIRECT_MAP[item.tunnelx] }}</div>
          </div>
        </div>
  
      </el-scrollbar>
  
    </div>
  
  </div>
  </Transition>
  </template>
  
  <script lang='ts' setup>
  

  // 组件
  import Filter from '../Coms/Filter.vue'

  import { remainCars } from '@/api/home'
  import { cars, bus, carTracked } from '@/views/3DModel/_state'

  // 静态资源
  import { CAR_TYPES, ASYNC_DIRECTIONS } from '@/config/dict'
  
  const emits = defineEmits(['list-close'])
  
  const tunnelCars = ref([[], []]) // 隧洞车辆

  // const carlist = ref([])
  const sign = ref(null)
  const isVisible = ref(true)
  
  const params = reactive({
    direct: '',
    carPlate: '',
    vehicleType: ''
  })

  // 所有车辆
  const allCars = computed(() => {
    let allCars = cars.value.flat()
   
    if (params.direct) {
      allCars = allCars.filter(item => item.tunnelx === params.direct)
    }

    if (params.carPlate) {
      allCars = allCars.filter(item => item.plate.includes(params.carPlate))
    }

    if (params.vehicleType) {
      allCars = allCars.filter(item => item.type == params.vehicleType)
    }
allCars.sort((a, b) => {
    const dateA = new Date(a.time);
    const dateB = new Date(b.time);
    return dateB - dateA; // 降序排列，最近的时间在前
  });
    return allCars

  })

  // 车辆汇总
  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]

    // console.log(allCars.value)

    allCars.value.forEach(item => {
      temp[transArr[item.type]].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 DIRECT_MAP = computed(() => {
    return Object.fromEntries(ASYNC_DIRECTIONS().map(item => {
      return [item.seKey, item.name]
    }))
  })

watch(
  () => carTracked.value,
  () => {
    if(carTracked.value){
      isVisible.value = false
    }else{
      isVisible.value = true
    }
  },
  {
    immediate: true
  }
)
  // 车辆追踪
  const goTracker = (xCar) => {
    bus.emit('3d-track', xCar)
  }
  
  // 条件重置
  const goReset = () => {
    params.direct = ''
    params.carPlate = ''
    params.vehicleType = ''
  }
  
  </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: 0;
            top: 50%;
            margin-top: -3px;
          }
        }
        .col-3 {
          width: 30%;
          flex-shrink: 0;
        }
        .col-4 {
          width: 20%;
          flex-shrink: 0;
        }
      }
    }
  
  }

.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}

.slide-enter-from {
  transform: translateY(100%); 
}

.slide-enter-to {
  transform: translateY(0); 
}

.slide-leave-from {
  transform: translateY(0); 
}

.slide-leave-to {
  transform: translateY(100%); 
}
  </style>