<template>
  <div :class="['dz-milestone-container', verticalAlign && `dz-milestone-container-align-${verticalAlign}`]" ref="milestoneRef" @click="handleClick">
    <div class="milestone">
      <div class="arrow left-arrow" v-if="arrows.includes('left')"></div>
      <div class="milestone-center">
        <div class="arrow top-arrow" v-if="arrows.includes('top')"></div>
        <div class="milestone-info">
          <div class="milestone-label">{{ title }}</div>
          <div class="milestone-value">
            <div class="border"></div>
            <span class="value" v-if="!isEmpty">{{ value }}</span>
            <span class="unit">{{unit}}</span>
          </div>
        </div>
        <div class="arrow bottom-arrow" v-if="arrows.includes('bottom')"></div>
      </div>
      <div class="arrow right-arrow" v-if="arrows.includes('right')"></div>
    </div>
  </div>
</template>

<script setup lang="ts" name="DzMilestone">
import dayjs from 'dayjs'
import {computed, ref, onMounted} from 'vue'

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

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

const isEmpty = computed(() => !props.value && !props.unit)

const verticalAlign = computed(() => {
  if (!props.arrows.includes('top') && props.arrows.includes('bottom')) {
    return 'bottom'
  } else if (props.arrows.includes('top') && props.arrows.includes('bottom')) {
    return 'center'
  } else {
    return ''
  }
})


let milestoneRef = ref(null);

const props = withDefaults(defineProps<Props>(),
{
  arrows: () => [],
  title: ''
})


const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click')
}

</script>

<style lang='less' scoped>

  .dz-milestone-container {
      display: inline-block;
      vertical-align: top;
      
      .milestone {
        display: flex;
        align-items: center;
        .milestone-center {
          flex: 1;
          display: flex;
          min-width: 90px;
          flex-direction: column;
          align-items: center;
          
          .milestone-info {
            width: 100%;
          }
          .milestone-label {
            width: 100%;
            height: 42px;
            line-height: 42px;
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
            background-image: url('./imgs/highlight-border.png');
            background-size: 100% 100%;
            text-align: center;
          }

          .milestone-value {
            position: relative;
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-weight: 500;
            box-sizing: border-box;
            border: 2px solid rgba(0,255,244,0.10);
            background-size: 100% 100%;
            color: #FFFFFF;
            margin-top: 6px;
            .border {
              position: absolute;
              top: 0;right: 0;
              left: 0;bottom:0;
              background-color: transparent;
              &::before,
              &::after {
                content: "";
                position: absolute;
                width: 6px;
                height: 6px;
              }
              &::before {
                bottom: -2px;
                left: -2px;
                border-left: 3px solid #00E0DB;
                border-bottom: 3px solid #00E0DB;
              }
              &::after {
                right: -2px;
                top: -2px;
                border-top: 3px solid #00E0DB;
                border-right: 3px solid #00E0DB;
              }
            }
            &::before,
            &::after {
              content: "";
              position: absolute;
              width: 6px;
              height: 6px;
            }
            &::before {
              top: -2px;
              left: -2px;
              border-top: 3px solid #00E0DB;
              border-left: 3px solid #00E0DB;
            }
            &::after {
              right: -2px;
              bottom: -2px;
              border-bottom: 3px solid #00E0DB;
              border-right: 3px solid #00E0DB;
            }

            .value {
              background-image: -webkit-linear-gradient(bottom, #FADB14, #19ECFF);
              -webkit-background-clip: text;
              font-weight: 500;
              font-size: 22px;
              -webkit-text-fill-color: transparent;
            }

            .unit {
              font-size: 16px;
              color: #95BEF1;
              margin-left: 10px;
            }
          }
        }
      }

      .arrow {
        width: 25px;
        height: 20px;
        background-image: url('./imgs/arrow2.png');
        background-size: 100% 100%;
      }
      .top-arrow {
        transform: rotate(-90deg);
        margin-bottom: 4px;
        margin-top: 0px;
      }
      .right-arrow {
        margin-right: 0px;
        margin-left: 4px;
      }
      .bottom-arrow {
        transform: rotate(90deg);
        margin-top: 4px;
        margin-bottom: 0px;
      }
      .left-arrow {
        transform: rotate(180deg);
        margin-right: 4px;
        margin-left: 0px;
      }
    
  }
  .dz-milestone-container-align-bottom {
    vertical-align: bottom;
  }
  .dz-milestone-container-align-center {
    vertical-align: center;
  }


</style>
