<template>
  <p style="white-space: nowrap">时区：{{ curTime }}</p>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import { useShopInfo } from '/@/stores/shopInfo'
import dayjs, { Dayjs } from 'dayjs'

const shopInfo = useShopInfo()

let timer: NodeJS.Timeout
let curTime = ref('')

function getTime():string {
  let now: Dayjs = dayjs(new Date())
  if(shopInfo.profile.time_zone) {
    now = now.tz(shopInfo.profile.time_zone)
  }
  return now.format("YYYY-MM-DD HH:mm")
}

watch(
  () => shopInfo.profile.time_zone,
  () => {
    console.log("当前店铺：", shopInfo.profile)
    curTime.value = getTime()
  }
)

onMounted(() => {
  curTime.value = getTime()
  timer = setInterval(() => {
    curTime.value = getTime()
  }, 1000 * 60)
})

onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer)
  }
})

</script>
