<template>
  <n-progress
    :type="type"
    :height="h"
    :processing="processing"
    :percentage="percentage"
    :indicator-placement="indicatorPlacement"
    :color="color"
    :rail-color="railColor"
    :offset-degree="offsetDegree"
  >
    <n-text
      :style="{
        color: indicatorTextColor,
        fontSize: `${indicatorTextSize}px`
      }"
    >
      {{ dataset }} {{ unit }}
    </n-text>
  </n-progress>
</template>

<script setup lang="ts">
import { PropType, computed, ref, toRefs, watch } from 'vue'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import config from './config'
import { toNumber } from '@/utils'
import { unref } from 'vue'

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

// 取配置数据
const { w, h } = toRefs(props.chartConfig.attr)
const {
  type,
  unit,
  color,
  processing,
  railColor,
  indicatorTextColor,
  indicatorPlacement,
  indicatorTextSize,
  offsetDegree,
  dataset,
} = toRefs(props.chartConfig.option)

const max = computed(()=>{//获取最新的最大值
  const {value:{max}} = props.chartConfig.option
  return max
})
const percentage = ref<number>(unref(dataset) * (100/max.value))//计算当设置的最大值大于100的时候
// 手动更新
watch(
  () => {props.chartConfig.option.dataset,props.chartConfig.option.value.max},
  () => {
    try {
      if(max.value!==100){
        const newValue = unref(dataset) * (100/max.value)//计算进度条的位置
        percentage.value = toNumber(newValue,2)
      dataset.value = toNumber((unref(dataset)), 2)
        return
      }
      percentage.value = toNumber(unref(dataset), 2)
      dataset.value = toNumber((unref(dataset)), 2)
    } catch (error) {
      console.log(error)
    }
  },
  {
    deep: true
  }
)
// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
  percentage.value = toNumber(newData*(100/max.value), 2)
  dataset.value = toNumber(newData, 2)
})
</script>