﻿<template>
    <view class="bt-radar">
        <canvas
            :id="canvasId"
            :canvas-id="canvasId"
            type="2d"
            class="bt-radar__canvas"
            :style="{ width: width + 'px', height: height + 'px' }"
        />
    </view>
</template>

<script setup>
import { ref, watch, onMounted, nextTick } from 'vue'
import { drawRadarChart } from '@/common/memberInfo/bodyTestChart.js'

const props = defineProps({
    labels: { type: Array, default: () => [] },
    values: { type: Array, default: () => [] },
    width: { type: Number, default: 280 },
    height: { type: Number, default: 240 }
})

const canvasId = ref(`bt-radar-${Math.random().toString(36).slice(2, 9)}`)

function renderChart() {
    nextTick(() => {
        const query = uni.createSelectorQuery().in(getCurrentInstance())
        query
            .select(`#${canvasId.value}`)
            .fields({ node: true, size: true })
            .exec((res) => {
                const node = res?.[0]?.node
                if (!node) return
                const dpr = uni.getSystemInfoSync().pixelRatio || 1
                drawRadarChart(node, {
                    width: props.width,
                    height: props.height,
                    labels: props.labels,
                    values: props.values,
                    dpr
                })
            })
    })
}

watch(() => props.values, () => {
    renderChart()
}, { deep: true })

onMounted(() => {
    renderChart()
})
</script>

<style lang="scss">
.bt-radar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.bt-radar__canvas {
    display: block;
}
</style>
