<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>
import { drawRadarChart } from '@/common/memberInfo/bodyTestChart.js'

export default {
    options: {
        virtualHost: false,
        styleIsolation: 'apply-shared'
    },
    props: {
        labels: { type: Array, default: () => [] },
        values: { type: Array, default: () => [] },
        width: { type: Number, default: 280 },
        height: { type: Number, default: 240 }
    },
    data() {
        return {
            canvasId: `bt-radar-${Math.random().toString(36).slice(2, 9)}`
        }
    },
    watch: {
        values: {
            deep: true,
            handler() {
                this.renderChart()
            }
        }
    },
    mounted() {
        this.renderChart()
    },
    methods: {
        renderChart() {
            this.$nextTick(() => {
                const query = uni.createSelectorQuery().in(this)
                query
                    .select(`#${this.canvasId}`)
                    .fields({ node: true, size: true })
                    .exec((res) => {
                        const node = res?.[0]?.node
                        if (!node) return
                        const dpr = uni.getSystemInfoSync().pixelRatio || 1
                        drawRadarChart(node, {
                            width: this.width,
                            height: this.height,
                            labels: this.labels,
                            values: this.values,
                            dpr
                        })
                    })
            })
        }
    }
}
</script>

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

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