<template>
  <div :class="['dz-mile-map-container', verticalAlign && `dz-mile-map-container-align-${verticalAlign}`]" ref="milestoneRef">
    <MileStone v-for="(item, index) in mapData" :arrows="item.arrows"  :title='item.title'  :value="item.value"  :unit="item.unit" @click="handleClick(index)"></MileStone>
  </div>
</template>

<script setup lang="ts" name="DzMileMap">
import dayjs from 'dayjs'
import MileStone from '../milestone'
import {computed, ref, onMounted} from 'vue'

type dzArrow = 'left' | 'right' | 'top' | 'bottom'

interface dzMileStone {
  arrows: dzArrow[],
  title: string,
  value?: number | string
  unit?: string,
}

type dzVerticalAlign = 'top' | 'bottom' | 'middle'

interface Props {
  mapData?: dzMileStone[]
  verticalAlign?: dzVerticalAlign
}


const props = withDefaults(defineProps<Props>(),
{
  mapData: () => [],
  verticalAlign: 'top'
})


const emit = defineEmits(['click'])

const handleClick = (index) => {
  emit('click', index)
}
onMounted(() => {

})
</script>

<style lang='less' scoped>
  .dz-mile-map-container {
    display: flex;
  }
  .dz-mile-map-container-align-bottom {
    align-items: flex-end;
  }
  .dz-mile-map-container-align-middle {
    align-items: center;
  }
  .dz-mile-map-container-align-top {
    align-items: flex-start;
  }


</style>
