<template>
	<view class="warp">
		<topoCanvas cId="runda" :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: [],
				partList: {},
				stationId:null,
				noloading:false,
				// 文字
				textCanvasData: [
					{
						type: "text",
						coord: [
							[270, 65]
						],
						font: [{
							text:  this.$t("homePage.home.standing"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[10, 65]
						],
						font: [{
							text: this.$t("homePage.home.grid"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[75, 120]
						],
						font: [{
							text: this.$t("homePage.home.gridMeter"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[78, 285]
						],
						font: [{
							text: this.$t("homePage.home.photovoltaic"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[220, 300]
						],
						font: [{
							text: this.$t("homePage.home.battery"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
				],
				// 图片
				imageCanvasData: [{
						//负载
						type: "image",
						url: "/static/topology/load.png",
						coord: [
							[260, 10],
							[40, 40],
						],
					},
					{
						//电网
						type: "image",
						url: "/static/topology/dianwang.png",
						coord: [
							[15, 10],
							[40, 40],
						],
					},
					{
						//电表
						type: "image",
						url: "/static/topology/ammeter.png",
						coord: [
							[85, 80],
							[30, 30],
						],
					},
					{
						//ACDC
						type: "image",
						url: "/static/topology/DC.png",
						coord: [
							[145, 140],
							[30, 30],
						],
					},
					{
						//MPPT
						type: "image",
						url: "/static/topology/MPPT.png",
						coord: [
							[75, 200],
							[30, 15],
						],
					},
					{
						//DCDC
						type: "image",
						url: "/static/topology/DCDC.png",
						coord: [
							[215, 200],
							[30, 30],
						],
					},
					{
						//光伏
						type: "image",
						url: "/static/topology/pv.png",
						coord: [
							[72, 235],
							[40, 40],
						],
					},
					{
						//电池
						type: "image",
						url: "/static/topology/dianchi.png",
						coord: [
							[210, 250],
							[40, 40],
						],
					}

				],
				lineCanvasData: [{
						type: "line",
						coord: [
							[60, 30],
							[255, 30],
						],
						color: "#19875c",
						width: 3,
						// dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[100, 30],
							[100, 80],
						],
						color: "#19875c",
						width: 1,
						// dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[160, 30],
							[160, 140],
						],
						color: "#19875c",
						width: 1,
						// dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[152, 170],
							[152, 190],
						],
						color: "#19875c",
						width: 1,
						// dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[152, 190],
							[92, 190],
						],
						color: "#19875c",
						width: 1,
						// dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[92, 190],
							[92, 210],
						],
						color: "#19875c",
						width: 1,
						// dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[92, 215],
							[92, 240],
						],
						color: "#19875c",
						width: 1,
						// dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[168, 170],
							[168, 190],
						],
						color: "#19875c",
						width: 1,
						// dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[168, 190],
							[230, 190],
						],
						color: "#19875c",
						width: 1,
						// dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[230, 190],
							[230, 200],
						],
						color: "#19875c",
						width: 1,
						// dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[230, 230],
							[230, 250],
						],
						color: "#19875c",
						width: 1,
						// dash: [10, 5],
					}

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

		methods: {
			changeEnglish(){
				this.textCanvasData = [
					{
						type: "text",
						coord: [
							[270, 65]
						],
						font: [{
							text:  this.$t("homePage.home.standing"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[10, 65]
						],
						font: [{
							text: this.$t("homePage.home.grid"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[75, 120]
						],
						font: [{
							text: this.$t("homePage.home.gridMeter"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[78, 285]
						],
						font: [{
							text: this.$t("homePage.home.photovoltaic"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[220, 300]
						],
						font: [{
							text: this.$t("homePage.home.battery"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},
				]
			},
			getData(val){
				this.stationId = val
				this.textCanvasData.splice(4)
				const api = [this.getAmmeter(), this.getAcdc(), this.getGf(), this.getFz(), this.getBattery()]
				Promise.all(api).finally((result) => {
					this.$nextTick(() =>{
					this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
						.lineCanvasData, ...this.circleCanvasData
					]	
					})
					this.noloading = true
				});
				
			},
			countChineseAndEnglishCharacters(str, x) {
				var chineseCount = str.match(/[\u4e00-\u9fa5]/g) ? str.match(/[\u4e00-\u9fa5]/g).length : 0
				var englishCount = str.match(/[a-zA-Z]/g) ? str.match(/[a-zA-Z]/g).length : 0
				var otherCount = str.length - chineseCount - englishCount
				const obj = {
					otherCount: otherCount,
					chineseCount: chineseCount,
					englishCount: englishCount
				}
				return (obj.englishCount * 4) + (obj.chineseCount * 10) + (obj.otherCount * 8) + x
			},
			getAmmeter() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: self.stationId,
							pageLocation: 'runda100-ammeter'
						})
						.then((res) => {
						
							if (res.data && res.data.length) {
								
								res.data.forEach((item, index) => {
									self.textCanvasData.push({
										type: "text",
										coord: [
											[60, 135 + index * 15]
										],
										font: [{
											text: `${item.name}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}, {
										type: "text",
										coord: [
											[self.countChineseAndEnglishCharacters(item
												.name, 70), 135 + index * 15]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}, )

								})
							}
							resolve()
						})
				})
			},
			getAcdc() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: self.stationId,
							pageLocation: 'runda100-acdc'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
									self.textCanvasData.push({
										type: "text",
										coord: [
											[180, 160 + index * 15]
										],
										font: [{
											text: `${item.name}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}, {
										type: "text",
										coord: [
											[self.countChineseAndEnglishCharacters(item
												.name, 190), 160 + index * 15]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}, )

								})
							}

							resolve()
						})
				})

			},
			getGf() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: self.stationId,
							pageLocation: 'runda100-gf'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
									self.textCanvasData.push({
										type: "text",
										coord: [
											[48, 300 + index * 15]
										],
										font: [{
											text: `${item.name}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}, {
										type: "text",
										coord: [
											[self.countChineseAndEnglishCharacters(item
												.name, 58), 300 + index * 15]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}, )

								})
							}

							resolve()
						})
				})

			},
			getFz() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: self.stationId,
							pageLocation: 'runda100-fz'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
									self.textCanvasData.push({
										type: "text",
										coord: [
											[200, 80 + index * 15]
										],
										font: [{
											text: `${item.name}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}, {
										type: "text",
										coord: [
											[self.countChineseAndEnglishCharacters(item
												.name, 210), 80 + index * 15]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}, )

								})
							}

							resolve()
						})
				})
			},
			getBattery() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: self.stationId,
							pageLocation: 'runda100-battery'
						})
						.then((res) => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
									self.textCanvasData.push({
										type: "text",
										coord: [
											[190, 320 + index * 15]
										],
										font: [{
											text: `${item.name}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}, {
										type: "text",
										coord: [
											[self.countChineseAndEnglishCharacters(item
												.name, 200), 320 + index * 15]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									}, )

								})
							}

							resolve()
						})
				})

			}

		}
	}
</script>

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