<!-- 压力表 -->
<template>
    <div class="pressure_block" v-if="sensorValueRef"
        :style="{ width: sensorSize * 0.75 + 'px', height: sensorSize * 0.75 + 'px' }">
        <div ref="chartRef" :style="{ width: sensorSize + 'px', height: sensorSize + 'px' }" class="pressure_chart">
        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeUnmount, watch, toRef ,computed} from 'vue'
import * as echarts from 'echarts'
//图表

const chartRef = ref(null)
let myChart = null
onBeforeUnmount(() => {
    if (myChart) {
        window.removeEventListener('resize', myChart.resize)
        myChart.dispose()
    }
})

const props = defineProps({
    sensorValue: {
        type: Array,
        default: () => [0.5], // 默认一个压力值
    },
    sensorSize: {
        type: Number,
        default: 200,
    },

})
const pressureValue = computed(() => {
  const val = props.sensorValue?.[0]
  return typeof val === 'number' && !isNaN(val) ? val : 0
})

function initChart() {
    if (chartRef.value) {
        if (myChart) {
            myChart.dispose()
        }
        myChart = echarts.init(chartRef.value, null, {
            renderer: 'svg'
        });
        myChart.setOption(option.value);
        window.addEventListener('resize', myChart.resize);
    }
}

watch(
    () => props.sensorSize,
    (val) => {
        if (val && val > 0) {
            nextTick(() => {
                initChart();
            });
        }
    },
    { immediate: true } // 立即执行一次
);
//图表配置项
const option = ref({
    series: [
        {
            max: 1,// 最大值
            type: 'gauge',
            startAngle: 200,
            endAngle: -20,
            axisLine: {//仪表盘刻度
                lineStyle: {
                    width: props.sensorSize * 0.1,
                    color: [
                        [0.4, '#4CAF50'],//绿色：正常
                        [0.7, '#fb8a1c'],//橙色：警告
                        [1, '#F44336']//红色：危险
                    ],
                }
            },
            pointer: {
                itemStyle: {
                    color: 'auto'
                }
            },
            axisTick: {//细刻度
                distance: -(props.sensorSize * 0.1),
                length: 8,
                lineStyle: {
                    color: '#fff',
                    width: 2
                }
            },
            splitLine: {//粗刻度
                distance: -(props.sensorSize * 0.1),
                length: (props.sensorSize * 0.1) + 5,
                lineStyle: {
                    color: '#fff',
                    width: 4
                }
            },
            axisLabel: {
                show: false,//不显示
                color: 'inherit',
                distance: (props.sensorSize * 0.1) + 5,
                fontSize: 8,// 刻度字体大小 
            },
            detail: {// 数值显示
                valueAnimation: true,// 数值变化动画
                // formatter: '{value} Mpa',
                formatter: function (value) {
                    return '{value|' + value.toFixed(3) + '}{unit|MPa}';
                },
                rich: {
                    value: {
                        fontSize: props.sensorSize * 0.12,
                        fontWeight: 'bolder',
                        color: 'inherit',
                        padding: [0, 0, -10, 0]
                    },
                    unit: {
                        fontSize: props.sensorSize * 0.08,
                        color: 'inherit',
                        padding: [0, 0, -10, 4]
                    }
                },
                // color: 'inherit',
                // fontSize: props.sensorSize * 0.1,// 数值字体大小
                offsetCenter: [0, '45%'],
                // backgroundColor: '#999',
                // width: '100%',
            },
            data: [
                {
                    value: pressureValue.value.toFixed(3),
                }
            ],
        }
    ]
})

// 取出 sensorValue 的响应式引用
const sensorValueRef = toRef(props, 'sensorValue')

// 正确 watch 用法
// watch(sensorValueRef, (newVal) => {
//     if (myChart && typeof newVal === 'number' && newVal >= 0) {
//         myChart.setOption({
//             series: [
//                 {
//                     type: 'gauge',
//                     data: [{ name: '', value: newVal.toFixed(3) }]
//                 }
//             ]
//         })
//     }
// })
watch(pressureValue, (newVal) => {
  if (myChart && typeof newVal === 'number' && newVal >= 0) {
    myChart.setOption({
      series: [
        {
          type: 'gauge',
          data: [{ name: '', value: newVal.toFixed(3) }]
        }
      ]
    })
  }
})

</script>

<style scoped lang="scss">
.pressure_block {
    background-color: #e4e4e4;
    position: absolute;
    top: 52%;
    left: 31%;
    z-index: 10;
    border-radius: 50%;

    .pressure_chart {
        position: absolute;
        top: -16%;
        left: -16%;
    }
}
</style>