<template>
	<div style="height:100%;">
		<div class="searchForm-header">
			<el-row>
				<el-select v-model="query.wareName" clearable placeholder="请选择库房" @change="change">
					<el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name">
					</el-option>
				</el-select>
				<el-input v-model="query.stackName" placeholder="垛位" style="width: 100px;"></el-input>
				<el-button type="info" @click="search">查询</el-button>
				<el-checkbox :v-model="showLayout" checked @change="changeShowLayout">显示库图</el-checkbox>
			</el-row>

			<el-row v-show="showLayout">
				<el-col :span="10">
					<div id="wareLayout" style=" margin:10px;width:600px; height: 300px;background-color: #DCDCDC;"></div>
				</el-col>
				<el-col :span="10">
					<div id="storeLayer" style=" margin:10px;width:600px; height: 300px;background-color: #DCDCDC;"></div>
				</el-col>
				<el-col :span="2" v-if="false">
					<el-row style=" margin:10px;">
						<el-button type="primary" @click="handleUp" v-if="isLayerShow">上移</el-button>
					</el-row>
					<el-row style=" margin:10px;">
						<el-button type="primary" @click="handleDown" v-if="isLayerShow">下移</el-button>
					</el-row>
					<el-row style=" margin:10px;">
						<el-button type="primary" @click="handleMove">转移</el-button>
					</el-row>
				</el-col>
			</el-row>
		</div>
 		<div class="tabledata-grid">
			<el-table :data="tableData" height="100%" border ref="multipleTable" @select="handleTableSelect">
				<!-- //@selection-change="handleTableSelectionChange" -->
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="layer" label="层数" width="60" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="stackName" label="垛位" width="120" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="materialName" label="物料名称" width="120" show-overflow-tooltip header-align="center">
				</el-table-column>

				<el-table-column prop="standard" label="钢种" width="120" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="plateNo" label="钢板号" width="200" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="model" label="规格型号" width="120" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="count" label="数量" width="120" show-overflow-tooltip align="right" header-align="center">
				</el-table-column>
				<el-table-column prop="weight" label="重量" width="120" show-overflow-tooltip align="right" header-align="center">
				</el-table-column>
				<el-table-column prop="customerName" label="客户" width="300" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column label="操作" min-width="20%" align="center">
					<template slot-scope="scope">
						<span>
							<el-button size="mini" @click="updateRecord(scope.row)">编辑</el-button>
						</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog :visible.sync="dialogVisible">
			<el-form :model="inStorageTable" label-position="right" label-width="80px" :rules="rules" ref="store">
				<el-row>
					<el-col :span="8">
						<el-form-item label="仓库" prop="wareName">
							<el-select v-model="inStorageTable.wareName" clearable placeholder="请选择" @change="changeWare">
								<el-option v-for="item in optionsWare" :key="item.id" :label="item.name" :value="item.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="垛位">
							<el-input v-model="inStorageTable.stackName"></el-input>

						</el-form-item>
					</el-col>
					<el-col :span="1">
						<el-button icon="el-icon-search" size="medium" type="primary" circle @click="showStack"></el-button>
					</el-col>
					<el-col :span="8">
						<el-form-item label="层数">
							<el-input v-model="inStorageTable.layer" :disabled="layerDisable"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="物料名称">
							<el-input v-model="inStorageTable.materialName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="钢种">
							<el-input v-model="inStorageTable.standard"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="1">
						<el-button icon="el-icon-search" size="medium" type="primary" circle @click="showMaterial"></el-button>
					</el-col>
					<el-col :span="8">
						<el-form-item label="钢板号">
							<el-input v-model="inStorageTable.plateNo"></el-input>
						</el-form-item>
					</el-col>

				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="规格型号">
							<el-input v-model="inStorageTable.model"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="数量">
							<el-input v-model="inStorageTable.count"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="重量">
							<el-input v-model="inStorageTable.weight"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="7">
						<el-form-item label="客户">
							<el-input v-model="inStorageTable.customerName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="1">
						<el-button icon="el-icon-search" size="medium" type="primary" circle @click="showCustomer"></el-button>
					</el-col>
					<el-col :span="16">
						<el-form-item label="备注">
							<el-input v-model="inStorageTable.remark" type="textarea"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="4">
						<el-button type="info" @click="updateIn">确定</el-button>
					</el-col>
					<el-col :span="4">
						<el-button type="info" @click="EscIn">取消</el-button>
					</el-col>
				</el-row>


			</el-form>

		</el-dialog>

		<popup-stack-with-select-ware :selectVareName="options" :fromStack="moveFromStack" ref="PopupStackWithSelectWare"
		 @receviceFromChild="receviceFromWareStack"></popup-stack-with-select-ware>
	</div>
</template>

<script>
	import axios from '@/axios'
	import zrender from 'zrender'
	import PopupStackWithSelectWare from '@/components/PopupStackWithSelectWare.vue'
	export default {
		components: {
			PopupStackWithSelectWare
		},
		data() {
			return {
				isLayerShow: true,
				showLayout: true,
				options: [],
				query: {
					wareName: '',
					stackName: ''
				},
				tableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [150, 100, 200],
				pageSize: 50,
				loading: true,
				selectRows: [],
				moveStack: {},
				moveStore: {},
				isLayer: "0",
				wareStack: [], //当前选中库房的所有垛位
				moveFromStack: {}, //移除垛位
				moveToStack: {}, //移入垛位

				//dialog
				dialogVisible: false,
				labelPosition: 'right',

				inStorageTable: {
					id: '',
					wareName: '',
					stackName: '',
					layer: 0,
					materialName: '',
					materialNo: '',
					standard: '',
					model: '',
					customerName: '',
					customerNo: '',
					count: '',
					weight: '',
					remark: '',
					plateNo: '',
				},
				rules: {
					wareName: [{
						required: true,
						message: '请选择库房',
						trigger: 'blur'
					}],
				},
				layerDisable: false,
				fileTemp: [],
				optionsWare: [],
			}
		},
		mounted() {
			this.getWare()
		},
		methods: {
			updateRecord(row) {
				this.dialogVisible = true
				this.inStorageTable = row
			},
			//确定按键
			updateIn() {
				this.dialogVisible = false
				var json = JSON.stringify(this.inStorageTable)
				var url = 'WareStore/modify.do'
				var param = {
					json: json,
				}
				axios.post(url, param).then(response => {
					if (response.data.code == '0') {
						this.$message({
							type: 'success',
							message: '操作成功!',
						});
					} else {
						this.$message({
							type: 'error',
							message: '操作失败' + response.data.msg
						});
					}

				});
			},
			//取消按键
			EscIn() {
				this.dialogVisible = false
			},
			//下拉框
			changeWare(val) {
				//this.getStack()
			},
			showStack() {
				this.$refs.PopupStack.show()
			},
			showMaterial() {
				this.$refs.PopupMaterial.show()
			},
			showCustomer() {
				this.$refs.PopupCustomer.show()
			},
			//倒垛模板
			getWare() {
				var url = 'MaintWare/queryByUserId.do'
				var param = {}
				axios.get(url, param).then(response => {
					this.options = response.data.data
					console.log("getWare() :" + JSON.stringify(this.options))
					if (response.data.data.length == 1) {
						this.query.wareName = response.data.data[0].name
						this.getAllStackByWareName(this.query.wareName)
					}
				});
			},
			change(val) {
				if (val != '') {
					this.getAllStackByWareName(val)
				}
			},
			getAllStackByWareName() {
				var url = 'MaintStack/queryByWareName.do'
				var param = {
					wareName: this.query.wareName
				}
				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) {
				this.moveStack = 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: '#FFFFFF',
							stroke: '#000000',

						}
					})
					rect.on('click', () => {
						this.query.stackName = data[i].name
						this.isLayer = data[i].isLayer
						this.getStoreByStackId()
						this.moveFromStack = data[i]

						this.setStackColor()
						this.setMoveButton()

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

			},


			getStoreByStackId(moveSelect) {
				var url = 'WareStore/queryByWareNameStackName.do'
				var param = {
					wareName: this.query.wareName,
					stackName: this.query.stackName
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.tableData = response.data.data
						this.selectRows = []
						if (this.isLayer == '1') {
							this.drawStoreLayer(response.data.data)
						} else {
							this.drawStoreNoLayer(response.data.data)
						}
						if (moveSelect) {
							this.$refs.multipleTable.clearSelection();
							for (let i = 0; i < this.tableData.length; i++) {
								for (let j = 0; j < moveSelect.length; j++) {
									if (moveSelect[j].layer === this.tableData[i].layer) {
										this.selectRows.push(this.tableData[i])
									}
								}
							}
							this.$nextTick(() => {
								this.toggleSelection(this.selectRows, true)
								this.setLayerColor()
							})

						}
					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data.msg,
						});
					}
				});
			},
			drawStoreLayer(data) {
				this.moveStore = 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: '#FFFFFF',
							stroke: '#000000',
						},
					}).on('click', (e) => {
						if (e.target.style.fill == '#FFFFFF') {
							this.selectRows.push(this.tableData[i])
							this.$nextTick(() => {
								this.toggleSelection(this.selectRows, true)
								this.setLayerColor()
							})
						} else {
							for (var j = 0; j < this.selectRows.length; j++) {
								if (this.selectRows[j] === this.tableData[i]) {
									this.selectRows.splice(j, 1);
								}
							}
							this.$nextTick(() => {
								this.toggleSelection([this.tableData[i]], false)
								this.setLayerColor()
							})
						}
					});
					this.moveStore.add(rect);
				}
			},
			drawStoreNoLayer(data) {
				this.moveStore = zrender.init(document.getElementById('storeLayer'));
				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: '#FFFFFF',
							stroke: '#000000',

						},

					})
					rect.on('click', (e) => {
						if (e.target.style.fill == '#FFFFFF') {
							this.selectRows.push(this.tableData[i])
							this.$nextTick(() => {
								this.toggleSelection(this.selectRows, true)
								this.setLayerColor()
							})
						} else {
							for (var j = 0; j < this.selectRows.length; j++) {
								if (this.selectRows[j] === this.tableData[i]) {
									this.selectRows.splice(j, 1);
								}
							}
							this.$nextTick(() => {
								this.toggleSelection([this.tableData[i]], false)
								this.setLayerColor()
							})
						}



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

			},

			changeShowLayout() {
				this.showLayout = !this.showLayout
			},
			search() {
				//this.currentPage = 1
				//this.getTableData()
			},
			handleTableSelectionChange(val) {
				this.selectRows = val
				this.setLayerColor()
			},
			toggleSelection(rows, selected) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, selected);
					});
				}
			},
			setLayerColor() {
				if (this.selectRows.length == 0) {
					for (let i = 0; i < this.moveStore.storage._roots.length; i++) {
						this.moveStore.storage._roots[i].attr('style', {
							fill: '#FFFFFF',
						})
					}
				} else {
					for (let i = 0; i < this.moveStore.storage._roots.length; i++) {
						for (let j = 0; j < this.selectRows.length; j++) {
							if (this.tableData[i] === this.selectRows[j]) {
								this.moveStore.storage._roots[i].attr('style', {
									fill: '#FFFF00',
								})
								break;
							} else {
								this.moveStore.storage._roots[i].attr('style', {
									fill: '#FFFFFF',
								})
							}
						}

					}
				}
			},
			handleUp() {
				if (this.selectRows.length < 1) {
					this.$message({
						type: 'error',
						message: '至少选择一条数据！',
					});
					return
				} else {
					var url = 'WareMove/up.do'
					var param = {
						json: JSON.stringify(this.selectRows),
					}
					axios.post(url, param).then(response => {
						if (response.data.code == 0) {

							//this.getTableData()
							this.getStoreByStackId(response.data.data)

						} else {
							this.$message({
								type: 'error',
								message: '操作失败；' + response.data.msg,
							});
						}
					});
				}
			},
			handleDown() {
				if (this.selectRows.length < 1) {
					this.$message({
						type: 'error',
						message: '至少选择一条数据！',
					});
					return
				} else {
					var url = 'WareMove/down.do'
					var param = {
						json: JSON.stringify(this.selectRows),
					}
					axios.post(url, param).then(response => {
						if (response.data.code == 0) {

							//this.getTableData()
							this.getStoreByStackId(response.data.data)

						} else {
							this.$message({
								type: 'error',
								message: '操作失败；' + response.data.msg,
							});
						}
					});
				}
			},

			handleMove() {

				if (this.selectRows.length < 1) {
					this.$message({
						type: 'error',
						message: '至少选择一条数据！',
					});
					return
				} else {
					var url = 'WareMove/moveCheck.do'
					var param = {
						json: JSON.stringify(this.selectRows),
					}
					axios.post(url, param).then(response => {
						if (response.data.code == 0) {

							this.$refs.PopupStackWithSelectWare.show()
							//this.getStoreByStackId(response.data.data)

						} else {
							this.$message({
								type: 'error',
								message: '操作失败；' + response.data.msg,
							});
						}
					});
				}
			},
			receviceFromWareStack(stack) {
				//console.log(stack.name)
				this.moveToStack = stack


				var url = 'WareMove/move.do'
				var param = {
					json: JSON.stringify(this.selectRows),
					from: JSON.stringify(this.moveFromStack),
					to: JSON.stringify(this.moveToStack),
				}
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.getStoreByStackId([])
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
				});





			},
			handleTableSelect(selection, row) {
				this.selectRows = selection
				this.setLayerColor()
			},
			setStackColor() {
				for (let i = 0; i < this.moveStack.storage._roots.length; i++) {
					if (this.wareStack[i] === this.moveFromStack) {
						this.moveStack.storage._roots[i].attr('style', {
							fill: '#FFFF00',
						})
					} else {
						this.moveStack.storage._roots[i].attr('style', {
							fill: '#FFFFFF',
						})
					}
				}
			},
			setMoveButton() {
				if (this.moveFromStack.isLayer == '1') {
					this.isLayerShow = true
				} else {
					this.isLayerShow = false
				}
			}
		}
	}
</script>

<style>
.searchForm-header{
		height: auto;
		margin-left: 10px;
	}
	.tabledata-grid{
		font-size: 20px;
		margin-left: 5px;
		height: calc(100% - 100px);

	}
</style>
