<template>
  <div class="go-text-box">
    <n-grid :style="{ 'background-image': 'url(' + option.configOption.bgSrc + ')' }" class="go-n-grid" :x-gap="12" :y-gap="3"
      :cols="3" layout-shift-disabled>
      <n-grid-item>
        <!--        占位-->
        <div></div>
      </n-grid-item>
      <n-grid-item>
        <span style="position:relative"
          :style="{ top: option.configOption.y + 'px', marginLeft: option.configOption.x + 'px', color: option.configOption.textColor, fontSize: option.configOption.fontSize + 'px' }">{{
            option.configOption.dataset
          }}</span>
      </n-grid-item>
      <n-grid-item>
        <span style="position:relative" v-if="option.configOption.showRight"
          :style="{ top: option.configOption.yT + 'px', marginLeft: option.configOption.xT + 'px', color: option.configOption.textRightSizeColor, fontSize: option.configOption.textRightFontSize + 'px' }">{{
            newData
          }}</span>
      </n-grid-item>
    </n-grid>
  </div>
</template>
<script setup lang="ts">
import { PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { option as configOption } from './config'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const option = shallowReactive({
  configOption
})

let yearMonthDay = ref('2021-2-3')

let nowData = ref('08:00:00')

let newData = ref('2021-2-3 08:00:00')

let timer: any = null

//默认设置宽高距离位置
props.chartConfig.attr.w = 1920
props.chartConfig.attr.h = 148
props.chartConfig.attr.x = 0
props.chartConfig.attr.y = 0

watch(
  () => props.chartConfig.option,
  (newData: any) => {
    option.configOption = newData
  },
  {
    immediate: true,
    deep: false
  }
)

useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
  option.configOption = newData
})


//TODO待封装 这里和原作者时间通用获取当前时间代码一样
onMounted(() => {
  //格式化当前时间
  timer = setInterval(() => {
    const
      weeks = {
        "0": '星期日',
        "1": '星期一',
        "2": '星期二',
        "3": '星期三',
        "4": '星期四',
        "5": '星期五',
        "6": '星期六',
      } as any
    const datetime = new Date()
    const year = datetime.getFullYear()
    const month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
    const date = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate()
    const hh = datetime.getHours() // 时
    const mm = datetime.getMinutes() // 分
    const ss = datetime.getSeconds() // 分
    let weekIndex = datetime.getDay();
    let time = ''
    if (hh < 10) time += '0'
    time += hh + ':'
    if (mm < 10) time += '0'
    time += mm + ':'
    if (ss < 10) time += '0'
    time += ss
    yearMonthDay.value = `${year}-${month}-${date}`
    nowData.value = time
    newData.value = yearMonthDay.value + ' ' + nowData.value + ' ' + weeks[weekIndex]
  }, 500)
})
onUnmounted(() => {
  clearInterval(timer)
})

</script>

<style lang="scss" scoped>
@include go('text-box') {
  display: flex;
  align-items: center;
  justify-content: center;

  .n-gradient-text {
    white-space: initial;
  }
}

.light-green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.12);
}

.green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.24);
}

.go-n-grid {
  background: url(@/assets/external/headbackground/bg_top.png) center no-repeat;
  background-size: 100% 100%;
  text-align: center;
  font-size: 36px;
  line-height: 90px;
}
</style>