<template>
	<div class="box_main">
		<div class="ps_box3_title">
			<div @click="ps_box3Click(index)" v-for="(item,index) in ps_box3ListData" :key="index"
				:class="['ps_box3_title_item', ps_box3ActiveIndex == index?'ps_box3_title_item_active':'' ]">
				{{item}}
			</div>
		</div>
		<div id="W_psbox3_Pie"></div>
	</div>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		computed,
		nextTick
	} from "vue";
	import * as echarts from "echarts";
	import Highcharts from 'highcharts';
	export default {
		setup() {
			const AllData = reactive({
				ps_box3ListData: ['普查情况', '排水能力'],
				ps_box3ActiveIndex: 0,
				ps_box3PieData: [
					['已建管网', 60.6],
					['规划管网', 83.5],
					['新建/改造管网', 60.5]
				],
			})
			const ps_box3Click = (index) => {
				AllData.ps_box3ActiveIndex = index;
				if (AllData.ps_box3ActiveIndex == 0) {
					AllData.ps_box3PieData = [
						['已建管网', 60.6],
						['规划管网', 83.5],
						['新建/改造管网', 60.5]
					]
					ps_box3Pie();
				} else {
					AllData.ps_box3PieData = [
						['‹D500', 40.6],
						['D500-D800', 100.5],
						['›D800', 25.5]
					]
					ps_box3Pie();
				}
			}
			const ps_box3Pie = () => {
				var option;
				option = {
					colors: ['rgb(76,230,228)', 'rgb(255,245,41)', 'rgb(248,131,0)'],
					credits: {
						enabled: false
					},
					title: {
						text: '',
						margin: 0
					},
					tooltip: {
						formatter: function() {
							var s = '' + this.point.name.slice(0,-4) + '</b>'
							s += '<br/>' + this.point.y + 'km'
							s += '<br/>' + this.percentage.toFixed(0) + '%'
							return s
						},
						animation: true, // 是否启用动画效果
						style: {
							fontSize: '12px',
							fontFamily: 'Alibaba PuHuiTi'
						}
					},
					chart: {
						type: 'pie',
						backgroundColor: "none",
						margin: [0, 20, 20, 0],
						options3d: {
							enabled: true, //使用3d功能
							alpha: 60, //延y轴向内的倾斜角度
							beta: 0,
						}
					},
					legend: {
						enabled: true,
						layout: 'vertical',
						align: 'right',
						verticalAlign: "bottom",
						symbolRadius: 0,
						itemMarginTop: 20,
						itemStyle: {
							color: "#f4f4f6",
							fontSize: 14,
						},
						itemHoverStyle: {
							color: "#f4f4f6",
							fontSize: 14,
						},
						// labelFormat:"{name}"+"km",
					},
					plotOptions: {
						pie: {
							allowPointSelect: true, //每个扇块能否选中
							cursor: 'pointer', //鼠标指针
							depth: 30, //饼图的厚度
							dataLabels: {
								enabled: true, //是否显示饼图的线形tip
								format: '{point.name}' + '{point.percentage:.1f}%',
								style: {
									color: 'white'
								}
							},
							showInLegend: true,
						}
					},
					series: [{
						type: 'pie',
						data: AllData.ps_box3PieData
					}]

				}
				Highcharts.chart(document.getElementById('W_psbox3_Pie'), option)
			}
			onMounted(() => {
				ps_box3Pie()
			});
			return {
				...toRefs(AllData),
				ps_box3Pie,
				ps_box3Click
			};
		},
		computed: {},
		methods: {},
	};
</script>

<style lang="less" scoped>
	#W_psbox3_Pie {
		width: 455px;
		height: 180px;
	}

	.ps_box3_title {
		height: 50px;
		width: 40%;
		margin-left: 15%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		font-size: 14px;


		.ps_box3_title_item {
			width: 40%;
			color: #42778F;
			cursor: pointer;
		}

		.ps_box3_title_item_active {
			width: 40%;
			color: #0CC1BE;
			background: url("/src/assets/imgs/active_line.png") no-repeat;
			background-size: 100% 2px;
			background-position: center bottom;
			cursor: pointer;
		}
	}
</style>