<template>
  <div :class="['direct-bar', `direct-${direct ? 'down' : 'up'}`]">
    <div class="title">
      <div class="text">{{ props.direct ? '金华方向' : '杭州方向' }}</div>
      <div class="infos">
        留存车辆：
        <div class="link" @click="viewSet(props.direct ? 2 : 1)">
          {{ nums }} 详情 <Icon class="icon" :size="14" icon="ep:arrow-right" />
        </div>
      </div>
    </div>

    <div class="tabs">
      <div
        v-for="item in tabs"
        :key="item.type"
        :class="['x-tab', { act: act === item.type }]"
        @click="() => focusChange(item.type)"
      >
        {{ item.text }} ({{ item.num }})
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { bus, cars } from '@/views/3DModel/_state'
import { ref, defineExpose } from 'vue'

const props = defineProps<{
  direct: number // 上行：0 下行 1
}>()

const act = ref(null)
const tabs = computed(() => {
  const arr = [
    { text: '危化品车', type: 0, num: 0 },
    { text: '货车', type: 3, num: 0 },
    { text: '客车', type: 1, num: 0 },
    { text: '轿车', type: 2, num: 0 },
    { text: '其他', type: 4, num: 0 }
  ]

  cars.value[props.direct].forEach((xcar) => {
    const x = arr.findIndex((item) => item.type === xcar.type)
    arr[x].num++
  })

  // nums.value = 0
  // arr.forEach(item => {
  //   nums.value += item.num
  // })

  return arr
})

const nums = computed(() => {
  let x = 0
  tabs.value.forEach((item) => {
    x += item.num
  })

  return x
})
// 视角切换
const viewSet = (x) => {
  bus.emit('view-reset', x)
  bus.emit('update-view-act', x);
}
// 初始化
const setBar = (e) => {}

// focus 车辆切换
const focusChange = (key) => {
  if (act.value === key) {
    bus.emit('focus-change', {
      type: 5,
      direct: props.direct
    })
    return (act.value = null)
  }
  act.value = key

  bus.emit('focus-change', {
    type: key,
    direct: props.direct
  })
}

defineExpose({
  setBar
})
</script>

<style lang="scss" scoped>
$Common_Url: '@/assets/images/3d/';

.direct-bar {
  display: flex;
  align-items: center;
  position: absolute;

  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  .title {
    color: white;
    width: 320px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 30px auto;
    padding-bottom: 6px;

    .text {
      font-size: 24px;
      font-weight: 600;
      line-height: 36px;
    }

    .infos {
      display: flex;
      align-items: center;
      .link {
        display: flex;
        align-items: center;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
  .tabs {
    display: flex;
    margin-left: 20px;
    color: white;
    .x-tab {
      height: 32px;
      line-height: 30px;
      padding: 0 20px;
      margin-right: 8px;
      font-size: 14px;
      border-radius: 2px;
      background: rgba(0, 125, 250, 0.15);
      border: 1px solid rgba(0, 125, 250, 0.15);
      box-sizing: border-box;
      cursor: pointer;
          white-space: nowrap;
      &.act {
        background: rgba(124, 213, 255, 0.15);
        border-color: #7cd5ff;
      }
    }
  }
}

.direct-up {
  top: 60px;
  .title {
    padding-left: 30px;
    background: url($Common_Url + 'arrow_lt.png') no-repeat;
    background-size: 100% auto;
    background-position: left bottom;
  }
}

.direct-down {
  bottom: 60px;
  .title {
    padding-right: 30px;
    background: url($Common_Url + 'arrow_rt.png') no-repeat;
    background-size: 100% auto;
    background-position: left bottom;
  }
}
</style>
