<template>
  <div :class="['ctrls', ctrlClass]">
    <div class="title">
      <div class="text">
        {{ DIRECTION_NAMES[infos.direction] + holeTypeName_l() }}
        <div @click="holeTypeChange" class="direction-change">
          <div class="icon"></div>
          {{ DIRECTION_NAMES[infos.direction] + holeTypeName_r() }}
        </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', 'hole-type-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 holeTypeName_l = () => {
  return props.infos.holeType === 'old' ? '老洞' : '新洞'
}

const holeTypeName_r = () => {
  return props.infos.holeType === 'old' ? '新洞' : '老洞'
}

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 holeTypeChange = () => {
  emits('hole-type-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: 460px;
    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>
