<template>
  <div
    class="footer-info flex items-center"
    :style="{
      height: height + 'px',
      backgroundColor: bgColor,
      borderColor: bgColor !== '#fff' ? 'transparent' : '#e5e5e5',
    }"
  >
    <div class="grid1 h-full">
      <FundProjectionScreenOutlined class="icon" />
      <span class="txt">{{ hostname }}</span>
    </div>
    <div class="grid2 h-full">
      <ClockCircleOutlined class="icon" />
      <span class="txt">{{ timeStr }}</span>
    </div>
    <div class="grid3 h-full">
      <InfoCircleOutlined class="icon" />
      <span class="txt">v2.0.0</span>
    </div>
  </div>
</template>
<script name="FooterInfo" lang="ts" setup>
import { onMounted, onUnmounted, ref } from "vue";
import { useAppStore } from "@/store";
import { dateFormat } from "@/utils/tool";
import TimeInterval from "@/utils/time.worker?worker";
import {
  ClockCircleOutlined,
  FundProjectionScreenOutlined,
  InfoCircleOutlined,
} from "@ant-design/icons-vue";

const props = withDefaults(
  defineProps<{
    height?: number;
    bgColor?: string;
  }>(),
  {
    height: 42,
    bgColor: "#fff",
  }
);
const appStore = useAppStore();

const timeStr = ref("");
const renderTimeStr = () => {
  timeStr.value = dateFormat(
    Date.now() + (Number(appStore.timeDiff) || 0),
    "yyyy-MM-dd HH:mm:ss"
  );
};

const timeInterval = new TimeInterval();
timeInterval.onmessage = (e: any) => {
  if (e.data === "") {
    renderTimeStr();
  }
};

const hostname = ref("");
onMounted(() => {
  hostname.value = window.electronApi?.getComputerName?.();
  timeInterval.postMessage(true);
});
onUnmounted(() => {
  timeInterval.postMessage(false);
});
</script>
<style lang="less" scoped>
.footer-info {
  border-top: 1px solid #e5e5e5;
  padding: 11px 0;
  .txt {
    font-size: 14px;
    margin-left: 4px;
  }
  & > div {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .icon {
    color: @text-color3;
    font-size: 16px;
  }
  .grid2 {
    min-width: 200px;
    flex: 1;
  }
  .grid1 {
    flex: 1;
    border-right: 1px solid #d9d9d9;
  }
  .grid3 {
    flex: 1;
    border-left: 1px solid #d9d9d9;
  }
}
</style>
