<template>
	<view class="warp">
		<topoCanvas cId="canvasCixi" :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 {
				noloading: false,
				canvasData: [],
				stationId: null,
				formModel: {},
				partList: [],
				// 文字
				textCanvasData: [{
						type: "text",
						coord: [
							[285, 65]
						],
						font: [{
							text: this.$t("homePage.home.load"),
							size: 12,
							color: "#333333",
						}, ],
					},

					// 并网柜 1
					{
						type: "text",
						coord: [
							[190, 100]
						],
						font: [{
							text: this.$t("homePage.home.gridCab"),
							size: 12,
							color: "#333333",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[190, 75]
						],
						font: [{
								text: this.$t("homePage.home.gridCabSwitch"),
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 65
							},
						],
					},
					{
						type: "text",
						coord: [
							[190, 115]
						],
						font: [{
								text: this.$t("homePage.home.activePower"),
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 80
							},
						],
					},

					//1# 直流舱 5
					{
						type: "text",
						coord: [
							[5, 130]
						],
						font: [{
							text: '1#' + this.$t("homePage.home.dCCabin"),
							size: 12,
							color: "#333333",
							width: 50,
						}, ],
					},
					{
						type: "text",
						coord: [
							[5, 145]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[5, 160]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},

					//2# 直流舱 8
					{
						type: "text",
						coord: [
							[245, 130]
						],
						font: [{
							text: '2#' + this.$t("homePage.home.dCCabin"),
							size: 12,
							color: "#333333",
							width: 50,
						}, ],
					},
					{
						type: "text",
						coord: [
							[245, 145]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[245, 160]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},

					//1#PCS升压一体舱
					{
						type: "text",
						coord: [
							[60, 260]
						],
						font: [{
							text: '1#' + this.$t("homePage.home.PCSCab"),
							size: 12,
							color: "#333333",
							width: 50,
						}, ],
					},
					{
						type: "text",
						coord: [
							[50, 275]
						],
						font: [{
								text: this.$t("homePage.home.workStatus"),
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 55
							},
						],
					},
					{
						type: "text",
						coord: [
							[50, 290]
						],
						font: [{
								text: this.$t("homePage.home.activePower"),
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 80
							},
						],
					},

					//2#PCS升压一体舱
					{
						type: "text",
						coord: [
							[180, 260]
						],
						font: [{
							text: '2#' + this.$t("homePage.home.PCSCab"),
							size: 12,
							color: "#333333",
							width: 50,
						}, ],
					},
					{
						type: "text",
						coord: [
							[180, 275]
						],
						font: [{
								text: this.$t("homePage.home.workStatus"),
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 55
							},
						],
					},
					{
						type: "text",
						coord: [
							[180, 290]
						],
						font: [{
								text: this.$t("homePage.home.activePower"),
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 80
							},
						],
					},
					{
						type: "text",
						coord: [
							[70, 95]
						],
						font: [{
								text: this.$t("homePage.home.ammeter"),
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 80
							},
						],
					},
					{
						type: "text",
						coord: [
							[30, 110]
						],
						font: [{
								text: this.$t("homePage.home.activePower"),
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 80
							},
						],
					}

				],
				// 图片
				imageCanvasData: [{
						//电网
						type: "image",
						url: "/static/topology/dianwang.png",
						coord: [
							[10, 10],
							[40, 50],
						],
					},
					{
						//负载
						type: "image",
						url: "/static/topology/fuzai.png",
						coord: [
							[280, 10],
							[40, 40],
						],
					},
					{
						//一体柜
						type: "image",
						url: "/static/topology/yitigui.png",
						coord: [
							[145, 75],
							[40, 60],
						],
					},
					{
						//直流舱
						type: "image",
						url: "/static/topology/cang.png",
						coord: [
							[10, 180],
							[60, 50],
						],
					},
					{
						//一体舱
						type: "image",
						url: "/static/topology/yiticang.png",
						coord: [
							[100, 180],
							[40, 50],
						],
					},
					{
						//一体舱
						type: "image",
						url: "/static/topology/yiticang.png",
						coord: [
							[190, 180],
							[40, 50],
						],
					},
					//直流舱
					{
						type: "image",
						url: "/static/topology/cang.png",
						coord: [
							[260, 180],
							[60, 50],
						],
					},
					{
						type: "image",
						url: "/static/topology/byq.png",
						coord: [
							[155, 145],
							[20, 20],
						],
					},
					{
						type: "image",
						url: "/static/topology/ammeter.png",
						coord: [
							[90, 60],
							[20, 20],
						],
					},

				],
				// 线
				lineCanvasData: [{
						type: "line",
						coord: [
							[60, 30],
							[165, 30],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[165, 30],
							[165, 50],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					// 负载---并网柜
					{
						type: "line",
						coord: [
							[270, 30],
							[165, 30],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					// {
					// 	type: "line",
					// 	coord: [
					// 		[170, 30],
					// 		[170, 70],
					// 	],
					// 	color: "#19875c",
					// 	width: 2,
					// 	dash: [10, 5],
					// },
					// 1直流舱--并网柜
					{
						type: "line",
						coord: [
							[30, 170],
							[165, 170],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[165, 135],
							[165, 145],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[165, 165],
							[165, 170],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[300, 170],
							[165, 170],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[165, 50],
							[175, 70],
						],
						color: "#19875c",
						width: 2,
						dash: [0],
					},
					{
						type: "line",
						coord: [
							[165, 70],
							[165, 75],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
					{
						type: "line",
						coord: [
							[100, 30],
							[100, 60],
						],
						color: "#19875c",
						width: 2,
						dash: [10, 5],
					},
				],
				// 点
				circleCanvasData: [
					{
						type: "circle",
						coord: [
							[60, 30]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[270, 30]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[30, 170]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[115, 170]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[215, 170]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[300, 170]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},

				],
				// 点
				circleCanvasData: [{
						type: "circle",
						coord: [
							[60, 30]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[270, 30]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[30, 170]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[115, 170]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[215, 170]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					},
					{
						type: "circle",
						coord: [
							[300, 170]
						],
						color: "#3AECA1",
						isMove: false,
						r: 3,
					}
				]
			}
		},
		created() {

		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
		},
		watch: {},
		methods: {
			changeEnglish() {
				this.textCanvasData = [{
						type: "text",
						coord: [
							[285, 65]
						],
						font: [{
							text: this.$t("homePage.home.load"),
							size: 12,
							color: "#333333",
						}, ],
					},

					// 并网柜 1
					{
						type: "text",
						coord: [
							[190, 100]
						],
						font: [{
							text: this.$t("homePage.home.gridCab"),
							size: 12,
							color: "#333333",
							width: 50,
						}]
					},
					{
						type: "text",
						coord: [
							[190, 75]
						],
						font: [{
								text: this.$t("homePage.home.gridCabSwitch"),
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 65
							},
						],
					},
					{
						type: "text",
						coord: [
							[190, 115]
						],
						font: [{
								text: this.$t("homePage.home.activePower"),
								size: 12,
								color: "#666666",

							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 80
							},
						],
					},

					//1# 直流舱 5
					{
						type: "text",
						coord: [
							[5, 130]
						],
						font: [{
							text: '1#' + this.$t("homePage.home.dCCabin"),
							size: 12,
							color: "#333333",
							width: 50,
						}, ],
					},
					{
						type: "text",
						coord: [
							[5, 145]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[5, 160]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},

					//2# 直流舱 8
					{
						type: "text",
						coord: [
							[245, 130]
						],
						font: [{
							text: '2#' + this.$t("homePage.home.dCCabin"),
							size: 12,
							color: "#333333",
							width: 50,
						}, ],
					},
					{
						type: "text",
						coord: [
							[245, 145]
						],
						font: [{
								text: "SOC(%)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},
					{
						type: "text",
						coord: [
							[245, 160]
						],
						font: [{
								text: "SOH(%)：",
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 50
							},
						],
					},

					//1#PCS升压一体舱
					{
						type: "text",
						coord: [
							[60, 260]
						],
						font: [{
							text: '1#' + this.$t("homePage.home.PCSCab"),
							size: 12,
							color: "#333333",
							width: 50,
						}, ],
					},
					{
						type: "text",
						coord: [
							[50, 275]
						],
						font: [{
								text: this.$t("homePage.home.workStatus"),
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 55
							},
						],
					},
					{
						type: "text",
						coord: [
							[50, 290]
						],
						font: [{
								text: this.$t("homePage.home.activePower"),
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 80
							},
						],
					},

					//2#PCS升压一体舱
					{
						type: "text",
						coord: [
							[180, 260]
						],
						font: [{
							text: '2#' + this.$t("homePage.home.PCSCab"),
							size: 12,
							color: "#333333",
							width: 50,
						}, ],
					},
					{
						type: "text",
						coord: [
							[180, 275]
						],
						font: [{
								text: this.$t("homePage.home.workStatus"),
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 55
							},
						],
					},
					{
						type: "text",
						coord: [
							[180, 290]
						],
						font: [{
								text: this.$t("homePage.home.activePower"),
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 80
							},
						],
					},
					{
						type: "text",
						coord: [
							[70, 95]
						],
						font: [{
								text: this.$t("homePage.home.ammeter"),
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 80
							},
						],
					},
					{
						type: "text",
						coord: [
							[30, 110]
						],
						font: [{
								text: this.$t("homePage.home.activePower"),
								size: 12,
								color: "#666666",
								width: 50,
							},
							{
								text: "",
								size: 12,
								color: "#333333",
								left: 80
							},
						],
					}
				]
			},
			getData(val) {
				this.stationId = val
				this.clearData()
				const api = [
					this.getOpenStationMiddle(),
					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 = "";
				this.textCanvasData[3].font[1].text = "";
				this.textCanvasData[5].font[1].text = "";
				this.textCanvasData[8].font[1].text = "";
				this.textCanvasData[6].font[1].text = "";
				this.textCanvasData[9].font[1].text = "";
				this.textCanvasData[11].font[1].text = "";
				this.textCanvasData[12].font[1].text = "";
				this.textCanvasData[14].font[1].text = "";
				this.textCanvasData[15].font[1].text = "";
				this.textCanvasData[17].font[1].text = "";
			},
			getOpenStationMiddle() {
				this.$u.api.homePageData
					.GetOpenStationMiddle({
						stationId: this.stationId,
					})
					.then((res) => {
						this.textCanvasData[2].font[1].text = res.data.cabinSwitch ? this.$t("homePage.home.on") : this
							.$t("homePage.home.off");
						this.textCanvasData[2].font[1].text === this.$t("homePage.home.on") ? this.lineCanvasData[7].coord = [[165, 50],
														[165, 70]] : [165, 50],
														[175, 70]

						this.textCanvasData[3].font[1].text = res.data.activePowerEMU ? res.data.activePowerEMU : "";

					})

			},
			getMiddleData() {
				this.$u.api.homePageData
					.GetOpenStationMiddlePart({
						stationId: this.stationId,
					})
					.then((res) => {
						// console.log(this.textCanvasData);
						this.partList = res.data
						this.textCanvasData[5].font[1].text = this.partList.length ? this.partList[0].soc + '' : "";
						this.textCanvasData[6].font[1].text = this.partList.length ? this.partList[0].soh + '' : "";
						this.textCanvasData[8].font[1].text = this.partList.length > 1 ? this.partList[1].soc + '' :
						"";
						this.textCanvasData[9].font[1].text = this.partList.length > 1 ? this.partList[1].soh + '' :
						"";
						this.textCanvasData[11].font[1].text = this.partList.length ? this.workStatus(this.partList[0]
							.activePowerPCS, 0) : "";
						this.textCanvasData[12].font[1].text = this.partList.length ? this.partList[0].activePowerPCS +
							'' : "";
						this.textCanvasData[14].font[1].text = this.partList.length ? this.workStatus(this.partList[1]
							.activePowerPCS, 1) : "";
						this.textCanvasData[15].font[1].text = this.partList.length ? this.partList[1].activePowerPCS +
							'' : "";
						this.textCanvasData[17].font[1].text = this.partList.length ? this.partList[2].activePowerFNL  + '' : "";
					})
			},
			workStatus(val, index) {
				if (this.partList[index].flowDirection === 2) {
					if (+val > +1) {
						return this.$t("homePage.home.disCharge")
					}
					if (+val < -1) {
						return this.$t("homePage.home.charge")
					}
					if (val < 1 || +val.abs < 1 || !val) {
						return this.$t("homePage.home.standing")
					}
				} else {
					if (+val > +1) {
						return this.$t("homePage.home.charge")
					}
					if (+val < -1) {
						return this.$t("homePage.home.disCharge")
					}
					if (val < 1 || +val.abs < 1 || !val) {
						return this.$t("homePage.home.standing")
					}
				}

			}
		}


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