<template>
	<view class="warp">
		<topoCanvas cId="secondcanvas" :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: {},
				noloading:false,
				// 文字
				textCanvasData: [
					{
						type: "text",
						coord: [
							[260, 65]
						],
						font: [{
							text: this.$t("homePage.home.load"),
							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: [
							[30, 250]
						],
						font: [{
							text: "1#" + this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},

					{
						type: "text",
						coord: [
							[240, 250]
						],
						font: [{
							text: "2#" +  this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},

				],

				// 图片
				imageCanvasData: [
					{
						//负载
						type: "image",
						url: "/static/topology/load.png",
						coord: [
							[250, 10],
							[40, 40],
						],
					},
					{
					  //电网
					  type: "image",
					  url: "/static/topology/dianwang.png",
					  coord: [
					    [15, 10],
					    [40, 40],
					  ],
					},
					{
					  //一体舱
					  type: "image",
					  url: "/static/topology/yiticang.png",
					  coord: [
					    [45, 195],
					    [30, 40],
					  ],
					},
					{
					  //一体舱
					  type: "image",
					  url: "/static/topology/yiticang.png",
					  coord: [
					    [255, 195],
					    [30, 40],
					  ],
					},
					{
					  //电表
					  type: "image",
					  url: "/static/topology/ammeter.png",
					  coord: [
					    [170, 35],
					    [30, 30],
					  ],
					},
					{
					  //sts
					  type: "image",
					  url: "/static/topology/yitigui.png",
					  coord: [
					    [95, 85],
					    [30, 40],
					  ],
					},

				],
				// 线
				lineCanvasData: [
					{
						type: "line",
						coord: [
							[60, 30],
							[240, 30],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[110, 30],
							[110, 85],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[110, 125],
							[110, 150],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[60, 150],
							[60, 190],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[60, 150],
							[270, 150],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[270, 150],
							[270, 190],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[110, 55],
							[160, 55],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					}

				],
				// 点
				circleCanvasData: [
					{
						type: "circle",
						coord: [
							[60, 30]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[110, 30]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},

					{
						type: "circle",
						coord: [
							[240, 30]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[60, 190]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[110, 150]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[270, 190]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[160, 55]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
				]
			}
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
		},

		methods: {
			changeEnglish(){
				this.textCanvasData = [
					{
						type: "text",
						coord: [
							[260, 65]
						],
						font: [{
							text: this.$t("homePage.home.load"),
							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: [
							[30, 250]
						],
						font: [{
							text: "1#" + this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},

					{
						type: "text",
						coord: [
							[240, 250]
						],
						font: [{
							text: "2#" +  this.$t("homePage.home.cabinet"),
							size: 12,
							color: "#666666",
							width: 50,
						}]
					},

				]

			},
			getData(val){
				this.stationId = val
				this.textCanvasData.splice(3)
				const api = [this.getLeftPcs(),this.getRightPcs(),this.getAmmeter()]
				Promise.all(api).finally((result) => {
					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: this.stationId,
							pageLocation:'second-ammeter'
						})
						.then((res) => {
							if(res.data && res.data.length){
								res.data.forEach((item,index) => {
									this.textCanvasData.push(
									{
										type: "text",
										coord: [
											[120, 80 + index * 15]
										],
										font: [{
											text: `${item.name}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},
									{
										type: "text",
										coord: [
											[this.countChineseAndEnglishCharacters(item.name,130), 80 + index * 15]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},
									)
								
								})
							}
						
							resolve()
					})
				})
				
			},
			getLeftPcs() {
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetDynamicConfig({
							stationId: this.stationId,
							pageLocation:'second-pcs-left'
						})
						.then((res) => {
							if(res.data && res.data.length){
								res.data.forEach((item,index) => {
									
									this.textCanvasData.push(
									{
										type: "text",
										coord: [
											[30, 265 + index * 15]
										],
										font: [{
											text: `${item.name}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},
									{
										type: "text",
										coord: [
											[this.countChineseAndEnglishCharacters(item.name,30), 265 + index * 15]
										],
										font: [{
											text: `${item.value}`,
											size: 12,
											color: "#666666",
											width: 50,
										}]
									},
									)
								
								})
							}
							
							resolve()
					})
				})

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

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