<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": '星期六',
        }
    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/images/chart/headbackground/bg_top.png) center no-repeat;
  background-size: 100% 100%;
  text-align: center;
  font-size: 36px;
  line-height: 90px;
}
</style>