<template>
    <div class="go-border-06">
      <svg xmlns="http://www.w3.org/2000/svg" :width="w" :height="h">
       
      </svg>
      <div class="box">
        <span class="text">{{currentTime}}</span>
        <span class="datetext">{{currentDate}}</span>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, PropType, onMounted,onUnmounted, toRefs } from 'vue';
  import dayjs from 'dayjs';
  import { CreateComponentType } from '@/packages/index.d';
  const props = defineProps({
    chartConfig: {
      type: Object as PropType<CreateComponentType>,
      required: true
    }
  })
  const weatherIcon = ref()
  
  const { w, h } = toRefs(props.chartConfig.attr)
  const { textSize, textColor,textSize1, textColor1} = toRefs(props.chartConfig.option)
  const currentDate = ref(dayjs().locale('zh-cn').format('YYYY.M.D'));
  let currentTime = ref()
  const updateTime = () => {
    const now = new Date();
    currentTime.value = dayjs().locale('zh-cn').format('HH:mm:ss');; // 格式为hh:mm:ss
  };
  onMounted(() => {
    updateTime();
    const interval = setInterval(updateTime, 1000);
    onUnmounted(() => {
      clearInterval(interval);
    });
  });
  
  </script>
  
  <style lang="scss" scoped>
  @include go('border-06') {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  
    svg {
      position: absolute;
      z-index: -1;
    }
  
    .box{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
    }
  
    .text {
      color: v-bind('textColor');
      font-size: v-bind('textSize+"px"');
    }
    .datetext {
      margin-left: 20px;
      color: v-bind('textColor1');
      font-size: v-bind('textSize1+"px"');
    }
  }
  </style>
  