<template>
	<ChartCard margin="0 0 30rpx 0" title="四级风险数据">
		<view class="rish-ranking" @click="router.push('/pages/index/riskControl/index')">
			<qiun-data-charts type="pie" :opts="opts" :canvas2d="false" :chartData="chartData" />
		</view>
	</ChartCard>
</template>

<script setup>
import ChartCard from '@/components/chartCard.vue';
import { ref, watch } from 'vue';
import { onReady, onShow } from '@dcloudio/uni-app';
import {router} from '@/utils'
let props = defineProps({
	riskClassificationData: {
		type: Array,
		default: () => []
	}
});
const opts = ref({
	color: ['#EE6666', '#EF893B', '#EFCB3B', '#3B8CEF'],
	padding: [5, 5, 5, 5],
	enableScroll: false,
	fontSize: 9,
	legend: {
		lineHeight: 20,
		fontSize: 10,
		itemGap: 20
	},
	extra: {
		pie: {
			activeOpacity: 0.5,
			activeRadius: 10,
			offsetAngle: 0,
			labelWidth: 15,
			border: true,
			borderWidth: 3,
			borderColor: '#FFFFFF'
		}
	}
});

const chartData = ref({});

const handleTap = (e) => {
	console.log(e);
};
watch(
	() => props.riskClassificationData,
	(newVal) => {
		if (newVal && newVal.length) {
			// 只有当数据存在时才赋值
			let res = {
				series: [
					{
						data: newVal
					}
				]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}
	},
	{ deep: true, immediate: true }
);
</script>

<style lang="scss">
.rish-ranking {
	width: 100%;
	height: 480rpx;
}
</style>