<template>
	<view class="charts-box">
		<qiun-data-charts type="radar" :opts="opts" :chartData="chartData" :canvas2d="true"
      :canvasId="canId" />
	</view>

</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	export default {
		props: {ModuleList:[]},
		setup(props) {
			let data = reactive({
				chartData: {},
				
				opts: {
					color: ["#FFF","#E53F4E", "#282828"],
					padding: [0, 0, 0, 0],
					dataLabel: false,
					dataPointShape: false,
					legend: {
						show: true,
						position: "top",
						lineHeight: 25,
						fontColor:"#282828",
						itemGap:30
					},
					extra: {
						radar: {
							gridType: "radar",
							gridCount: 3,
							opacity: 0.8,
							max: 100,
							min: -5,
							gridColor:"#fcebed",
							labelColor:'#CE8086',
						}
					}
				},
			})
			let methods = {
				randomCoding(){
				    var arr = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
				    var idvalue ='';
				    let n = 8;
					for(let i=0; i<n; i++){
						idvalue+=arr[Math.floor(Math.random()*26)];
					}
				    return idvalue;
				},
				getServerData() {
					//模拟从服务器获取数据时的延时
					setTimeout(() => {
						//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
						let cate = [];//模块名称
						let grRate =[];//个人得分率
						let avgRate =[];//平均得分率
						let sumRate=[]
						props.ModuleList && props.ModuleList.forEach(item=>{
							if(item.ScoreRate==0) return;
							if(item.Module.length>6){
								cate.push(item.Module.substring(0,6)+'...');
							}else{
								cate.push(item.Module);
							}
							
							grRate.push((item.ScoreRate * 100).toFixed(0));
							avgRate.push((item.AvgScoreRate * 100).toFixed(0));
							sumRate.push(100)
						});
						props.ModuleList && props.ModuleList.forEach(item=>{
							if(item.ScoreRate>0) return;
							if(item.Module.length>6){
								cate.push(item.Module.substring(0,6)+'...');
							}else{
								cate.push(item.Module);
							}
							
							grRate.push((item.ScoreRate * 100).toFixed(0));
							avgRate.push((item.AvgScoreRate * 100).toFixed(0));
							sumRate.push(100)
						});
						let res = {
							categories: cate,
							series: [
								{
									name: "",
									legendShape:'none',
									data: sumRate
								},
								{
									name: "平均得分率",
									data: avgRate
								},
								{
									name: "个人得分率",
									data: grRate
								},
								
							]
						};
						data.chartData = JSON.parse(JSON.stringify(res));
					}, 500);
				}
			}
			data.canId=methods.randomCoding()
			onMounted(()=>{
				methods.getServerData()
			})
			return {
				...toRefs(data),
				...methods
			};
		},
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 555rpx;
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653555146000_297.png');
		    background-position: 0px 0rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
</style>
