<template>
	<view class="warp">
		<topoCanvas cId="wshcanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" :noloading="noloading"/>
	</view>
</template>
<script>
	import topoCanvas from '@/components/new-canvas/index.vue'
	export default {
		components: {
			topoCanvas
		},
		data() {
			return {
				canvasData: [],
				noloading:false,
				partList: {},
				// 文字
				textCanvasData: [{
						type: "text",
						coord: [
							[8, 25]
						],
						font: [{
							text: "380" + this.$t("homePage.home.busbar"),
							size: 12,
							color: "#333333",
						}]
					},
					{
						type: "text",
						coord: [
							[28, 170]
						],
						font: [{
							text: this.$t("homePage.home.load"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[12, 185]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						]
					},
					{
						type: "text",
						coord: [
							[155, 80]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						]
					},
					{
						type: "text",
						coord: [
							[99, 170]
						],
						font: [{
							text: this.$t("homePage.home.dieselGenerator"),
							size: 12,
							color: "#666666",
							width: 50,
						}],
					},
					{
						type: "text",
						coord: [
							[100, 185]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},
					{
						type: "text",
						coord: [
							[196, 195]
						],
						font: [{
							text: this.$t("homePage.home.photovoltaic"),
							size: 12,
							color: "#666666",
							width: 50,
						}],
					},
					{
						type: "text",
						coord: [
							[170, 210]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},
					{
						type: "text",
						coord: [
							[288, 195]
						],
						font: [{
							text: this.$t("homePage.home.battery"),
							size: 12,
							color: "#666666",
							width: 50,
						}],
					},
					{
						type: "text",
						coord: [
							[250, 210]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[250, 225]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					}
				],

				// 图片
				imageCanvasData: [{
						//负载
						type: "image",
						url: "/static/topology/load.png",
						coord: [
							[18, 111],
							[40, 40],
						],
					},
					//ACDC
					{
						type: "image",
						url: "/static/topology/DC.png",
						coord: [
							[229, 54],
							[40, 40],
						],
					},
					//发电机
					{
						type: "image",
						url: "/static/topology/electric.png",
						coord: [
							[104, 111],
							[40, 40],
						],
					},
					{
						//光伏
						type: "image",
						url: "/static/topology/pv.png",
						coord: [
							[186, 135],
							[40, 40],
						],
					},
					{
						//电表
						type: "image",
						url: "/static/topology/dianchi.png",
						coord: [
							[279, 135],
							[40, 40],
						],
					},
				],
				// 线
				lineCanvasData: [{
						type: "line",
						coord: [
							[8, 30],
							[318, 30],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},

					{
						type: "line",
						coord: [
							[38, 30],
							[38, 110],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[124, 30],
							[124, 110],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[250, 30],
							[250, 55],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[250, 96],
							[250, 104],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[204, 132],
							[204, 104],

						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[204, 104],
							[298, 104],

						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[298, 132],
							[298, 104],

						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					}
				],
				// 点
				circleCanvasData: [
					{
						type: "circle",
						coord: [
							[38, 30]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[124, 30]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},

					{
						type: "circle",
						coord: [
							[250, 30]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
				]
			}
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
		},

		methods: {
			changeEnglish(){
				this.textCanvasData = [{
						type: "text",
						coord: [
							[8, 25]
						],
						font: [{
							text: "380" + this.$t("homePage.home.busbar"),
							size: 12,
							color: "#333333",
						}]
					},
					{
						type: "text",
						coord: [
							[28, 170]
						],
						font: [{
							text: this.$t("homePage.home.load"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[12, 185]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						]
					},
					{
						type: "text",
						coord: [
							[155, 80]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						]
					},
					{
						type: "text",
						coord: [
							[99, 170]
						],
						font: [{
							text: this.$t("homePage.home.dieselGenerator"),
							size: 12,
							color: "#666666",
							width: 50,
						}],
					},
					{
						type: "text",
						coord: [
							[100, 185]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},
					{
						type: "text",
						coord: [
							[196, 195]
						],
						font: [{
							text: this.$t("homePage.home.photovoltaic"),
							size: 12,
							color: "#666666",
							width: 50,
						}],
					},
					{
						type: "text",
						coord: [
							[170, 210]
						],
						font: [{
								text: "P(kW)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 40
							},
						],
					},
					{
						type: "text",
						coord: [
							[288, 195]
						],
						font: [{
							text: this.$t("homePage.home.battery"),
							size: 12,
							color: "#666666",
							width: 50,
						}],
					},
					{
						type: "text",
						coord: [
							[250, 210]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[250, 225]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					}
				]
			},
			getData(val){
				this.stationId = val
				this.clearData()
				const api = [this.getMiddleData()]
				Promise.all(api).finally((result) => {
					this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
						.lineCanvasData, ...this.circleCanvasData
					]
					this.noloading = true
				});
			},
			clearData(){
				this.textCanvasData[2].font[1].text = ''
				//ACDC
				this.textCanvasData[3].font[1].text = ''
				//柴油发电机
				this.textCanvasData[5].font[1].text = ''
				//光伏
				this.textCanvasData[7].font[1].text = ''
				// 电池
				this.textCanvasData[9].font[1].text = ''
				this.textCanvasData[10].font[1].text = ''
			},
			getMiddleData() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetWSHStatus({
							stationId: this.stationId,
						})
						.then((res) => {
							//负载
							this.textCanvasData[2].font[1].text = res.data.epsActivePower !== null ? res.data.epsActivePower  + '': ''
							//ACDC
							this.textCanvasData[3].font[1].text = res.data.activePowerPCS !== null ? res.data.activePowerPCS + '' : ''
							//柴油发电机
							this.textCanvasData[5].font[1].text = res.data.cfActivePower !== null ? res.data.cfActivePower + '' : ''
							//光伏
							this.textCanvasData[7].font[1].text = res.data.acActivePower !== null ? res.data.acActivePower + '' : ''
							// 电池
							this.textCanvasData[9].font[1].text = res.data.soc !== null ? res.data.soc + '' : ''
							this.textCanvasData[10].font[1].text = res.data.soc !== null ? res.data.soh + '' : ''
							resolve()
					})
				})

			}
		}

	}
</script>
<style lang="scss" scoped>
	.warp {
		width: 650rpx;
		height: 500rpx;
		position: relative;
	}
</style>