<template>
  <div class="go-text-box">
    <n-grid
      :style="{ 'background-image': 'url(' + option.configOption.bgSrc + ')', height: h + 'px' }"
      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
const { w, h } = toRefs(props.chartConfig.attr)

//修改默认宽高
props.chartConfig.attr.w = 1920
props.chartConfig.attr.h = 100

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') {
  width: v-bind('w+"px"');
  height: v-bind('h+"px"');
  display: flex;
  align-items: start;
  justify-content: start;
  .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/headerBg08.png) center no-repeat;
  background-size: 100% 100%;
  text-align: center;
  font-size: 36px;
  line-height: 90px;
}
</style>