<!--
 * @Author: ZhengYi
 * @Date: 2023-04-26 
 * @LastEditors: ZhengYi
 * @LastEditTime: 2023-04-26 
 * @Description: file content
-->
<template>
    <jsv-focus-block autoFocus :onAction="actionDefines">
        <div :style="{
            textAlign: 'center',
            fontSize: 30,
            lineHeight: 50,
            color: '#ffffff',
            left: 100,
            top: 20,
            width: 1280 - 200,
            height: 50,
            backgroundColor: 'rgba(27,38,151,0.8)',
        }">按左键各个方向随机减少，按右键各个方向随机增加</div>
        <JsvRadarChart :data="data" :backgroundUrl="bgImageUrl" :foregroundUrl="resultSquare" :style="style"
            :fontSize="fontSize" :extendOffset="70" :fontColor="'#ff3212'" :radius="200" />
        <JsvRadarChart :data="data2" :backgroundUrl="bgImageUrl" :foregroundUrl="resultSquare" :style="style2"
            :fontSize="fontSize" :extendOffset="50" :fontColor="'#FFF231'" :radius="200" />
    </jsv-focus-block>
</template>
  
<script setup>
import { JsvRadarChart } from "jsview";
import resultSquare from "./assets/resultSquare.png"
import bgImageUrl from "./assets/Square.png"
import { ref } from 'vue';
const data = ref([
    { title: '语文', value: 70 },
    { title: '数学', value: 98 },
    { title: '英语', value: 40 },
    { title: '化学', value: 80 },
    { title: '生物', value: 92 },
    { title: '物理', value: 88 },
])
const data2 = ref([
    { title: '语文', value: 30 },
    { title: '数学', value: 40 },
    { title: '英语', value: 50 },
    { title: '化学', value: 40 },
    { title: '生物', value: 44 },
])

const style = {
    top: 400,
    left: 300
}
const style2 = {
    top: 400,
    left: 950
}
const fontSize = 30;

const onKeyDown = (ev) => {
    if (ev.keyCode == 39) {
        console.log('测试用：按下了右键');
        data.value.forEach((item, index) => {
            item.value += Math.random() * 10
            if (item.value >= 100) {
                item.value = 100
            }
        })
        data2.value.forEach((item, index) => {
            item.value += Math.random() * 10
            if (item.value >= 100) {
                item.value = 100
            }
        })
    } else if (ev.keyCode == 37) {
        console.log('测试用：按下了左键');
        data.value.forEach((item, index) => {
            item.value -= Math.random() * 10
            if (item.value <= 10) {
                item.value = 8
            }
        })
        data2.value.forEach((item, index) => {
            item.value -= Math.random() * 10
            if (item.value <= 10) {
                item.value = 8
            }
        })
    }
}
const actionDefines = {
    onKeyDown
}

</script>
  
<style scoped></style>