<script lang='ts' setup>

const navs = ref([
  { key: 1, text: '车辆轨迹' },
  { key: 2, text: '历史事件' },
  { key: 3, text: '历史数据报表' }
])

const act = defineModel()

// 导航动画
const slideStyle = computed(() => {
  const x = navs.value.findIndex(item => item.key === act.value)
  return {
    transform: `translateX(${x * (158 + 12)}px)`
  }
})

// 方向切换
const navChange = (e) => {
  act.value = e.key
}

</script>

<template>

<div class="navs">

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

  <div :style="slideStyle" class="slide"></div>

</div>

</template>

<style lang='scss' scoped>

.navs {
  margin: 16px 40px 0;
  border-bottom: 1px solid #203A60;
  height: 48px;
  position: relative;
  .x-nav {
    font-size: 18px;
    font-weight: 600;
    width: 158px;
    height: 48px;
    display: inline-block;
    border: 1px solid #203A60;
    box-sizing: border-box;
    color: #ffffff;
    margin-right: 12px;
    border-radius: 12px 12px 0 0;
    text-align: center;
    line-height: 48px;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }

  .slide {
    position: absolute;
    width: 158px;
    height: 48px;
    background: #0073E6;
    left: 0;
    top: 0;
    border-radius: 12px 12px 0 0;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
  }

}


</style>