<template>
	<view class="warp">
		<topoCanvas cId="canvas" :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,
				// 文字
				textCanvasData: [
					{
					  type: "text",
					  coord: [[80, 128]],
					  font: [
					    {
					      text: "STS",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    }
					  ],
					},
					{
					  type: "text",
					  coord: [[172, 100]],
					  font: [
					    {
					      text: this.$t("homePage.home.ammeter"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    }
					  ],
					},
					{
					  type: "text",
					  coord: [[155, 115]],
					  font: [
					    {
					      text: "P(kW)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:40
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[258, 65]],
					  font: [
					    {
					      text: this.$t("homePage.home.load"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    }
					  ],
					},
					{
					  type: "text",
					  coord: [[149, 215]],
					  font: [
					    {
					      text: "P(kW)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left: 40,
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[35, 325]],
					  font: [
					    {
					      text: this.$t("homePage.home.photovoltaic"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    }
					  ],
					},
					{
					  type: "text",
					  coord: [[30, 340]],
					  font: [
					    {
					      text: "P(kW)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						   left: 40,
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[281, 325]],
					  font: [
					    {
					      text: this.$t("homePage.home.battery"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    }
					  ],
					},
					{
					  type: "text",
					  coord: [[245, 340]],
					  font: [
					    {
					      text: "SOC(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left: 50,
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[245, 355]],
					  font: [
					    {
					      text: "SOH(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left: 50,
					    },
					  ],
					},
				],
				
				// 图片
				imageCanvasData: [
					{
					  //电网
					  type: "image",
					  url: "/static/topology/dianwang.png",
					  coord: [
					    [4, 15],
					    [40, 40],
					  ],
					},
					  //STS
					{
					  type: "image",
					  url: "/static/topology/STS.png",
					  coord: [
					    [115, 108],
					    [23, 40],
					  ],
					},
					{
					  //电表
					  type: "image",
					  url: "/static/topology/ammeter.png",
					  coord: [
					    [164, 48],
					    [40, 40],
					  ],
					},
					{
					  type: "image",
					  url: "/static/topology/load.png",
					  coord: [
					    [250, 15],
					    [40, 40],
					  ],
					},
					{
					    type: "image",
					    url: "/static/topology/DC.png",
					    coord: [
					      [106, 188],
					      [40, 40],
					    ],
					  },
					  {
					    //电表
					    type: "image",
					    url: "/static/topology/pv.png",
					    coord: [
					      [27, 274],
					      [40, 40],
					    ],
					  },
					  {
					    //电表
					    type: "image",
					    url: "/static/topology/dianchi.png",
					    coord: [
					      [273, 274],
					      [40, 40],
					    ],
					  },
				],
				// 线
				lineCanvasData: [
					{
					  type: "line",
					  coord: [
					    [38, 36],
					    [274, 36],
					  ],
					  color: "#19875c",
					  width: 2,
					  dash: [10, 5],
					},
					{
					  type: "line",
					  coord: [
					    [125, 36],
					    [125, 119],
					  ],
					  color: "#19875c",
					  width: 2,
					  dash: [10, 5],
					},
					{
					  type: "line",
					  coord: [
					    [125, 156],
					    [125, 186],
					  ],
					  color: "#19875c",
					  width: 2,
					  dash: [10, 5],
					},
					{
					  type: "line",
					  coord: [
					    [125, 225],
					    [125, 250],
					  ],
					  color: "#19875c",
					  width: 2,
					  dash: [10, 5],
					},
					{
					  type: "line",
					  coord: [
					    [125, 68],
					    [173, 68],
					  ],
					  color: "#19875c",
					  width: 2,
					  dash: [10, 5],
					},
					{
					  type: "line",
					  coord: [
					    [47, 251],
					    [47, 271],
					  ],
					  color: "#19875c",
					  width: 2,
					  dash: [10, 5],
					},
					{
					  type: "line",
					  coord: [
					    [47, 251],
					    [292, 251],
					  ],
					  color: "#19875c",
					  width: 2,
					  dash: [10, 5],
					},
					{
					  type: "line",
					  coord: [
					    [292, 251],
					    [292, 271],
					  ],
					  color: "#19875c",
					  width: 2,
					  dash: [10, 5],
					},
					{
					  type: "image",
					  url: "/static/topology/load.png",
					  coord: [
					    [250, 15],
					    [40, 40],
					  ],
					},
					{
					    type: "image",
					    url: "/static/topology/DC.png",
					    coord: [
					      [106, 188],
					      [40, 40],
					    ],
					  },
					  {
					    //电表
					    type: "image",
					    url: "/static/topology/pv.png",
					    coord: [
					      [27, 274],
					      [40, 40],
					    ],
					  },
					  {
					    //电表
					    type: "image",
					    url: "/static/topology/dianchi.png",
					    coord: [
					      [273, 274],
					      [40, 40],
					    ],
					  },
				],
				// 点
				circleCanvasData: [
				]
			}
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
		},

		methods:{
			changeEnglish(){
				this.textCanvasData = [
					{
					  type: "text",
					  coord: [[80, 128]],
					  font: [
					    {
					      text: "STS",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    }
					  ],
					},
					{
					  type: "text",
					  coord: [[172, 100]],
					  font: [
					    {
					      text: this.$t("homePage.home.ammeter"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    }
					  ],
					},
					{
					  type: "text",
					  coord: [[155, 115]],
					  font: [
					    {
					      text: "P(kW)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left:40
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[258, 65]],
					  font: [
					    {
					      text: this.$t("homePage.home.load"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    }
					  ],
					},
					{
					  type: "text",
					  coord: [[149, 215]],
					  font: [
					    {
					      text: "P(kW)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left: 40,
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[35, 325]],
					  font: [
					    {
					      text: this.$t("homePage.home.photovoltaic"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    }
					  ],
					},
					{
					  type: "text",
					  coord: [[30, 340]],
					  font: [
					    {
					      text: "P(kW)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						   left: 40,
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[281, 325]],
					  font: [
					    {
					      text: this.$t("homePage.home.battery"),
					      size: 12,
					      color: "#666666",
					      width: 50,
					    }
					  ],
					},
					{
					  type: "text",
					  coord: [[245, 340]],
					  font: [
					    {
					      text: "SOC(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left: 50,
					    },
					  ],
					},
					{
					  type: "text",
					  coord: [[245, 355]],
					  font: [
					    {
					      text: "SOH(%)：",
					      size: 12,
					      color: "#666666",
					      width: 50,
					    },
					    {
					      text: "",
					      size: 12,
					      color: "#333333",
						  left: 50,
					    },
					  ],
					},
				]
				
			},
			clearData(){
				this.textCanvasData[2].font[1].text =  ''
								
				//ACDC
				this.textCanvasData[4].font[1].text =  ''
				   
				//光伏
				this.textCanvasData[6].font[1].text =  ''
					 
				//电池
				this.textCanvasData[8].font[1].text =  ''
				this.textCanvasData[9].font[1].text = ''
			},
			getData(val){
				this.stationId = val.id
				this.clearData()
				const api = [this.getMiddleData()]
				Promise.all(api).finally((result) => {
					this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
						.lineCanvasData, ...this.circleCanvasData
					]
					this.noloading = true
				});
			},
			getMiddleData(){
				let self = this;
				return new Promise((resolve, reject) => {
				  self.$u.api.homePageData
				    .GetZzhbtatus({
				      stationId: this.stationId,
				    })
				    .then((res) => {
						
						
				    //电表
				    this.textCanvasData[2].font[1].text = res.data.activePower !== null ? res.data.activePower + '' : ''
				
					//ACDC
					this.textCanvasData[4].font[1].text = res.data.activePowerPCS !== null ? res.data.activePowerPCS + '' : ''
					   
					//光伏
					this.textCanvasData[6].font[1].text = res.data.acActivePower !== null ? res.data.acActivePower + '' : ''
						 
					//电池
					this.textCanvasData[8].font[1].text = res.data.soc !== null ? res.data.soc + '' : ''
					this.textCanvasData[9].font[1].text = res.data.soh !== null ? res.data.soh + '' : ''
						 
				      // this.textCanvasData[3].font[1].text = this.partList.acActivePower !== null ? this.partList.acActivePower + '' : ''
				      // //ACDC
				      // this.textCanvasData[1].font[1].text = this.partList.activePowerPCS !== null ? this.partList.activePowerPCS + '' : ''
				      // //电池
				      // this.batteryData[2].font[1].text = this.partList.soc !== null ? this.partList.soc + '' : ''
				      // this.batteryData[3].font[1].text = this.partList.soh !== null ? this.partList.soh + '' : ''
				
				      resolve();
				    })
				    .catch((err) => {
				      reject("错误");
				    });
				});
			}
		}
		
	}
</script>
<style lang="scss" scoped>
	.warp {
		width: 650rpx;
		height: 770rpx;
		position: relative;
	}
</style>