<template>
	<view class="data_display">
		<view class="top">
			<view>{{ props.data.title }}</view>
			<img src="" alt="" />
		</view>
		<view class="bottom">
			<view class="left">
				<view class="left_num">{{ props.data.current_month }}</view>
				<view class="left_compare">
					<view :class="props.data.status ? 'left_compare_green' : 'left_compare_red'">
						<img :src="props.data.status ? '/src/assets/icons/shang.png' : '/src/assets/icons/xia.png'" alt="" />
						<view>{{ props.data.percentage }}</view>
					</view>
					<view>&nbsp;vs上月</view>
				</view>
			</view>
			<view ref="rightChart" class="right"></view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, onUnmounted, ref } from 'vue';
	import * as echarts from 'echarts';
	const props = defineProps({
	  data: { type: Object, default: {} },
	});
	
	const chart = ref(null);
	const rightChart = ref(null);
	const chartOption = ref({
		series: [
			{
				name: 'pie',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				data: [
					{ value: 800, name: 'Search Engine' },
					{ value: 200, name: 'Direct' }
				],
				color: ['#165DFF', '#ccc'] // 直接在这里指定颜色
			}
		]
	});
	
	const initChart = () => {
		if (props.data.title == '参考人数') {
			chart.value = echarts.init(rightChart.value, 'macarons');
			chart.value.setOption(chartOption.value);
		} else if (props.data.title == '平均成绩') {
			chartOption.value.series[0].color = ['#00CED1', '#ccc'];
			chart.value = echarts.init(rightChart.value, 'macarons');
			chart.value.setOption(chartOption.value);
		} else if (props.data.title == '合格率') {
			chartOption.value.series[0].color = ['#00B42A', '#ccc'];
			chart.value = echarts.init(rightChart.value, 'macarons');
			chart.value.setOption(chartOption.value);
		} else {
			chartOption.value.series[0].color = ['#FF7D00', '#ccc'];
			chart.value = echarts.init(rightChart.value, 'macarons');
			chart.value.setOption(chartOption.value);
		}
	};
	
	onMounted(() => {
	  initChart();
	  window.addEventListener('resize', () => {
	    chart.value.resize();
	  });
	});
	
	onUnmounted(() => {
	  if (!chart.value) {
	    return;
	  }
	  chart.value.dispose();
	  chart.value = null;
	});
</script>

<style lang="scss" scoped>
	.data_display {
		background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
		margin-right: 10px;
		color: #fff;
		flex: 1;
		&:nth-child(1) {
			margin-left: 10px;
		}
		.top {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			z-index: 1;
			align-content: flex-start;
			background: url(/src/assets/images/titlebg-4340cf1c.png);
			background-size: 100% 100%;
			font-weight: 400;
			font-size: 14px;
			color: #fbffff;
			padding: 8px 20px;
			margin-bottom: 8px;
		}
		.bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px;
			.left {
				display: flex;
				flex-direction: column;
				margin-left: 40px;
				.left_num {
					font-size: 18px;
					font-weight: 800;
				}
				.left_compare {
					margin-top: 10px;
					.left_compare_green {
						color: greenyellow;
					}
					.left_compare_red {
						color: orangered;
					}
					img {
						width: 15px;
						height: 15px;
						padding-top: 2px;
					}
				}
			}
			.right {
				width: 100px;
				height: 100px;
				margin-right: 20px;
			}
		}
	}
</style>