<template>
  <div class="flex items-center">
    <div class="text-[#45A2FF] text-[14px]">{{ year }}-{{ month }}-{{ day }}&nbsp;{{ weekday }}</div>
    <div class="digital-watch ml-[10px]" :style="{ 
      '--size-scale': sizeScale,
      '--color-led': ledColor,
      '--color-led-off': ledOffColor,
      '--color-background': backgroundColor,
      '--color-glow': glowColor
    }">
      <div class="time-container">
        <div class="digit-group">
          <div class="seven-segment">
            <div :class="getSegmentClass(hours[0], 0)" class="segment-a"></div>
            <div :class="getSegmentClass(hours[0], 1)" class="segment-b"></div>
            <div :class="getSegmentClass(hours[0], 2)" class="segment-c"></div>
            <div :class="getSegmentClass(hours[0], 3)" class="segment-d"></div>
            <div :class="getSegmentClass(hours[0], 4)" class="segment-e"></div>
            <div :class="getSegmentClass(hours[0], 5)" class="segment-f"></div>
            <div :class="getSegmentClass(hours[0], 6)" class="segment-g"></div>
          </div>
          <div class="seven-segment">
            <div :class="getSegmentClass(hours[1], 0)" class="segment-a"></div>
            <div :class="getSegmentClass(hours[1], 1)" class="segment-b"></div>
            <div :class="getSegmentClass(hours[1], 2)" class="segment-c"></div>
            <div :class="getSegmentClass(hours[1], 3)" class="segment-d"></div>
            <div :class="getSegmentClass(hours[1], 4)" class="segment-e"></div>
            <div :class="getSegmentClass(hours[1], 5)" class="segment-f"></div>
            <div :class="getSegmentClass(hours[1], 6)" class="segment-g"></div>
          </div>
        </div>
        <div class="separator">
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="digit-group">
          <div class="seven-segment">
            <div :class="getSegmentClass(minutes[0], 0)" class="segment-a"></div>
            <div :class="getSegmentClass(minutes[0], 1)" class="segment-b"></div>
            <div :class="getSegmentClass(minutes[0], 2)" class="segment-c"></div>
            <div :class="getSegmentClass(minutes[0], 3)" class="segment-d"></div>
            <div :class="getSegmentClass(minutes[0], 4)" class="segment-e"></div>
            <div :class="getSegmentClass(minutes[0], 5)" class="segment-f"></div>
            <div :class="getSegmentClass(minutes[0], 6)" class="segment-g"></div>
          </div>
          <div class="seven-segment">
            <div :class="getSegmentClass(minutes[1], 0)" class="segment-a"></div>
            <div :class="getSegmentClass(minutes[1], 1)" class="segment-b"></div>
            <div :class="getSegmentClass(minutes[1], 2)" class="segment-c"></div>
            <div :class="getSegmentClass(minutes[1], 3)" class="segment-d"></div>
            <div :class="getSegmentClass(minutes[1], 4)" class="segment-e"></div>
            <div :class="getSegmentClass(minutes[1], 5)" class="segment-f"></div>
            <div :class="getSegmentClass(minutes[1], 6)" class="segment-g"></div>
          </div>
        </div>
        <div class="separator">
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div class="digit-group">
          <div class="seven-segment">
            <div :class="getSegmentClass(seconds[0], 0)" class="segment-a"></div>
            <div :class="getSegmentClass(seconds[0], 1)" class="segment-b"></div>
            <div :class="getSegmentClass(seconds[0], 2)" class="segment-c"></div>
            <div :class="getSegmentClass(seconds[0], 3)" class="segment-d"></div>
            <div :class="getSegmentClass(seconds[0], 4)" class="segment-e"></div>
            <div :class="getSegmentClass(seconds[0], 5)" class="segment-f"></div>
            <div :class="getSegmentClass(seconds[0], 6)" class="segment-g"></div>
          </div>
          <div class="seven-segment">
            <div :class="getSegmentClass(seconds[1], 0)" class="segment-a"></div>
            <div :class="getSegmentClass(seconds[1], 1)" class="segment-b"></div>
            <div :class="getSegmentClass(seconds[1], 2)" class="segment-c"></div>
            <div :class="getSegmentClass(seconds[1], 3)" class="segment-d"></div>
            <div :class="getSegmentClass(seconds[1], 4)" class="segment-e"></div>
            <div :class="getSegmentClass(seconds[1], 5)" class="segment-f"></div>
            <div :class="getSegmentClass(seconds[1], 6)" class="segment-g"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useDate } from '@/composables/useDate';

// 尺寸缩放比例
const sizeScale = ref(1);

// 颜色设置
const ledColor = ref('#44F1FF'); // LED点亮时的颜色
const ledOffColor = ref('#031743'); // LED熄灭时的颜色
const backgroundColor = ref('#031743'); // 背景颜色
const glowColor = ref('#44F1FF'); // 发光效果颜色

// 定义每个数字对应的七段显示状态 [a, b, c, d, e, f, g]
const digitSegments: { [key: string]: boolean[] } = {
  '0': [true, true, true, true, true, true, false],  // 0: 显示a,b,c,d,e,f
  '1': [false, true, true, false, false, false, false], // 1: 只显示b,c
  '2': [true, true, false, true, true, false, true],  // 2: 显示a,b,d,e,g
  '3': [true, true, true, true, false, false, true],  // 3: 显示a,b,c,d,g
  '4': [false, true, true, false, false, true, true], // 4: 显示b,c,f,g
  '5': [true, false, true, true, false, true, true],  // 5: 显示a,c,d,f,g
  '6': [true, false, true, true, true, true, true],   // 6: 显示a,c,d,e,f,g
  '7': [true, true, true, false, false, false, false], // 7: 显示a,b,c
  '8': [true, true, true, true, true, true, true],    // 8: 显示所有段
  '9': [true, true, true, true, false, true, true],   // 9: 显示a,b,c,d,f,g
  ' ': [false, false, false, false, false, false, false], // 空格: 不显示任何段
};

const getSegmentClass = (digit: string, index: number) => {
  const segments = digitSegments[digit] || digitSegments[' '];
  return {
    'segment': true,
    'segment-on': segments[index]
  };
};

let timer: number | null = null;

let { year, month, day, weekday,hours, minutes, seconds, formateTime } = useDate()

onMounted(() => {
  formateTime();
  timer = window.setInterval(formateTime, 500);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
</script>

<style lang="scss" scoped>

.digital-watch {
  // 基础尺寸定义，通过CSS变量和缩放比例结合使用
  --size-scale: 1;
  --base-segment-width: 5px;
  --base-segment-height: 2px;
  --base-segment-vertical-width: 2px;
  --base-segment-vertical-height: 5px;
  --base-digit-width: 9px;
  --base-digit-height: 14px;
  --base-digit-gap: 5px;
  --base-dot-size: 2px;
  --base-separator-margin: 2px;
  
  // 颜色变量定义
  --color-led: #44F1FF; // 默认LED点亮颜色 (红色)
  --color-led-off: #031743; // 默认LED熄灭颜色
  --color-background: #031743; // 默认背景颜色
  --color-glow: #031743; // 默认发光效果颜色
  
  // 应用缩放后的尺寸
  --segment-width: calc(var(--base-segment-width) * var(--size-scale));
  --segment-height: calc(var(--base-segment-height) * var(--size-scale));
  --segment-vertical-width: calc(var(--base-segment-vertical-width) * var(--size-scale));
  --segment-vertical-height: calc(var(--base-segment-vertical-height) * var(--size-scale));
  --segment-spacing: calc(2px * var(--size-scale));
  --digit-width: calc(var(--base-digit-width) * var(--size-scale));
  --digit-height: calc(var(--base-digit-height) * var(--size-scale));
  --digit-gap: calc(var(--base-digit-gap) * var(--size-scale));
  --dot-size: calc(var(--base-dot-size) * var(--size-scale));
  --separator-margin: calc(var(--base-separator-margin) * var(--size-scale));
  --border-radius: calc(3px * var(--size-scale));
  --glow-radius: calc(5px * var(--size-scale));
  --clock-padding: calc(20px * var(--size-scale));
  --clock-border-radius: calc(10px * var(--size-scale));
  
  background-color: var(--color-background);
  border-radius: var(--clock-border-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}

.time-container {
  display: flex;
  align-items: center;
}

.digit-group {
  display: flex;
  gap: var(--digit-gap);
}

.separator {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: var(--digit-height);
  margin: 0 var(--separator-margin);
  
  .dot {
    width: var(--dot-size);
    height: var(--dot-size);
    background-color: var(--color-led);
    border-radius: 50%;
  }
}


.seven-segment {
  position: relative;
  width: var(--digit-width);
  height: var(--digit-height);
}

.segment {
  position: absolute;
  background-color: var(--color-led-off);
  border-radius: var(--segment-spacing);
  z-index: auto; 
  &-on {
    background-color: var(--color-led);
    // box-shadow: 0 0 var(--glow-radius) var(--color-glow);
  }
}

.segment-a {
  width: var(--segment-width);
  height: var(--segment-height);
  top: 0;
  left: calc((var(--digit-width) - var(--segment-width)) / 2);
  border-radius: var(--border-radius);
}

.segment-b {
  width: var(--segment-vertical-width);
  height: var(--segment-vertical-height);
  top: var(--segment-spacing);
  right: 0;
  border-radius: var(--border-radius);
}

.segment-c {
  width: var(--segment-vertical-width);
  height: var(--segment-vertical-height);
  bottom: var(--segment-spacing);
  right: 0;
  border-radius: var(--border-radius);
}

.segment-d {
  width: var(--segment-width);
  height: var(--segment-height);
  bottom: 0;
  left: calc((var(--digit-width) - var(--segment-width)) / 2);
  border-radius: var(--border-radius);
}

.segment-e {
  width: var(--segment-vertical-width);
  height: var(--segment-vertical-height);
  bottom: var(--segment-spacing);
  left: 0;
  border-radius: var(--border-radius);
}

.segment-f {
  width: var(--segment-vertical-width);
  height: var(--segment-vertical-height);
  top: var(--segment-spacing);
  left: 0;
  border-radius: var(--border-radius);
}

.segment-g {
  width: var(--segment-width);
  height: var(--segment-height);
  top: calc(var(--digit-height) / 2 - var(--segment-height) / 2);
  left: calc((var(--digit-width) - var(--segment-width)) / 2);
  border-radius: var(--border-radius);
}
</style>