<template>
	<view class="warp">
		<topoCanvas cId="devicecanvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" ref="canvas"
			:noloading="noloading" />
	</view>
</template>

<script>
	import topoCanvas from '@/components/new-canvas/index.vue'
	export default {
		components: {
			topoCanvas
		},
		data() {
			return {
				canvasData: [],
				partList: {},
				// 文字
				textCanvasData: [],
				// 图片
				imageCanvasData: [{
					type: "image",
					url: "/static/topology/device-monitoring.png",
					coord: [
						[0, 120],
						[320, 340],
					],
				}, ],
				rectCanvasData: [],
				// 线
				lineCanvasData: [],
				// 点
				circleCanvasData: [],
				timmer: null,
				defaultCanvasData: [{
						type: "text",
						coord: [
							[0, 480]
						],
						font: [{
							text: this.$t("homePage.home.legend"),
							size: 12,
							color: "#282828",
							width: 50
						}]
					},
					{
						type: "rect",
						coord: [
							[0, 490],
							[10, 10]
						],
						width: 2,
						rectType: 'fill',
						borderColor: "#009458",
						background: "#009458"
					},
					{
						type: "text",
						coord: [
							[20, 500]
						],
						font: [{
							text: this.$t("homePage.home.normal"),
							size: 12,
							color: "#282828",
							width: 50
						}]
					},
					{
						type: "rect",
						coord: [
							[0, 510],
							[10, 10]
						],
						width: 2,
						rectType: 'fill',
						borderColor: "#E52F1B",
						background: "#E52F1B"
					},
					{
						type: "text",
						coord: [
							[20, 520]
						],
						font: [{
							text: this.$t("homePage.home.fault"),
							size: 12,
							color: "#282828",
							width: 50
						}]
					},
					{
						type: "rect",
						coord: [
							[0, 530],
							[10, 10]
						],
						width: 2,
						rectType: 'fill',
						borderColor: "#FFC900",
						background: "#FFC900"
					},
					{
						type: "text",
						coord: [
							[20, 540]
						],
						font: [{
							text: this.$t("homePage.home.overhaul"),
							size: 12,
							color: "#282828",
							width: 50
						}]
					},
					{
						type: "rect",
						coord: [
							[0, 550],
							[10, 10]
						],
						width: 2,
						rectType: 'fill',
						borderColor: "#15A1E3",
						background: "#15A1E3"
					},
					{
						type: "text",
						coord: [
							[20, 560]
						],
						font: [{
							text: this.$t("homePage.home.shutStan"),
							size: 12,
							color: "#282828",
							width: 50
						}]
					},

				],
				key: 0,
				noloading: false


			}
		},
		computed: {
			currentStation() {
				return this.vuex_currentStation;
			},
		},
		methods: {
			getData(val) {
				this.stationId = val
				const api = [this.getConfigData()]
				Promise.all(api).finally((result) => {
					this.canvasData = [...this.imageCanvasData, ...this
						.lineCanvasData, ...this.circleCanvasData, ...this.rectCanvasData, ...this
						.textCanvasData, ...this.defaultCanvasData
					]
					this.noloading = true
				});

			},
			statusColor(item, value) {
				// console.log(123,item,value);
				let result = null
				if (!item.color?.length) {
					return 'transparent'
				} else {
					for (let i = 0; i < item.color.length; i++) {
						if (isNaN(+item.color[i].max) && isNaN(+item.color[i].min)) {
							if (item.color[i].max === item.color[i].min) {
								if (item.color[i].max === value) {
									result = item.color[i].color
								} else {
									if (!result) {
										result = item.errorColor
									}
								}
							} else {
								result = item.errorColor
							}
						} else {
							if (+item.color[i].max === +item.color[i].min) {
								if (+item.color[i].min === +value && value !== '') {
									result = item.color[i].color
								} else {
									if (!result) {
										result = item.errorColor
									}
								}
							} else {
								if (+item.color[i].min <= +value && +item.color[i].max > +value && value !== '') {
									result = item.color[i].color
								} else {
									result = item.errorColor
								}
							}
						}
					}
				}

				return result
			},
			getConfigData() {
				this.key++
				let self = this;
				return new Promise((resolve, reject) => {
					self.$u.api.homePageData
						.GetFireConfig({
							stationId: this.stationId,
							pageNumber: 2,
							pageLocation: 'fire',
							isWeb: 2
						})
						.then((res) => {
							if (this.canvasData.length) {
								// this.$refs.canvas.clear()
								this.$refs.canvas.getSystemInfo()
							}
							this.textCanvasData = []
							this.rectCanvasData = []
							this.circleCanvasData = []
							res.data.forEach((item) => {
								let arr = []
								arr = JSON.parse(item.coordinate.replace(/'/g, '"'))
								if (item.type === 'text') {
									const obj = {
										type: "text",
										coord: [
											[arr[0], arr[1]]
										],
										font: [{
											text: item.value ? item.value ? item.value :
												'' : item.dataValue ? item.dataValue : '',
											size: 12,
											color: item.borderColor ? item.borderColor :
												this.statusColor(item.lightColorObject,
													item.dataValue)
										}]
									}
									this.textCanvasData.push(obj)

								}
								if (item.type === 'battery') {
									let arr = []
									arr = JSON.parse(item.coordinate.replace(/'/g, '"'))
									const objFill = {
										type: "rect",
										coord: [
											[arr[0] + 10, arr[1] - 8],
											[14, 6]
										],
										width: 2,
										rectType: 'fill',
										borderColor: item.borderColor,
										background: item.borderColor
									}
									const valueObj = {
										type: "rect",
										coord: [
											[arr[0], this.getY(arr[1] - 1, +item.dataValue ? +
												item.dataValue : 0)],
											[35, this.getHeight(+item.dataValue)]
										],
										width: 2,
										rectType: 'fill',
										borderColor: "#009458",
										background: "#009458"
									}
									const textObj = {
										type: "text",
										coord: [
											[arr[0] + 5, arr[1] + 30]
										],
										font: [{
											text: item.dataValue ? +item.dataValue + '%' :
												'0%',
											size: 12,
											color: '#000000'
										}]
									}
									const strokeFill = {
										type: "rect",
										coord: [
											[arr[0], arr[1]],
											[35, 40]
										],
										width: 2,
										rectType: 'stroke',
										borderColor: item.borderColor,
										background: "transparent"
									}
									this.rectCanvasData.push(textObj)
									this.rectCanvasData.push(objFill)
									this.rectCanvasData.push(valueObj)
									this.rectCanvasData.push(strokeFill)
								}
								if (item.type === 'break') {

									const obj = {
										type: "rect",
										coord: [
											[arr[0], arr[1]],
											JSON.parse(item.size),
										],
										width: 2,
										rectType: 'fill',
										borderColor: item.borderColor,
										background: this.statusColor(item.lightColorObject, item
											.dataValue)
									}
									this.rectCanvasData.push(obj)
								}


							})
							resolve();
						})
						.catch((err) => {
							reject("错误");
						});
				});
			},
			getY(height, val) {
				if (+val > 0 && +val <= 100) {
					return height + (43 - this.getHeight(val))
				} else {
					return 0
				}

			},
			getHeight(value) {
				return (value / 100) * 53
			}

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