<template>

<div :class="['ctrls', ctrlClass]">

  <div class="title">
    <div class="text">
      {{ DIRECTION_NAMES[infos.direction] }}
      <div @click="directionChange" class="direction-change">
        <div class="icon"></div>
        {{ DIRECTION_NAMES[1 - infos.direction].slice(0, -2) }}
      </div>
    </div>
    <div class="more">
      留存车辆：{{ infos.total }}
      <div @click="goRemains" class="def-btn">
        详情 <Icon icon="ep:arrow-right" />
      </div>
    </div>
  </div>

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

</div>

</template>

<script lang='ts' setup>

import { ref, defineProps, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ASYNC_DIRECTIONS } from '@/config/dict'

const props = defineProps<{
  infos: any
}>()

const emits = defineEmits(['car-filter', 'direction-change'])
const router = useRouter()

const ctrlClass = computed(() => props.infos.direction ? 'lower' : 'up')

const act = ref('')
const filters = ref([
  { text: '危化品车', key: 'dangerousCount', type: '0'},
  { text: '货车', key: 'truckCount', type: '3' },
  { text: '客车', key: 'passengerCount', type: '1'},
  { text: '轿车', key: 'sedanCount', type: '2' },
  { text: '其他', key: 'otherCount', type: '4' }
])

const DIRECTION_NAMES = computed(() => {

  return ASYNC_DIRECTIONS().map(item => item.name)

})

const goFilter = (e) => {
  if (act.value === e.key) {
    act.value = ''
    emits('car-filter', {
      direction: props.infos.direction
    })
  } else {
    act.value = e.key
    emits('car-filter', {
      e,
      direction: props.infos.direction
    })
  }
}

// 前往留存
const goRemains = () => {
  router.push({
    path: 'remain',
    query: {
      direction: props.infos.direction
    }
  })
}

// 方向切换
const directionChange = () => {
  emits('direction-change')
}

</script>

<style lang='scss' scoped>

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

.ctrls {
  display: inline-flex;
  align-items: center;
  height: 42px;
  .title {
    color: white;
    width: 360px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;

    .text {
      font-size: 24px;
      font-weight: 600;
      display: flex;
      align-items: center;
      .direction-change {
        font-size: 16px;
        color: #42E7FF;
        display: flex;
        align-items: center;
        cursor: pointer;
        .icon {
          width: 16px;
          height: 16px;
          margin: 0 4px;
          background: url($common-url + 'trans.png') no-repeat;
          background-size: cover;
        }
      }
    }
    .more {
      font-size: 16px;
      color: rgba(240, 245, 255, 0.95);
      display: flex;

      .def-btn {
        display: flex;
        align-items: center;
        cursor: pointer;
      }
    }
  }

  &.up {
    .title {
      background-image: url($base-url + 'arrow_lft.png');
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: 0 bottom;
      .text {
        margin-left: 32px;
      }
    }
    .def-btn {
      margin-left: 5px;
    }
  }

  &.lower {
    .title {
      background-image: url($base-url + 'arrow_rgt.png');
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: 0 bottom;
    }
    .more {
      margin-right: 32px;
    }
  }
}

.filters {
  display: flex;
  margin-left: 15px;
  .x-car {
    height: 32px;
    font-size: 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: #ffffff;
    background: rgba(0, 125, 250, 0.15);
    margin-left: 8px;
    cursor: pointer;
    &.act {
      background: rgba(124, 213, 255, 0.15);
      box-sizing: border-box;
      border: 1px solid #7CD5FF;
    }
  }
}

</style>