<template>
	<el-dialog width="55%" @closed="closed()" :show-close="false" class="my-info-dialog">
		<template #title>
			<div class="showTitle">
				<img class="titleImg" src="../../assets/img/controlcenter/daraTrue.png" alt="">
				<div class="titles">国电电力宁夏新能源开发有限公司</div>
			</div>
		</template>
		<div class="body">
			<div class="dataList">
				<div class="data">
					<div class="name">健康指数：</div>
					<div class="num">{{showDate.healthIndex}}</div>
				</div>
				<div class="data">
					<div class="name">资源指数：</div>
					<div class="num">{{showDate.resourceIndex}}</div>
				</div>
				<div class="data">
					<div class="name">风能利用率：</div>
					<div class="num">{{showDate.windEnergyRate}}%</div>
				</div>
				<div class="data">
					<div class="name">曲线跟随率：</div>
					<div class="num">{{showDate.curveFollowingRate}}%</div>
				</div>
				<div class="data">
					<div class="name">实际功率：</div>
					<div class="num">{{showDate.realTimePower}}</div>
					<div class="unit">MW</div>
				</div>
				<div class="data">
					<div class="name">理论功率：</div>
					<div class="num">{{showDate.theoreticalPower}}</div>
					<div class="unit" @click='ChangeColor()'>MW</div>
				</div>
				<div class="data">
					<div class="name">AGC有功设定：</div>
					<div class="num">{{showDate.agcPowerSet}}</div>
					<div class="unit" @click='ChangeColors()'>MW</div>
				</div>
			</div>
			<MultipleLineChart height="400px" :units="powerLineChartData.units" :list="powerLineChartData.value" :colors="colors"
				:showLegend="true" />
		</div>
	</el-dialog>
</template>

<script>
	import MultipleLineChart from "../focus/multiple-line-chart.vue";
	import MessageBridge from 'utils/MessageBridge'
	import dayjs from 'dayjs'
	import api from "api/index";
	export default {
		components: {
			MultipleLineChart
		},
		props: {
			stationName: {
				type: String,
				default: ''
			},
			data: {
				type: Array
			},
		},
		created() {
			// this.initData()
		},
		mounted() {
			this.initData()
		},
		data() {
			return {
				// 定时器
				timer: "",
				colors: ["rgba(75, 85, 174, 1)", "rgba(05, 187, 76, 1)"],
				showDate: {},
				chartData: {
					units: [""],
					value: [
						{
							title: "实际功率(MW)",
							yAxisIndex: 0,
							value: []
						},
						{
							title: "理论功率(MW)",
							yAxisIndex: 0,
							value: []
						},
					],
				},
				timeData: [],
				PowerSet: [],
				ActualPower: [],
				index: 0,
				powerLineChartData: {},
			};
		},
		methods: {
			initData() {
				var mb = MessageBridge.getInstance();
				var vs = [{ key: "/topic/title-info", action: this.getMessage }];
				mb.register(vs);
			},
			getMessage(msg) {
				let data = JSON.parse(msg)
				data.healthIndex = Number(data.healthIndex).toFixed(0)
				data.resourceIndex = Number(data.resourceIndex).toFixed(0)
				data.realTimePower = data.realTimePower.toFixed(2)
				data.theoreticalPower = data.theoreticalPower.toFixed(2)
				data.agcPowerSet = data.agcPowerSet.toFixed(2)
				data.windEnergyRate = data.windEnergyRate.toFixed(2)
				data.curveFollowingRate = data.curveFollowingRate.toFixed(2)
				this.showDate = data
			},
			getDate() {
				this.getPower({
					PowerSet: 'JSFW.NX_GD_FDC_XX_XX_XXX_XXX_CI0135',
					name: 'PowerSet',
				})
				this.getPower({
					ActualPower: 'JSFW.NX_GD_FDC_XX_XX_XXX_XXX_CI0192',
					name: 'ActualPower',
				})
				this.timer = setTimeout(() => {
					this.getDate()

				}, 10000);
			},
			getPower(values) {
				let date = new Date()
				let endTs = date.getTime();
				let startTs = endTs - 28800000;
				let names = values.name
				// 	this.powerLineChartData = this.chartData;
				api.getPower({
					tagName: values.PowerSet ? values.PowerSet : values.ActualPower,
					startTs: startTs,
					endTs: endTs,
				}).then(res => {
					if (res) {
						if (names === 'PowerSet') {
							let list = []
							res.data.forEach(item => {
								list.push({
									text: dayjs(item.ts).format('hh:mm'),
									value: parseFloat((item.doubleValue).toFixed(2))
								})
								this.chartData.value[0].value = list
							})
						} else {
							let list = []
							res.data.forEach(item => {
								list.push({
									text: dayjs(item.ts).format('hh:mm'),
									value: (parseFloat((item.doubleValue).toFixed(2))/1000)
								})
								this.chartData.value[1].value = list
							})
						}
						this.powerLineChartData = this.chartData;
					}
				})
			},
			ChangeColors() {
				this.colors = ["#aa2116", "#fcaf17"]
			},
			ChangeColor() {
				this.colors = ["rgba(75, 85, 174, 1)", "rgba(05, 187, 76, 1)"]
			},
			closed() {
				clearInterval(this.timer);
				//勿删，传递关闭方法
			},
			// initData(PowerSet, ActualPower) {
			// 	// this.chartData.units = ["(MW)", "(MW)"];
			// 	this.chartData.value[0] = {
			// 		title: "有功设定限值(MW)",
			// 		yAxisIndex: 0,
			// 		value: []
			// 	};
			// 	this.chartData.value[1] = {
			// 		title: "实发有功(MW)",
			// 		yAxisIndex: 0,
			// 		value: []
			// 	}
			// 	PowerSet.forEach(item => {
			// 		this.chartData.value[0].value.push({
			// 			text: dayjs(item.ts).format('hh:mm'),
			// 			value: parseFloat((item.doubleValue).toFixed(2))
			// 		})
			// 	})
			// 	ActualPower.forEach(item => {
			// 		this.chartData.value[1].value.push({
			// 			text: dayjs(item.ts).format('hh:mm'),
			// 			value: parseFloat((item.doubleValue).toFixed(2))
			// 		})
			// 	})
			// 	this.powerLineChartData = this.chartData;
			// }
		},
	};
</script>
<style scoped>
	.echartsBox {
		width: 64rem;
		height: 220px;
		overflow: hidden;
	}

	.el-dialog__header {
		background-color: #000000;
	}

	.showTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: -10px;
		font-size: 18px;
		color: #FFFFFF;
	}

	.titleImg {
		width: 16px;
		height: 16px;
		margin-right: 13px;
	}

	.icon {
		font-size: 12px;
		margin-left: 10px;
		margin-top: 5px;
	}

	.body {
		background-color: black;
		width: 100%;
		margin-top: -30px;
		/* height: 200px; */
	}

	.dataList {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding-top: 27px;
	}

	.data {
		width: 50%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 22px;
	}

	.name {
		width: 40%;
		display: flex;
		flex-direction: row-reverse;
		font-size: 12px;
		color: #FFFFFF;
	}

	.num {
		margin-left: 59px;
		font-size: 16px;
		color: #05BB4C;
		min-width: 40px;
	}

	.unit {
		font-size: 16px;
		color: #FFFFFF;
		margin-left: 20px;
	}

	.condition {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20px;
		border-bottom: 1px solid #3D3D3D;
		padding-bottom: 10px;
	}

	.status {
		width: 25%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.statusIcon {
		width: 14px;
		height: 14px;
		margin-left: 8px;
	}
</style>