<template>

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

  <div class="title">
    <div class="text">
      {{ directionName }}
    </div>
    <div class="more">
      留存车辆：{{ 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,
  holeTypeName: string
}>()

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

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

const holeCtrls = computed(() => props.holeTypeName === '新洞' ? 'newTop' : 'oldButtom')

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 directionName = computed(() => {

  const arrs = ASYNC_DIRECTIONS()
  return arrs[props.infos.direction].name + props.holeTypeName

})

const total = computed(() => {
  const { dangerousCount, truckCount, passengerCount, sedanCount, otherCount } = props.infos
  return dangerousCount + truckCount + passengerCount + sedanCount + otherCount
})

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
    }
  })
}

</script>

<style lang='scss' scoped>

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

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

    .text {
      font-size: 24px;
      font-weight: 600;
    }
    .more {
      font-size: 16px;
      color: rgba(240, 245, 255, 0.95);
      display: flex;
      .def-btn {
        cursor: pointer;
        display: flex;
        align-items: center;
      }
    }
  }

  &.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;
    }
  }

  &.newTop {
    margin: 0 auto 10px;
  }

  &.oldButtom {
    margin: 0 auto;
  }
}

.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>