<template>
	<div style="text-align: left;">
		<el-row>

			<el-select size="small" v-model="queryWare" clearable placeholder="请选择" @change="change" @clear="clear">
				<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
				</el-option>
			</el-select>
			<el-input v-model="query" size="small" placeholder="请输入名称或编码" style="width: 300px;"></el-input>
			<el-button type="info" size="small" @click="search">查询</el-button>
			<el-button type="primary" size="small" @click="handleAdd">新增</el-button>
		</el-row>

		<div id="wareLayout" style=" margin:10px;width:600px; height: 300px;background-color: #00FFFF;" v-show="isShowLayout"></div>


		<el-table v-loading="loading" :data="tableData" border>
			<el-table-column prop="id" label="编号" width="60" v-if="isShow">
			</el-table-column>
			<el-table-column prop="ware.name" label="所属库房" width="120">
			</el-table-column>
			<el-table-column prop="name" label="垛位名称" width="120">
			</el-table-column>
			<el-table-column prop="code" label="垛位编码" width="120">
			</el-table-column>
			<el-table-column prop="stackX" label="起始X" width="120">
			</el-table-column>
			<el-table-column prop="stackY" label="起始Y" width="120">
			</el-table-column>
			<el-table-column prop="width" label="垛位长度" width="120">
			</el-table-column>
			<el-table-column prop="height" label="垛位宽度" width="120">
			</el-table-column>
			<el-table-column prop="isLayer" label="是否分层" width="120" :formatter="typeFormatter">
			</el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
		</el-pagination>


		<el-dialog title="库房明细" :visible.sync="dialogVisible" width="500px">
			<el-form :model="stack" label-width="100px">
				<el-form-item label="id" v-if="isShow">
					<el-input v-model="stack.id"></el-input>
				</el-form-item>
				<el-form-item label="所属库房">
					<el-select v-model="stack.ware.id" clearable placeholder="请选择" style="width: 100%;">
						<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>

				</el-form-item>
				<el-form-item label="垛位名称">
					<el-input v-model="stack.name"></el-input>
				</el-form-item>
				<el-form-item label="垛位编码">
					<el-input v-model="stack.code"></el-input>
				</el-form-item>
				<el-form-item label="起始X">
					<el-input v-model="stack.stackX"></el-input>
				</el-form-item>
				<el-form-item label="起始Y">
					<el-input v-model="stack.stackY"></el-input>
				</el-form-item>
				<el-form-item label="垛位长度">
					<el-input v-model="stack.width"></el-input>
				</el-form-item>
				<el-form-item label="垛位宽度">
					<el-input v-model="stack.height"></el-input>
				</el-form-item>
				<el-form-item label="是否分层">
					<!-- 	<el-radio-group v-model="stack.isLayer" >
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
					 -->
					<el-radio v-model="stack.isLayer" label="0">不分层</el-radio>
					<el-radio v-model="stack.isLayer" label="1">自动分层</el-radio>
					<el-radio v-model="stack.isLayer" label="2">手动分层</el-radio>
				</el-form-item>

				<el-form-item>
					<el-button type="success" @click="handleSave">保存</el-button>
					<el-button @click="handleCancelSave">取消</el-button>
				</el-form-item>
			</el-form>

		</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
			})
		},
		components: {

		},
		data() {
			return {
				//表格初始化参数
				tableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [50, 100, 200,500],
				pageSize: 50,
				//查询条件
				query: '',
				queryWare: '',
				//录入框
				dialogVisible: false,
				stack: {
					id: '',
					name: '',
					code: '',
					ware: {
						id: '',
						name: ''
					},
					stackX: 0,
					stackY: 0,
					width: 0,
					height: 0,
					isLayer: "0"
				},
				isShow: false,
				isShowLayout: false,
				loading: true,
				options: [],
				maintStackLayout: {},
				isMouseDown: false,
				isChild: false,

				rectNew: {},
				startX: 0,
				startY: 0,
				rectSelect: {},
				disX: 0,
				disY: 0,
			}
		},
		//界面渲染完毕调用   初始化表格参数
		mounted() {

			// this.zr = zrender.init(document.getElementById('wareLayout')).on('click', () => {
			// 	console.log("zr click")
			// });
			this.getTableData()
			this.getAllWare()
		},
		methods: {
			typeFormatter: function(row, column) {
				switch (row.isLayer) {
					case "0":
						return "不分层";
						break;
					case "1":
						return "自动分层";
						break;
					case "2":
						return "手动分层";
						break;
				}
			},
			// 获取table数据
			getTableData() {
				this.loading = true
				var url = 'MaintStack/query.do'
				for(var i = 0;i < this.options.length;i++){
					if(this.options[i].id == this.queryWare){
						this.queryByWareId = this.options[i].name
					}
				}
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					query: this.query,
					queryWare: this.queryByWareId
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.tableData = response.data.data.list
						this.totalRows = response.data.data.total
						//this.drawWareLayout()
					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data.msg,
						});
					}
					this.loading = false
				});
			},
			getAllWare() {
				var url = 'MaintWare/queryByUserId.do'
				var param = {}
				axios.get(url, param).then(response => {
					this.options = response.data.data
				});
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},
			//保存按钮事件
			handleSave() {
				var tempStack = this.stack;
				this.stack.ware.name = this.stack.ware.id;
				var json = JSON.stringify(tempStack)
				var url = 'MaintStack/save.do'
				var param = {
					json: json
				}
				this.loading = true
				axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						this.$message({
							type: 'success',
							message: '保存成功!',
						});
						this.getTableData()
						this.getAllStackByWareName(this.queryWare)
						this.dialogVisible = false
						this.loading = false
					} else {
						this.$message({
							type: 'error',
							message: '保存失败' + response.data.msg,
						});
						this.loading = false
					}
					// loading.close();
				});



			},
			//保存取消按钮事件   关闭编辑对话框
			handleCancelSave(row) {
				this.dialogVisible = false
			},
			// 新增按钮事件
			handleAdd() {

				this.dialogVisible = true
				this.stack = {
					id: '',
					name: '',
					code: '',
					ware: {
						id: this.queryWare,
						name: this.queryWare
					},
					stackX: 0,
					stackY: 0,
					width: 0,
					height: 0,
					isLayer: "0"
				}
			},
			// 编辑按钮事件
			handleEdit(row) {
				var tempRow = row;
				tempRow.ware.name = tempRow.ware.id;
				this.dialogVisible = true
				this.stack = tempRow
			},

			// 删除按钮事件
			handleDelete(id) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					var url = 'MaintStack/remove.do'
					var param = {
						id: id
					}
					axios.post(url, param).then(response => {
						if (response.data.code == 0) {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.getTableData()
						} else {
							this.$message({
								type: 'error',
								message: '删除失败;' + response.data.msg
							});
						}
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 查询按钮事件
			search() {
				this.currentPage = 1
				this.getTableData()
			},
			change(val) {
				//console.log("change(val)"+val)

				if (val != '') {
					this.isShowLayout = true
					this.getTableData()
					this.getAllStackByWareName(val)
				}
			},
			clear() {
				this.isShowLayout = false
			},
			getAllStackByWareName(val) {
				var url = 'MaintStack/queryByWareId.do'
				var param = {
					wareId: val
				}
				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) {
				this.maintStackLayout = zrender.init(document.getElementById('wareLayout'))
				this.maintStackLayout.on('mousedown', (e) => {
					this.isMouseDown = true
					var startX = 0
					var endX = 0
					var startY = 0
					var endY = 0
					var width = 0
					var height = 0
					for (let i = 0; i < this.maintStackLayout.storage._roots.length; i++) {
						startX = this.maintStackLayout.storage._roots[i].shape.x
						startY = this.maintStackLayout.storage._roots[i].shape.y
						endX = this.maintStackLayout.storage._roots[i].shape.x + this.maintStackLayout.storage._roots[i].shape.width
						endY = this.maintStackLayout.storage._roots[i].shape.y + this.maintStackLayout.storage._roots[i].shape.height
						width = this.maintStackLayout.storage._roots[i].shape.width
						height = this.maintStackLayout.storage._roots[i].shape.height
						if (e.offsetX >= startX && e.offsetX <= endX && e.offsetY >= startY && e.offsetY <= endY) {
							console.log(i)
							this.isChild = true || this.isChild
							this.rectSelect = this.maintStackLayout.storage._roots[i]
							this.stackSelect = data[i]
							this.disX = e.offsetX - this.rectSelect.shape.x
							this.disY = e.offsetY - this.rectSelect.shape.y
							break
						}
					}

					if (this.isChild) {
						console.log("click rect:" + this.isChild)
					} else {

						this.startX = e.offsetX
						this.startY = e.offsetY
						this.rectNew = new zrender.Rect({
							shape: {
								x: e.offsetX, //data[i].stackX * 600 / data[i].ware.width,
								y: e.offsetY, //data[i].stackY * 300 / data[i].ware.height,
								width: 1, // data[i].width * 600 / data[i].ware.width,
								height: 1, //data[i].height * 300 / data[i].ware.height,
							},
							style: {
								text: 'A', //data[i].name,
								textAlign: 'center',
								textVerticalAlign: 'middle',
								fill: this.stackColor,
								stroke: '#000000',
							},
						})
						this.maintStackLayout.add(this.rectNew);
					}

				});
				this.maintStackLayout.on('mousemove', (e) => {

					if (this.isMouseDown) {

						if (this.isChild) {
							//console.log(" this.rectSelect.shape.x：" + this.rectSelect.shape.x)
							this.rectSelect.attr('shape', {
								x: e.offsetX - this.disX,
								y: e.offsetY - this.disY
							})
						} else {
							var width = e.offsetX - this.startX
							var height = e.offsetY - this.startY
							this.rectNew.attr('shape', {
								width: width,
								height: height
							})
						}
					}

				});
				this.maintStackLayout.on('mouseup', (e) => {
					this.isMouseDown = false
					if (this.isChild) {
						this.stackSelect.stackX = e.offsetX - this.disX
						this.stackSelect.stackY = e.offsetY - this.disY
						//
						this.stack = this.stackSelect
						console.log(JSON.stringify(this.stack))
						this.handleSave()
					} else {
						var width = e.offsetX - this.startX
						var height = e.offsetY - this.startY
						this.dialogVisible = true
						this.stack = {
							id: '',
							name: '',
							code: '',
							ware: {
								id: this.queryWare,
								name: this.queryWare
							},
							stackX: this.startX,
							stackY: this.startY,
							width: width,
							height: height,
							isLayer: "0"
						}
					}
					this.isChild = false
				});
				for (let i = 0; i < data.length; i++) {
					this.rectNew = 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('mousedown', (e) => {
					// 	this.isMouseDown = true
					// })
					// rect.on('mousemove', (e) => {
					// 	if (this.isMouseDown) {
					// 		 var disX = e.offsetX - e.target.shape.x
					// 		 var disY = e.offsetY - e.target.shape.y
					// 		e.target.attr('shape', {
					// 			x: e.target.offsetX +disX,
					// 			y: e.target.offsetY+disY
					// 		})
					// 	}
					// });
					// rect.on('mouseup', (e) => {
					// 	this.isMouseDown = false
					// })
					this.maintStackLayout.add(this.rectNew);
				}
			},

		}
	}
</script>
<style>
    .el-select-dropdown .el-scrollbar .el-scrollbar__wrap
    {
        overflow: scroll!important;
    }
	.el-upload-list__item-name{
		background-color: #9f9;
	}
</style>