<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: [
					// // 并网柜--0
					{
						type: "text",
						coord: [
							[280, 65]
						],
						font: [{
							text: "负载",
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					// //1# 直流舱--1
					{
						type: "text",
						coord: [
							[5, 60]
						],
						font: [{
							text: "用户配电",
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					// //1#PCS升压一体舱--2
					{
						type: "text",
						coord: [
							[200, 85]
						],
						font: [{
							text: "负载电表",
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[50, 195]
						],
						font: [{
							text: "柴发电表",
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[230, 225]
						],
						font: [{
							text: "储能电表",
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[210, 280]
						],
						font: [{
							text: "储能柜",
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[70, 280]
						],
						font: [{
							text: "柴油发电机",
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[215, 170]
						],
						font: [{
							text: "PCS",
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[155, 95]
						],
						font: [{
							text: "ATS",
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[155, 45]
						],
						font: [{
							text: "ATS",
							size: 12,
							color: "#333333",
							width: 50
						}]
					}

				],
				// 图片
				imageCanvasData: [{
						//电网
						type: "image",
						url: "/static/topology/dianwang.png",
						coord: [
							[10, 5],
							[30, 40]
						]
					},
					{
						//负载
						type: "image",
						url: "/static/topology/fuzai.png",
						coord: [
							[270, 5],
							[45, 40]
						]
					},
					{
						//负载
						type: "image",
						url: "/static/topology/none.png",
						coord: [
							[150, 15],
							[30, 25]
						]
					},
					{
						//负载
						type: "image",
						url: "/static/topology/none.png",
						coord: [
							[150, 65],
							[30, 25]
						]
					},
					{
						//柴发
						type: "image",
						url: "/static/topology/electric.png",
						coord: [
							[80, 230],
							[35, 35]
						]
					},
					{
						//柴发
						type: "image",
						url: "/static/topology/dianchi.png",
						coord: [
							[210, 230],
							[35, 35]
						]
					},
					{
						//柴发电表
						type: "image",
						url: "/static/topology/ammeter.png",
						coord: [
							[55, 150],
							[30, 30]
						]
					},
					{
						//储能电表
						type: "image",
						url: "/static/topology/ammeter.png",
						coord: [
							[240, 180],
							[30, 30]
						]
					},
					{
						//负载电表
						type: "image",
						url: "/static/topology/ammeter.png",
						coord: [
							[210, 40],
							[30, 30]
						]
					},
					{
						//PCS
						type: "image",
						url: "/static/topology/STS.png",
						coord: [
							[215, 120],
							[20, 40]
						]
					}
				],
				// 线
				lineCanvasData: [
					// 顶部
					{
						type: "line",
						coord: [
							[40, 27],
							[159, 27]
						],
						color: "#19875c",
						width: 2,
						dash: 1
					},
					{
						type: "line",
						coord: [
							[225, 27],
							[225, 40]
						],
						color: "#19875c",
						width: 2,
						dash: 1
					},

					{
						type: "line",
						coord: [
							[180, 27],
							[270, 27]
						],
						color: "#19875c",
						width: 2,
						dash: 1
					},

					// 1中部
					{
						type: "line",
						coord: [
							[164, 30],
							[164, 70]
						],
						color: "#19875c",
						width: 2,
						dash: 1
					},
					{
						type: "line",
						coord: [
							[164, 80],
							[164, 100],
						],
						color: "#19875c",
						width: 2,
						dash: 1
					},

					{
						type: "line",
						coord: [
							[162, 100],
							[97, 100],
						],
						color: "#19875c",
						width: 2,
						dash: 1
					},
					{
						type: "line",
						coord: [
							[85, 165],
							[97, 165]
						],
						color: "#19875c",
						width: 2,
						dash: 1
					},
					{
						type: "line",
						coord: [
							[162, 100],
							[227, 100],
						],
						color: "#19875c",
						width: 2,
						dash: 1
					},
					{
						type: "line",
						coord: [
							[97, 100],
							[97, 230],
						],
						color: "#19875c",
						width: 2,
						dash: 1
					},
					{
						type: "line",
						coord: [
							[227, 100],
							[227, 120],
						],
						color: "#19875c",
						width: 2,
						dash: 1
					},
					{
						type: "line",
						coord: [
							[227, 195],
							[240, 195],
						],
						color: "#19875c",
						width: 2,
						dash: 1
					},

					{
						type: "line",
						coord: [
							[227, 160],
							[227, 230],
						],
						color: "#19875c",
						width: 2,
						dash: 1
					},

				],
				// 点
				circleCanvasData: [

				]
			}
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
		},
		methods: {
			changeEnglish() {
				this.textCanvasData = [
					// // 并网柜--0
					{
						type: "text",
						coord: [
							[280, 65]
						],
						font: [{
							text: this.$t("homePage.home.load"),
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					// //1# 直流舱--1
					{
						type: "text",
						coord: [
							[5, 60]
						],
						font: [{
							text: this.$t("homePage.home.grid"),
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					// //1#PCS升压一体舱--2
					{
						type: "text",
						coord: [
							[200, 85]
						],
						font: [{
							text: this.$t("homePage.home.loadAmmeter"),
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[50, 195]
						],
						font: [{
							text: this.$t("homePage.home.dieselGeneratorMeter"),
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[230, 225]
						],
						font: [{
							text: this.$t("homePage.home.energyStorageMeter"),
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[210, 280]
						],
						font: [{
							text: this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[70, 280]
						],
						font: [{
							text:  this.$t("homePage.home.dieselGenerator"),
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[215, 170]
						],
						font: [{
							text: "PCS",
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[155, 95]
						],
						font: [{
							text: "ATS",
							size: 12,
							color: "#333333",
							width: 50
						}]
					},
					{
						type: "text",
						coord: [
							[155, 45]
						],
						font: [{
							text: "ATS",
							size: 12,
							color: "#333333",
							width: 50
						}]
					}
				]
			},
			getData(val) {
				this.stationId = val
				this.textCanvasData.splice(10)
				const api = [this.getAmmeter1(),this.getAmmeter2(),this.getAmmeter3(),this.getCf(),this.getPcs()]
				Promise.all(api).finally((result) => {
					this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
						.lineCanvasData, ...this.circleCanvasData
					]
					this.noloading = true
				});
			},
			clearData() {
				// this.textCanvasData[3].font[1].text = ''
				// this.textCanvasData[4].font[1].text =  ''
				// this.textCanvasData[5].font[1].text =  ''
				// this.textCanvasData[6].font[1].text =  ''
			},
			workStatus(val, data) {
				if (data === 1) {
					if (+val > +1) {
						return '充电'
					}
					if (+val < -1) {
						return '放电'
					}
					if (val < 1 || +val.abs < 1) {
						return '静置'
					}
				} else {
					if (+val > +1) {
						return '放电'
					}
					if (+val < -1) {
						return '充电'
					}
					if (val < 1 || +val.abs < 1) {
						return '静置'
					}
				}
			},
			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 * 11	) + (obj.otherCount * 9) + x
			    },
			getAmmeter1() {
				let self = this
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation:'md-ammeter-1'
						})
						.then(res => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
										this.textCanvasData.push({
											type: "text",
											coord: [
												[250, 80 + index * 15]
											],
											font: [{
												text: `${item.name}`,
												size: 12,
												color: "#666666",
												width: 50,
											}]
										},
										{
											type: "text",
											coord: [
												[this.countChineseAndEnglishCharacters(item.name,250), 80 + index * 15]
											],
											font: [{
												text: `${item.value}`,
												size: 12,
												color: "#666666",
												width: 50,
											}]
										},)
									
								})
							}
							resolve()
						})
				})
			},
			getAmmeter2() {
				let self = this
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation:'md-ammeter-2'
						})
						.then(res => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
										this.textCanvasData.push({
											type: "text",
											coord: [
												[30, 210 + index * 15]
											],
											font: [{
												text: `${item.name}`,
												size: 12,
												color: "#666666",
												width: 50,
											}]
										},
										{
											type: "text",
											coord: [
												[this.countChineseAndEnglishCharacters(item.name,30), 210 + index * 15]
											],
											font: [{
												text: `${item.value}`,
												size: 12,
												color: "#666666",
												width: 50,
											}]
										},)
									
								})
							}
							resolve()
						})
				})
			},
			getAmmeter3() {
				let self = this
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation:'md-ammeter-3'
						})
						.then(res => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
										this.textCanvasData.push({
											type: "text",
											coord: [
												[150, 200 + index * 15]
											],
											font: [{
												text: `${item.name}`,
												size: 12,
												color: "#666666",
												width: 50,
											}]
										},
										{
											type: "text",
											coord: [
												[this.countChineseAndEnglishCharacters(item.name,150), 200 + index * 15]
											],
											font: [{
												text: `${item.value}`,
												size: 12,
												color: "#666666",
												width: 50,
											}]
										},)
									
								})
							}
							resolve()
						})
				})
			},
			getCf() {
				let self = this
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation:'md-pcs'
						})
						.then(res => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
										this.textCanvasData.push({
											type: "text",
											coord: [
												[250, 250 + index * 15]
											],
											font: [{
												text: `${item.name}`,
												size: 12,
												color: "#666666",
												width: 50,
											}]
										},
										{
											type: "text",
											coord: [
												[this.countChineseAndEnglishCharacters(item.name,250), 250 + index * 15]
											],
											font: [{
												text: `${item.value}`,
												size: 12,
												color: "#666666",
												width: 50,
											}]
										},)
									
								})
							}
							resolve()
						})
				})
			},
			getPcs() {
				let self = this
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation:'md-dynamo'
						})
						.then(res => {
							if (res.data && res.data.length) {
								res.data.forEach((item, index) => {
										this.textCanvasData.push({
											type: "text",
											coord: [
												[130, 250 + index * 15]
											],
											font: [{
												text: `${item.name}`,
												size: 12,
												color: "#666666",
												width: 50,
											}]
										},
										{
											type: "text",
											coord: [
												[this.countChineseAndEnglishCharacters(item.name,130), 250 + index * 15]
											],
											font: [{
												text: `${item.value}`,
												size: 12,
												color: "#666666",
												width: 50,
											}]
										},)
									
								})
							}
							resolve()
						})
				})
			}
		}

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