<script lang='ts' setup>

import ItemSelect from './ItemSelect.vue'
import { ASYNC_DIRECTIONS } from '@/config/dict'
import { getHisFlows } from '@/api/history'
import { setTrack } from '@/flash/History'

const emits = defineEmits(['track-change'])

const OPTIONS = [
  { key: 0, text: '小于' },
  { key: 1, text: '大于' }
]

const trackers = defineModel()

const listData = ref([]) // 车辆数据
const loading = ref(false) // 加载状态
const jumperNum = ref(null) // 跳转页码

const complexPms = reactive({
  speed: null,
  speedKey: 1,
  time: null,
  timeKey: 1
})

const params = reactive({
  carPlate: '', // 车牌
  direction: ['上行', '下行'], 
  stAvgSpeed: null, // 速度大于
  edAvgSpeed: null, // 速度小于
  stDurationSecond: null, // 时间大于
  edDurationSecond: null, // 时间小于
  firstStartTime: null,
  firstEndTime: null,
  pageNo: 1,
  pageSize: 10,
  total: 0
})


const areaTime = computed({
  set (e) {
    if (e) {
      params.firstStartTime = e[0]
      params.firstEndTime = e[1]
    } else {
      params.firstStartTime = null
      params.firstEndTime = null
    }
    
  },
  get () {
    return [params.firstStartTime, params.firstEndTime]
  }
})

const allPages = computed(() => {
  const left = params.total % params.pageSize
  const num = (params.total - left) / params.pageSize
  return (num + (left ? 1 : 0)) || 1
})
const directMap = computed(() => {
  return Object.fromEntries(
    ASYNC_DIRECTIONS().map((item) => {
      return [item.seKey, item]
    })
  )
})
// 获取车辆
const getCars = (x?: number) => {

  params.pageNo = x || 1
  loading.value = true

  const newPms = {}
  for(let key in params) {
    if (params[key]) {
      newPms[key] = params[key]
    }
  }

  if (complexPms.time) {
    newPms[['edDurationSecond', 'stDurationSecond'][complexPms.timeKey]] = complexPms.time
  }

  if (complexPms.speed) {
    newPms[['edAvgSpeed', 'stAvgSpeed'][complexPms.speedKey]] = complexPms.speed
  } 

  getHisFlows(newPms).then(res => {
    listData.value = res.list
    params.total = res.total
    loading.value = false
  })

}

// 分页跳转
const goJumper = () => {
  getCars(jumperNum.value || 1)
}


// 设置记录
const setRecord = (row) => {
  // trackers.value.id = row.carId
  // trackers.value.recordId = row.guid
  // trackers.value.tracking = true
  // trackers.value.sectionAct = 0
  // setTrack(row)
  emits('track-change', row)
}

// 重置
const goReset = () => {
  params.carPlate = ''
  params.pageNo = 1
  params.firstStartTime = null
  params.firstEndTime = null
  params.direction = []
  complexPms.speedKey = 1
  complexPms.speed = null
  complexPms.timeKey = 1
  complexPms.time = null
  getCars()
}


onBeforeMount(() => {
  getCars()
})

</script>

<template>

<div class="car-list">

  <div class="search">

    <div class="inp-item">
      <div class="label">关键字：</div>
      <div class="content">
        <el-input v-model="params.carPlate" placeholder="请输入..." />
      </div>
    </div>

    <div class="inp-item">
      <div class="label">平均车速：</div>
      <div class="content more">
        <el-select v-model="complexPms.speedKey" class="x-select" :teleported="false">
          <el-option
            v-for="item in OPTIONS"
            :key="item.key"
            :label="item.text"
            :value="item.key"
          />
        </el-select>
        <el-input-number
          :controls="false"
          :min="0"
          v-model="complexPms.speed"
          class="num-inp def"
          placeholder="请输入..."
        />
        <div class="unit">km/h</div>
      </div>
    </div>

    <div class="inp-item">
      <div class="i-name">隧道方向：</div>
      <div class="i-content">
        <ItemSelect v-model="params.direction" :selects="ASYNC_DIRECTIONS()" />
      </div>
    </div>

    <div class="inp-item">
      <div class="label">进入时间：</div>
      <div class="content">
        <el-date-picker
          class="def"
          v-model="areaTime"
          type="datetimerange"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :teleported="false"
        />
      </div>
    </div>

    <div class="inp-item">
      <div class="label">留存时间：</div>
      <div class="content more">
        <el-select v-model="complexPms.timeKey" class="x-select" :teleported="false">
          <el-option
            v-for="item in OPTIONS"
            :key="item.key"
            :label="item.text"
            :value="item.key"
          />
        </el-select>
        <el-input-number
          :controls="false"
          :min="0"
          v-model="complexPms.time"
          class="num-inp def"
          placeholder="请输入..."
        />
        <div class="unit">分钟</div>
      </div>
    </div>

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


  </div>

   <!-- 列表 -->
   <div class="list-content">
    <el-table
      @row-click="setRecord"
      :data="listData"
      :row-class-name="({rowIndex}) => {
        return rowIndex % 2 === 0 ? 'stripe-row' : ''
      }"
      class="def"
    >
        <el-table-column width="30">
          <template #default="{ row }">
            <div v-if="row.guid === trackers.recordId" class="dot"></div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="序号" width="60">
          <template #default="{ $index }">
            {{ $index + (params.pageNo - 1) * params.pageSize + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="carPlate" label="车牌"/>
        <el-table-column prop="carType" label="车辆类型" width="100" />
        <el-table-column prop="averageSpeed" label="平均车速" width="120" />

        <el-table-column prop="directionName" label="方向" width="190" >
<template #default="{ row }">
            {{ directMap[row.tunnelId].name }}
          </template>
        </el-table-column>

        <el-table-column prop="inTunnelTime" label="进入时间" width="180" />
        <el-table-column prop="outTunnelTime" label="驶出时间" width="180" />
        <el-table-column prop="duration" label="留存时间" width="180" />
        <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="def"
        @change="getCars"
      />

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

    </div>

  </div>

</div>

</template>

<style lang='scss' scoped>

.car-list {
  flex-grow: 1;
  margin-left: 40px;
  position: relative;
  .inp-item {
    display: flex;
    align-items: center;
    color: white;
    .label {
      font-size: 14px;
      white-space: nowrap;
      width: 82px;
      flex-shrink: 0;
    }
    .content {
      flex-grow: 1;
      position: relative;
      .x-select {
        width: 80px;
        margin-right: 10px;
      }
    }
    .more {
      display: flex;
      align-items: center;
      .unit {
        margin-left: 10px;
      }
    }
  }

  .search {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 20fr 20fr 240px;
    grid-column-gap: 80px;
    grid-row-gap: 12px;

    :deep(.el-input__wrapper) {
      width: auto;
    }
  }

  .list-content {
    margin-top: 20px;
    :deep(.el-table__row) {
      cursor: pointer;
    }
    .dot {
      width: 8px;
      height: 8px;
      background: #00DDFF;
      border-radius: 8px;
      position: absolute;
      right: -10px;
      top: 50%;
      transform: translateY(-50%);
    }
    .pages {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: white;
      .sum {
        margin-right: 20px;
      }
      .page-select {
        width: 100px;
        margin-right: 20px;
      }
      .jumper {
        margin-left: 24px;
        font-size: 16px;
      }
    }
  }

}

</style>