<template>

<div class="remain">

  <!-- 导航 -->
  <div class="navs">

    <div
      v-for="item in navs"
      :class="['x-nav', { 'act': act === item.key }]"
      :key="item.key"
      @click="navChange(item)"
    >
      {{ item.text }}
    </div>

    <div :style="slideStyle" class="slide"></div>

  </div>

  <!-- 汇总 -->
  <div class="summary">

    <template
       v-for="item in summary"
      :key="item.key"
    >

      <div @click="typeChange(item)" :class="['i-text', { 'act': item.key === type }]">
        <div v-if="item.key !== 'all'" :class="['car', 'car_' + item.key]"></div>
        <div class="pre-text">{{ item.text }}</div>
        <div class="num">{{ item.num }}</div>
        <div class="aft-text">辆</div>
        <div class="slide"></div>
      </div>

      <div v-if="item.key === 'all'" class="dv-line"></div>

    </template>

  </div>

  <!-- 查询 -->
  <div class="search">

    <div class="inp-item">
      <div class="i-name">车牌号：</div>
      <div class="i-content">
        <el-input v-model="params.carPlate" class="x-inp" placeholder="请输入..." />
      </div>
    </div>

    <div class="inp-item">
      <div class="i-name">留存时间：</div>
      <div class="i-content">
        <span>≤</span>
        <el-input-number v-model="params.retainedMinutesTime" :controls="false" :min="0" class="num-inp" placeholder="请输入..." />
        <span>分钟</span>
      </div>
    </div>

    <div class="btns">
      <el-button @click="() => getRemains()" type="primary">搜索</el-button>
      <el-button @click="reset">重置</el-button>
    </div>

  </div>

  <!-- 列表 -->
  <div class="list-content">
    <el-table
      v-loading="loading"
      :data="listData"
      :row-class-name="({rowIndex}) => {
        return rowIndex % 2 === 0 ? 'stripe-row' : ''
      }"
      class="car-table"
    >
        <el-table-column align="center" label="序号" width="80">
          <template #default="{ $index }">
            {{ $index + (params.pageNo - 1) * params.pageSize + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="carPlate" label="车牌"/>
        <el-table-column label="车辆类型" width="180" >
          <template #default="{ row }">
            {{ CAR_TYPES[row.vehicleType].name }}
          </template>
        </el-table-column>
        <el-table-column label="车头照片" width="200" >
          <template #default="{row}">

            <el-image @click="() => imageView([row.headImageUrl], '车头照片')" class="car-image" :src="row.headImageUrl" fit="contain">
              <template #error>
                <el-image class="image-error" :src="DEFAULT_ICON" fit="cover" />
              </template>
              <template #placeholder>
                <el-image class="image-error" :src="DEFAULT_ICON" fit="cover" />
              </template>
            </el-image>

          </template>
        </el-table-column>
        <el-table-column label="车牌照片" width="200" >
          <template #default="{row}">
            
            <el-image @click="() => imageView([row.plateImageUrl], '车牌照片',true)" class="car-image" :src="row.plateImageUrl" fit="contain">
              <template #error>
                <el-image class="image-error" :src="DEFAULT_ICON" fit="cover" />
              </template>
              <template #placeholder>
                <el-image class="image-error" :src="DEFAULT_ICON" fit="cover" />
              </template>
            </el-image>

          </template>
        </el-table-column>
        <el-table-column label="平均车速" width="190">
          <template #default="{ row }">
            {{ +row.speed.toFixed(2) }} km/h
          </template>
        </el-table-column>
        <el-table-column label="方向" width="190" >
          <template #default="{ row }">
            {{ directionMap[row.direction] }}
          </template>
        </el-table-column>
        <el-table-column prop="inTunnelTime" label="进入时间" width="240" />
        <el-table-column label="留存时间" width="230" >
          <template #default="{ row }">
            {{ row.retainedMinutesTime }} 分钟
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="110">
          <template #default="{row}">
            <div @click="goTrack(row)" class="def-btn">轨迹追踪</div>
          </template>
        </el-table-column>

        <template #empty>
          <div class="empty">
            <span v-if="!loading">没有数据</span>
          </div>
        </template>

    </el-table>

    <!-- 分页 -->
  
    <div class="pages">
      
      <div class="sum">共 {{ params.total }} 条</div>

      <el-select
        v-model="params.pageSize"
        class="page-select"
        :teleported="false"
      >
        <el-option
          v-for="item in [10, 20, 30, 50]"
          :key="item"
          :label="item + '条/页'"
          :value="item"
        />
      </el-select>

      <el-pagination
        v-model:currentPage="params.pageNo"
        :page-size="params.pageSize"
        layout="prev, pager, next"
        :total="params.total"
        class="car-pages"
        @change="(e) => getRemains(e)"
      />

      <div class="jumper">
        前往
        <el-input-number
          v-model="jumperNum"
          @blur="goJumper" 
          @keyup.enter="goJumper"
          :min="1"
          :max="allPages"
          :controls="false"
        />
        页
      </div>

    </div>

  </div>

  
</div>

</template>

<script lang='ts' setup>

import { getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { remainCars } from '@/api/home'

import { CAR_TYPES } from '@/config/dict'
import { ROAD_DIRECTION } from '@/config/enum'
import { ASYNC_DIRECTIONS } from '@/config/dict'
import { sleep } from '@/utils'

import DEFAULT_ICON from '@/assets/images/common/list-default.png'

const BASE_PATH = import.meta.env.VITE_IMAGE_BASE

const jumperNum = ref<null | number>(null)
const app = getCurrentInstance()
const runningAvle = ref(true)

const params = reactive<any>({
  vehicleType: '',
  carPlate: '',
  retainedMinutesTime: null,
  tunnelIds: [],
  pageNo: 1,
  pageSize: 10,
  total: 0
})

const viewSetting = reactive<any>({
  urlList: [],
  initialIndex: 0,
  teleported: false,
  show: false
})

const router = useRouter()
const route = useRoute()

const imageRef = ref<any>(null) // 图片预览弹窗实例

let running: any = null // 持续更新

const allPages = computed(() => {

  const left = params.total % params.pageSize
  if (params.total - left <= 0) {
    return 1
  } else {
    return ((params.total - left) / params.pageSize) + (left > 0 ? 1 : 0)
  }
  
})

const directionMap = computed(() => {
  return Object.fromEntries(ASYNC_DIRECTIONS().map(item => {
    return [item.key, item.name]
  }))
})

const navs = computed(() => {
  return [
    { text: '全部', key: 'all' },
    ...ASYNC_DIRECTIONS().map(item => {
      return {
        text: item.name,
        key: item.seKey
      }
    })
  ]
})

const summary = ref<any>([
  { key: 'all', text: '全部车辆', num: 0 },
  { key: '0', text: '危化品车', num: 0 },
  { key: '1', text: '客车', num: 0 },
  { key: '2', text: '轿车', num: 0 },
  { key: '3', text: '货车', num: 0 },
  { key: '4', text: '其他', num: 0 }
])

const listData = ref([])

const act = ref('all')
const type = ref('all')
const loading = ref(true)
const circle = ref(false)

// 导航动画
const slideStyle = computed(() => {
  const x = navs.value.findIndex(item => item.key === act.value)
  return {
    transform: `translateX(${x * (130 + 12)}px)`
  }
})

// 方向切换
const navChange = (e) => {
  act.value = e.key
  // params.tunnelIds = e.key === 'all' ? ['gfj_tunnel_on', 'xl_tunnel_down'] : [e.key]
  params.tunnelIds = e.key === 'all' ? [] : [e.key]
}

// 类型切换
const typeChange = (e) => {
  type.value = e.key
  params.vehicleType = e.key === 'all' ? '' : e.key
}

// 重置
const reset = () => {
  params.carPlate = ''
  params.retainedMinutesTime = null
  getRemains()
}

// 追踪
const goTrack = (e) => {
  router.push({
    path: 'track',
    query: {
      id: e.carId,
      direction: ROAD_DIRECTION[e.direction],
      from: 'remain'
    }
  })
}

// 获取列表
const getRemains = async (x: number = 1) => {

  loading.value = true
  params.pageNo = x

  const res = await remainCars(params)
  const {
    allCount,
    dangerousCount,
    truckCount,
    passengerCount,
    sedanCount,
    otherCount,
    vehicleInfoList
  } = res
  summary.value[0].num = allCount
  summary.value[1].num = dangerousCount
  summary.value[2].num = passengerCount
  summary.value[3].num = sedanCount
  summary.value[4].num = truckCount
  summary.value[5].num = otherCount

  params.total = vehicleInfoList.total
  listData.value = (vehicleInfoList.records || []).map(item => {
    return {
      ...item,
      headImageUrl: BASE_PATH + item.headImageUrl,
      plateImageUrl: BASE_PATH + item.plateImageUrl
    }
  })
  loading.value = false

}

// 图片预览
const imageView = (urls, str,cp) => {
  app?.proxy?.$openImage(urls, str,cp)
}

const goJumper = () => {
  params.pageNo = jumperNum.value
}

const constantQuest = async () => {

  await getRemains(params.pageNo)
  await sleep(2000)
  if (runningAvle.value) {
    await constantQuest()
  }

}

onBeforeMount(async () => {

  const { direction } = route.query

  if (direction) {
    act.value = ['xl_tunnel_up', 'xl_tunnel_down'][+direction]
    params.tunnelIds = [act.value]
  }

  constantQuest()

})

onUnmounted(() => {
  runningAvle.value = false
})

</script>

<style lang='scss' scoped>

$car-url: '@/assets/images/cars/';

.navs {
  margin: 16px 40px 0;
  border-bottom: 1px solid #203A60;
  height: 48px;
  position: relative;
  .x-nav {
    font-size: 18px;
    font-weight: 600;
    width: 130px;
    height: 48px;
    display: inline-block;
    border: 1px solid #203A60;
    box-sizing: border-box;
    color: #ffffff;
    margin-right: 12px;
    border-radius: 12px 12px 0 0;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }

  .slide {
    position: absolute;
    width: 130px;
    height: 48px;
    background: #0073E6;
    left: 0;
    top: 0;
    border-radius: 12px 12px 0 0;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
  }

}

.summary {
  height: 50px;
  margin: 20px 40px 0;
  border-radius: 8px;
  background: rgba(69, 116, 182, 0.2);
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  padding: 0 24px;
  display: flex;
  align-items: center;
  .i-text {
    display: flex;
    align-items: center;
    margin-right: 40px;
    margin-top: -5px;
    position: relative;
    cursor: pointer;

    .slide {
      // width: 100%;
      height: 4px;
      background: #0073E6;
      position: absolute;
      left: 50%;
      bottom: -12px;
      border-radius: 4px;
      transform: translateX(-50%);

      width: 0;
      transition-property: all;
      transition-duration: .3s;
    }

    &.act {
      .slide {
        width: 100%;
      }
    }

    &:first-child {
      margin-right: 0;
    }
    .pre-text {
      font-size: 16px;
      font-weight: 600;
      color: white;
    }
    .num {
      font-size: 24px;
      font-weight: 500;
      color: #00E5FF;
      margin: 0 4px;
      margin-top: -5px;
    }
    .aft-text {
      font-size: 16px;
      font-weight: normal;
      color: #FFFFFF;
    }
    .car {

      &.car_0 {
        height: 20px;
        width: 54px;
        margin-right: 10px;
        background: url($car-url + 'car_select_01.png') no-repeat;
        background-size: auto 100%;
      }

      &.car_1 {
        height: 20px;
        width: 48px;
        margin-right: 6px;
        background: url($car-url + 'car_select_02.png') no-repeat;
        background-size: auto 100%;
        background-position-x: -12px;
      }

      &.car_2 {
        height: 20px;
        width: 42px;
        margin-right: 10px;
        background: url($car-url + 'car_select_03.png') no-repeat;
        background-size: auto 100%;
        background-position-x: -12px;
      }

      &.car_3 {
        height: 20px;
        width: 42px;
        margin-right: 5px;
        background: url($car-url + 'car_select_04.png') no-repeat;
        background-size: auto 100%;
        background-position-x: -12px;
      }

      &.car_4 {
        height: 20px;
        width: 42px;
        margin-right: 5px;
        background: url($car-url + 'car_select_05.png') no-repeat;
        background-size: auto 100%;
        background-position-x: -12px;
      }

    }
  }
  .dv-line {
    height: 24px;
    width: 1px;
    background: rgba(240, 245, 255, 0.45);
    margin: 0 32px;
  }
}

.search {
  margin: 20px 40px 16px;
  display: inline-flex;
  color: white;
  .inp-item {
    display: flex;
    align-items: center;
    margin-right: 60px;
    .i-name {
      font-size: 14px;
    }
    .i-content {
      display: flex;
      align-items: center;
      color: white;
      & > span {
        white-space: nowrap;
      }
    }
  }
  :deep(.el-input__wrapper) {
    border-radius: 0;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  }
  .x-inp {
    width: 300px;
  }
  .num-inp {
    width: 126px;
    margin: 0 5px;
  }
  .btns {
    :deep(.el-button) {
      &:first-child {
        background: rgba(18, 112, 255, 1);
      }
      &:last-child {
        background: rgba(0, 125, 250, 0.15);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.29);
        &:hover {
          border-color: rgba(255, 255, 255, 0.5);
        }
      }
    }
  }
}

.list-content {
  margin: 0 40px;
  .car-image {
    width: 40px;
    height: 40px;
    cursor: pointer;
    :deep(.image-error) {
      height: 100%;
      width: 100%;
      // background: #EAEAEA;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666666;
    }
  }
  .empty {
    color: rgba(240, 245, 255, 0.45);
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .def-btn {
    color: #00AEFF;
    cursor: pointer;
  }
  .pages {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: white;
    .sum {
      margin-right: 20px;
    }
    .page-select {
      width: 128px;
      margin-right: 20px;
      :deep(.el-select__wrapper) {
        border-radius: 0;
        background: rgba(32, 58, 96, 0.6);
        border: 1px solid rgba(32, 58, 96, 0.6);
        box-shadow: 0 0 0;
        
        .el-select__placeholder {

          color: white;
        } 
      }
    }
    .jumper {
      margin-left: 24px;
      font-size: 16px;
      :deep(.el-input__wrapper) {
        background-color: rgba(32, 58, 96, 0.6);
        border: 1px solid rgba(32, 58, 96, 0.6);
        border-radius: 0;
        box-shadow: 0 0 0 0;
      }
      :deep(.el-input-number) {
        width: 60px;
      }
    }
  }
}

</style>

<style lang="scss">

.remain {
  padding-bottom: 30px;
  .el-input__inner {
    color: #FFFFFF;
  }
}

.el-table {
  &.car-table {
    --el-table-bg-color: transparent;
    --el-table-tr-bg-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-border: 0px solid transparent;
    --el-table-border-color: transparent;
    --el-table-text-color: rgba(240, 245, 255, 0.95);
    --el-table-header-text-color: rgba(240, 245, 255, 0.95);
    // --el-table-row-hover-bg-color: rgba(69, 116, 182, 0.1);
    // --el-fill-color-lighter: rgba(69, 116, 182, 0.2);
    .car-row {
      height: 44px;
    }
    .stripe-row {
      background: rgba(69, 116, 182, 0.2);
    }
    .el-table__row:hover {
      .el-table__cell {
        background: rgba(69, 116, 182, 0);
      }
      
    }
  }
}

.el-pagination {
  &.car-pages {
    --el-pagination-bg-color: rgba(32, 58, 96, 0.6);
    --el-pagination-button-color: white;
    --el-pagination-button-disabled-bg-color: rgba(32, 58, 96, 0.4);
    --el-pagination-button-disabled-color: rgba(255, 255, 255, 0.5);
    .number {
      margin: 0 4px;
      &.is-active {
        background: #007DFA;
        color: white;
      }
    }
  }
}

</style>