<script setup>
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios';
import Btitle from './title.vue'
import Loading from './loading.vue'
import * as echarts from 'echarts';

const showLoading = ref(true)
const bigData = reactive({
	leiji: 0,
	bukeshigong: 0,
	keshigong: 0,
	lijiu: 0,
	xinjian: 0,
	wudianyuan: 0,
	wutuzhi: 0,
	youhua: 0,
	weiyouhua: 0,
	leijiArr: [0, 0, 0, 0, 0, 0, 0]
})

const ballData = reactive({
	yicaiji: 0,
	weicaiji: 0
})

const shigongjinduData = reactive({
	yiwancheng: 0,
	luyou: 0,
	weikaishi: 0,
	bujvbei: 0
})

const _getData = async () => {
	showLoading.value = true
	await axios({
		method: 'post',
		data: { 'danwei': '全部' },
		url: 'http://www.harbinxiaoshi.cn:8000/x_program_center/jaxrs/invoke/takanhuizong/execute'
	}).then(({ data }) => {
		const res = data.data.value
		console.log(data)
		bigData.leijiArr = res.leiji
		bigData.leiji = res.leiji[6]
		bigData.bukeshigong = res.bukeshigong[6]
		bigData.keshigong = res.keshigong[6]
		bigData.lijiu = res.lijiu[6]
		bigData.xinjian = res.xinjian[6]
		bigData.wudianyuan = res.wudianyuan[6]
		bigData.wutuzhi = res.wutuzhi[6]
	});

	axios({
		method: 'post',
		data: { danwei: '全部' },
		url: 'http://www.harbinxiaoshi.cn:8000/x_program_center/jaxrs/invoke/huoqudianwei/execute'
	}).then(function ({ data }) {

		showLoading.value = false
		const arr = data.data.value

		let [y, w] = [0, 0]
		arr.forEach(element => {
			if (element.youhuatuzhi != '') {
				y++
			} else {
				w++
			}

			if (element.ercitakans == '') {
				ballData.weicaiji++
			} else {
				ballData.yicaiji++
			}

			if (element.process_main == "已完成") {
				shigongjinduData.yiwancheng++
			} else if (element.process_main == "路由已通") {
				shigongjinduData.luyou++
			} else if (element.process_main == "未开始") {
				shigongjinduData.weikaishi++
			} else if (element.process_main == "不具备条件") {
				shigongjinduData.bujvbei++
			}
		});

		fnRenderPie(y, w)
	});
}


onMounted(() => {
	_getData()
})

const fnRenderBar = () => {
	const barChart = echarts.init(document.getElementById('bar'));

	const option = {
		grid: {
			bottom: "16%"
		},
		tooltip: {},
		legend: {
			top: '5%',
			left: 'center',
			textStyle: {
				color: '#fff'
			},
			data: ['计划施工点位', '实际施工点位', '未完成计划点位', '施工总人数', '阻工点位']
		},
		xAxis: {
			type: 'category',
			axisLine: {
				lineStyle: {
					color: "#fff",
				}
			},
			data: ['三分公司', '二分公司', '环保新能源分公司', '松北子公司']
		},
		yAxis: {
			type: 'category',
			axisLine: {
				lineStyle: {
					color: "#fff",
				}
			}
		},
		series: [
			{
				name: '计划施工点位',
				type: 'bar',
				data: [25, 25, 25, 25]
			},
			{
				name: '实际施工点位',
				type: 'bar',
				data: [0, 0, 0, 0]
			},
			{
				name: '未完成计划点位',
				type: 'bar',
				data: [25, 25, 25, 25]
			},
			{
				name: '施工总人数',
				type: 'bar',
				data: [154, 312, 38, 117]
			},
			{
				name: '阻工点位',
				type: 'bar',
				data: [0, 0, 0, 0]
			}
		]
	};

	barChart.setOption(option)
}

const fnRenderPie = (y, w) => {
	const pieChart = echarts.init(document.getElementById('pie'));
	const option = {
		tooltip: {
			trigger: 'item'
		},
		legend: {
			top: '5%',
			left: 'center',
			textStyle: {
				color: '#fff'
			}
		},
		series: [
			{
				name: '优化点位',
				type: 'pie',
				radius: ['30%', '60%'],
				itemStyle: {
					borderRadius: 20,
					normal: {
						color: function (colors) {
							var colorList = [
								'#73c0de',
								'#fac858'
							];
							return colorList[colors.dataIndex];
						}
					}
				},
				label: {
					show: true,
					color: '#fff',
					borderWidth: 0
				},
				emphasis: {
					label: {
						fontSize: 12,
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: [
					{ value: y, name: '优化' },
					{ value: w, name: '未优化' }
				]
			}
		]
	};

	pieChart.setOption(option)
}
</script>

<template>
	<div class="mask" v-show="showLoading">
		<Loading></Loading>
	</div>
	<div class="parent">
		<div class="div1 bg_color">
			<div class="numbers_wrap">
				<Btitle name="数据统计"></Btitle>
				<div class="numbers_content">
					<div class="f1 flex">
						<div class="color_box">
							<div class="color_box__title">
								<span>累计点位</span>
							</div>
							<div class="color_box__content">
								<span>
									{{ bigData.leiji }}
								</span>
							</div>
						</div>
						<div class="color_box">
							<div class="color_box__title">
								<span>不具施工条件</span>
							</div>
							<div class="color_box__content">
								<span>
									{{ bigData.bukeshigong }}
								</span>
							</div>
						</div>
					</div>
					<div class="f2 flex">
						<div class="color_box">
							<div class="color_box__title">
								<span>可施工</span>
							</div>
							<div class="color_box__content">
								<span>
									{{ bigData.keshigong }}
								</span>
							</div>
						</div>
						<div class="color_box">
							<div class="color_box__title">
								<span>利旧</span>
							</div>
							<div class="color_box__content">
								<span>
									{{ bigData.lijiu }}
								</span>
							</div>
						</div>
						<div class="color_box">
							<div class="color_box__title">
								<span>新建</span>
							</div>
							<div class="color_box__content">
								<span>
									{{ bigData.xinjian }}
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="ball_wrap">
				<Btitle name="踏勘点位"></Btitle>
				<div class="ball_content">
					<div class="ball ball_1 animate__animated animate__rubberBand">
						<p class="color_font">{{ ballData.yicaiji }}</p>
						<p>已采集</p>
					</div>
					<div class="ball ball_2 animate__animated animate__rubberBand">
						<p class="color_font">{{ ballData.weicaiji == 0 ? 0 : ballData.weicaiji - 20 }}</p>
						<p>未采集</p>
					</div>
					<div class="ball ball_3 animate__animated animate__rubberBand">
						<p class="color_font">{{ bigData.wudianyuan }}</p>
						<p>无电源</p>
					</div>
					<div class="ball ball_4 animate__animated animate__rubberBand">
						<p class="color_font">{{ bigData.wutuzhi }}</p>
						<p>图纸不符</p>
					</div>
				</div>
			</div>
			<div class="table1_wrap">
				<Btitle name="施工进度"></Btitle>
				<div class="table1_content">
					<table class="table1">
						<thead>
							<tr>
								<th>序号</th>
								<th>完成情况</th>
								<th>数量</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>已完成</td>
								<td>{{ shigongjinduData.yiwancheng }}</td>
							</tr>
							<tr>
								<td>2</td>
								<td>路由已通</td>
								<td>{{ shigongjinduData.luyou }}</td>
							</tr>
							<tr>
								<td>3</td>
								<td>未开始</td>
								<td>{{ shigongjinduData.weikaishi }}</td>
							</tr>
							<tr>
								<td>4</td>
								<td>不具备条件</td>
								<td>{{ shigongjinduData.bujvbei }}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<!-- <div class="div2">
			<div class="map_wrap">
				<iframe src="http://www.harbinxiaoshi.cn:8000/003/index_copy.html" class="map"></iframe>
			</div>
			<div class="bottom bg_color">
				<div class="bar_wrap">
					<Btitle name="施工进度统计"></Btitle>
					<div id="bar" class="bar_chart">

					</div>
				</div>
			</div>
		</div> -->
		<div class="div3 bg_color">
			<div class="pie_wrap">
				<Btitle name="优化点位"></Btitle>
				<div id="pie" class="pie_chart">

				</div>
			</div>
			<div class="bar_wrap">
				<Btitle name="踏勘点位"></Btitle>
				<div class="table1_content">
					<table class="table1">
						<thead>
							<tr>
								<th>分公司</th>
								<th>行政区域</th>
								<th>累计点位</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>三分公司</td>
								<td>南岗区</td>
								<td>{{ bigData.leijiArr[0] }}</td>
							</tr>
							<tr>
								<td>二分公司</td>
								<td>道外区</td>
								<td>{{ bigData.leijiArr[1] }}</td>
							</tr>
							<tr>
								<td>新能源环保公司</td>
								<td>平房区</td>
								<td>{{ bigData.leijiArr[2] }}</td>
							</tr>
							<tr>
								<td>新能源环保公司</td>
								<td>香坊区</td>
								<td>{{ bigData.leijiArr[3] }}</td>
							</tr>
							<tr>
								<td>松北子公司</td>
								<td>道里区</td>
								<td>{{ bigData.leijiArr[4] }}</td>
							</tr>
							<tr>
								<td>松北子公司</td>
								<td>松北区</td>
								<td>{{ bigData.leijiArr[5] }}</td>
							</tr>
							<tr>
								<td>共计</td>
								<td>-</td>
								<td>{{ bigData.leijiArr[6] }}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
$radius-size: 8px;

.mask {
	display: flex;

	justify-content: center;
	align-items: center;

	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba($color: #000, $alpha: .9);
	z-index: 100;

	.landing-icon {
		width: 80px;
		height: 80px;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
}

.parent {
	width: 100%;
	display: grid;
	grid-template-columns: 4fr 4fr;
	grid-template-rows: 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 0px;
}

.bg_color {
	border-radius: $radius-size;
	background: rgba(7, 27, 96, 0.5);
	position: relative;
	border: 1px solid #092B67;

	&::before {
		content: "";
		display: block;
		width: 12px;
		height: 12px;
		border-radius: 0 0 0 $radius-size;

		border-left: 1px solid rgba(0, 255, 255, 1);
		border-bottom: 1px solid rgba(0, 255, 255, 1);
		position: absolute;
		left: 0;
		bottom: 0;
	}

	&::after {
		content: "";
		display: block;
		width: 12px;
		height: 12px;
		border-radius: 0 0 $radius-size 0;

		border-right: 1px solid rgba(0, 255, 255, 1);
		border-bottom: 1px solid rgba(0, 255, 255, 1);
		position: absolute;
		right: 0;
		bottom: 0;
	}
}

.div1 {
	grid-area: 1 / 1 / 2 / 2;

	.numbers_wrap {
		padding-top: 16px;

		.numbers_content {
			padding: 10px;

			.color_box {
				flex: 1;
				background: rgba(14, 109, 233, 0.2);
				border: 1px solid #0E50A5;
				border-radius: 4px;

				padding: 5px 14px;

				.color_box__title {
					font-size: 16px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 25px;
				}

				.color_box__content {
					font-family: Verdana, Geneva, Tahoma, sans-serif;
					text-align: right;
					font-size: 20px;
					letter-spacing: .6em;
					color: rgba(15, 165, 235, 1);
				}
			}

			.f1 {
				justify-content: space-between;
				margin-bottom: 15px;

				.color_box:first-child {
					margin-right: 15px;
				}
			}

			.f2 {
				.color_box {
					margin-right: 15px;

					&:last-child {
						margin-right: 0;
					}

					.color_box__title {
						text-align: center;
					}
				}
			}
		}
	}

	.ball_content {
		height: 26vh;
		position: relative;
		color: #fff;

		.ball {
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;

			font-size: 14px;
		}

		.color_font {
			margin-bottom: 6px;
		}

		.ball_1 {
			width: 130px;
			height: 130px;
			background-image: url(../assets/images/ball1.png);

			.color_font {
				font-size: 26px;
				font-weight: bold;
				color: #00FFF6;
				line-height: 22px;
			}
		}

		.ball_2 {
			left: 35%;
			top: 2%;

			width: 157px;
			height: 157px;
			background-image: url(../assets/images/ball2.png);

			.color_font {
				font-size: 29px;
				font-weight: bold;
				color: #F8FF94;
				line-height: 24px;
			}
		}

		.ball_3 {
			left: 14%;
			top: 48%;

			width: 140px;
			height: 140px;
			background-image: url(../assets/images/ball3.png);

			.color_font {
				font-size: 29px;
				font-weight: bold;
				color: #A667FB;
				line-height: 24px;
			}
		}

		.ball_4 {
			left: 64%;
			top: 42%;

			width: 143px;
			height: 143px;
			background-image: url(../assets/images/ball4.png);

			.color_font {
				font-size: 29px;
				font-weight: bold;
				color: #FFD29C;
				line-height: 24px;
			}
		}

		.ball {
			background-size: contain;
			position: absolute;
		}
	}
}

// .div2 {
// 	grid-area: 1 / 2 / 2 / 3;

// 	display: flex;
// 	flex-direction: column;

// 	.map_wrap {
// 		flex: 3;
// 		padding-bottom: 10px;

// 		display: flex;

// 		.map {
// 			width: 100%;
// 			overflow: hidden;
// 		}
// 	}

// 	.bottom {
// 		flex: 1;

// 		.bar_wrap {
// 			height: 205px;

// 			display: flex;
// 			flex-direction: column;

// 			.bar_chart {
// 				flex: 1;
// 			}
// 		}
// 	}
// }

.div3 {
	grid-area: 1 / 2 / 2 / 3;

	.pie_wrap {
		height: 270px;
		padding-top: 16px;
		display: flex;
		flex-direction: column;

		.pie_chart {
			flex: 1;
		}
	}

	.bar_wrap {
		height: 405px;
		display: flex;
		flex-direction: column;

		.bar_chart {
			flex: 1;
		}
	}
}

.table1_content {
	padding: 10px;

	.table1 {
		width: 100%;
		text-align: center;
		font-size: 16px;

		thead {
			background-color: #0A49A7;
			color: #02D9FD;
			height: 42px;
		}

		tbody {
			line-height: 42px;

			tr:nth-child(even) {
				background-color: rgba(10, 73, 167, .17);
			}
		}
	}
}

.animate__animated.ball_1 {
	--animate-duration: 2s;
	--animate-delay: 0.8s;
}

.animate__animated.ball_2 {
	--animate-duration: 1s;
	--animate-delay: 0.4s;
}

.animate__animated.ball_3 {
	--animate-duration: 1.8s;
	--animate-delay: 0.6s;
}

.animate__animated.ball_4 {
	--animate-duration: 1.2s;
	--animate-delay: 0.9s;
}</style>
