<template>
	<div>
		<el-dialog title="添加信息" :visible.sync="dialogVisible" width="700px">
			<el-row>
				<el-select v-model="wareId" clearable placeholder="请选择" @change="changeWare">
					<el-option v-for="item in wares" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
				<el-input v-model="layer" style="width: 200px;" v-show="layerVisible"></el-input>
				<el-button type="success" @click="handleComfirm">确定</el-button>
			</el-row>
			<el-row>
				<div id="popMoveWareLayout" style=" margin:10px;width:600px; height: 300px;background-color: #00FFFF;"></div>
			</el-row>
			<el-row>
					<el-input v-model="deficitReason" type="textarea" style=" margin:10px;width:600px;"></el-input>
			</el-row>
		</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: {
			wares: {
				type: Array
			},
			fromStack: {}
		},
		data() {
			return {
				deficitReason:'',
				wareId: '',
				wareStack: [],
				dialogVisible: false,
				layerVisible: false,
				popMoveWare: {},
				popMoveStore: {},
				toStack: {},
				layer: 0,
			};
		},
		methods: {
			show() {

				if (this.wares.length == 1) {
					this.wareId = this.wares[0].id
				}

				// 				if (this.fromStack) {
				// 					if (this.fromStack.isLayer == '2') {
				// 						this.layerVisible = true
				// 					} else {
				// 						this.layerVisible = false
				// 					}
				// 				}
				// 
				this.dialogVisible = true
				this.getAllStackByWareId()

			},
			getAllStackByWareId() {
				//console.log(this.wareName)
				var url = 'MaintStack/queryByWareId.do'
				var param = {
					wareId: this.wareId
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.wareStack = response.data.data
						this.drawWareLayout(response.data.data)
					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data.msg,
						});
					}
				});
			},
			drawWareLayout(data) {
				//console.log("drawWareLayout(data)");
				this.popMoveWare = zrender.init(document.getElementById('popMoveWareLayout'));
				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', (e) => {
						//this.getStoreByStackId(data[i])
						this.toStack = data[i]
						if (this.toStack) {
							if (this.toStack.isLayer == '2') {
								this.layerVisible = true
							} else {
								this.layerVisible = false
							}
						}
						this.setColor()
					});
					// rect.on('dblclick', () => {
					// 	console.log("dblclick:" + JSON.stringify(data[i]))
					// 	this.$emit('receviceFromChild', data[i]);
					// 	this.dialogVisible = false
					// });
					this.popMoveWare.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.popMoveStore = zrender.init(document.getElementById('popMoveStoreLayer'));
				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.popMoveStore.add(rect);
				}

			},



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

				for (let i = 0; i < data.length; i++) {
					var currentRow = parseInt(i / 10)
					var currentCol = Math.floor(i % 10)
					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.popMoveStore.add(rect);
				}

			},
			changeWare(val) {
				this.getAllStackByWareName()
			},
			setColor() {
				for (let i = 0; i < this.popMoveWare.storage._roots.length; i++) {

					if (this.wareStack[i] === this.toStack) {
						this.popMoveWare.storage._roots[i].attr('style', {
							fill: this.stackSelectedColor,
						})
					} else {
						this.popMoveWare.storage._roots[i].attr('style', {
							fill: this.stackColor,
						})
					}
				}
			},
			handleComfirm() {
				//console.log(JSON.stringify(this.toStack))
				if (this.fromStack) {
					// if ((this.fromStack.isLayer != this.toStack.isLayer != '0') || (this.fromStack.isLayer == '0' && this.toStack
					// 		.isLayer == '0')) {
					if (this.fromStack.isLayer == this.toStack.isLayer) {
						this.$emit('receviceFromChild', this.toStack, this.layer);
						this.dialogVisible = false
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + '垛位分层设置不一致，不允许转移'
						});
					}
				} else {
					this.$emit('receviceFromChild', this.toStack, this.layer,this.deficitReason);
					this.dialogVisible = false
				}
			}
		},
		mounted() {

		}
	}
</script>
