<template>
	<div>
		<el-dialog title="添加信息" :visible.sync="dialogVisible" width="700px">
			<div id="wareLayout" style=" margin:10px;width:600px; height: 300px;background-color: #00FFFF;"></div>
			<div id="storeLayer" style=" margin:10px;width:600px; height: 300px;background-color: #00FFFF;"></div>
		</el-dialog>
	</div>
</template>

<script>
	import axios from '@/axios'
	import zrender from 'zrender'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState({
					wareBackgroundColor: state => state.color.wareBackgroundColor,
					stackColor: state => state.color.stackColor,
					stackSelectedColor: state => state.color.stackSelectedColor
				})
			},
		props: {
			wareName: ''
		},
		data() {
			return {
				dialogVisible: false,
				popWare: {},
				popStore: {},
			};
		},
		methods: {
			show() {
				this.dialogVisible = true
				this.getAllStackByWareName()
			},
			getAllStackByWareName() {
				//console.log(this.wareName)
				var url = 'MaintStack/queryByWareName.do'
				var param = {
					wareName: this.wareName
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.drawWareLayout(response.data.data)
					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data.msg,
						});
					}
				});
			},
			drawWareLayout(data) {
				//console.log("drawWareLayout(data)");
				this.popWare = zrender.init(document.getElementById('wareLayout'));
				for (let i = 0; i < data.length; i++) {
					var rect = new zrender.Rect({
						shape: {
							x: data[i].stackX ,// * 600 / data[i].ware.width,
							y: data[i].stackY ,// * 300 / data[i].ware.height,
							width: data[i].width ,// * 600 / data[i].ware.width,
							height: data[i].height ,// * 300 / data[i].ware.height,
						},
						style: {
							text: data[i].name,
							textAlign: 'center',
							textVerticalAlign: 'middle',
							fill: this.stackColor,
							stroke: '#000000',

						}
					})
					rect.on('click', () => {
						this.getStoreByStackId(data[i])
						this.setStackColor(data, data[i])
					});
					rect.on('dblclick', () => {
						console.log("dblclick:" + JSON.stringify(data[i]))
						this.$emit('receviceFromChild', data[i]);
						this.dialogVisible = false
					});
					this.popWare.add(rect);
				}

			},


			getStoreByStackId(row) {
				//console.log("getStoreByStackId(row)");
				var url = 'WareStore/queryByWareNameStackName.do'
				var param = {
					wareName: this.wareName,
					stackName: row.name
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						if (row.isLayer == '1') {
							this.drawStoreLayer(response.data.data)
						} else {
							this.drawStoreNoLayer(response.data.data)
						}

					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data.msg,
						});
					}
				});
			},
			drawStoreLayer(data) {
				//console.log("drawStoreLayer(data)");
				this.popStore = zrender.init(document.getElementById('storeLayer'));
				for (let i = 0; i < data.length; i++) {
					var rect = new zrender.Rect({
						shape: {
							x: 0, // data[i].ware.width,
							y: i * 30, // data[i].ware.height,
							width: 400, //* 600 / data[i].ware.width,
							height: 20 //* 300 / data[i].ware.height,
						},
						style: {
							text: data[i].materialName + '   ' + data[i].plateNo + '   ' + data[i].model,
							textAlign: 'center',
							textVerticalAlign: 'middle',
							fill: this.stackColor,
							stroke: '#000000',

						}
					})
					this.popStore.add(rect);
				}

			},



			drawStoreNoLayer(data) {
				//console.log("drawStoreLayer(data)");
				this.popStore = zrender.init(document.getElementById('storeLayer'));

				for (let i = 0; i < data.length; i++) {
					var currentRow = parseInt(i / 10)
					var currentCol = Math.floor(i % 10)
					console.log("currentRow:" + currentCol)
					console.log("currentCol:" + currentRow)
					console.log("x:" + 60 * currentCol)
					console.log("y:" + 60 * currentRow)
					// console.log("x:"+ 60*currentCol)
					// console.log("x:"+ 60*currentCol)
					var rect = new zrender.Rect({

						shape: {
							x: 60 * currentCol, // data[i].ware.width,
							y: 60 * currentRow, // data[i].ware.height,
							width: 60, //* 600 / data[i].ware.width,
							height: 60 //* 300 / data[i].ware.height,
						},
						style: {
							text: data[i].materialName + ' \n' + data[i].weight + '吨\n' + data[i].count + '件',
							textAlign: 'center',
							textVerticalAlign: 'middle',
							fill: this.stackColor,
							stroke: '#000000',

						}
					})
					this.popStore.add(rect);
				}

			},
			setStackColor(data, stack) {
				for (let i = 0; i < this.popWare.storage._roots.length; i++) {
					if (data[i] === stack) {
						this.popWare.storage._roots[i].attr('style', {
							fill: this.stackSelectedColor,
						})
					} else {
						this.popWare.storage._roots[i].attr('style', {
							fill: this.stackColor,
						})
					}
				}
			},

		},
		mounted() {

		}
	}
</script>
