<!--
 * @Author: zwq
 * @Date: 2024-01-17 09:58:41
 * @LastEditors: zwq
 * @LastEditTime: 2024-06-04 15:58:23
 * @Description:
-->
<template>
	<div class="app-container">
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
		<div class="tips">
			<el-tag effect="dark" color="#16DC09" style="border: none">满</el-tag>
			<el-tag effect="dark" color="#d3d3d3" style="border: none">空</el-tag>
			<el-tag effect="dark" color="#7362F3" style="border: none">锁</el-tag>
		</div>
		<div class="mainbody">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-divider class="divider" content-position="left">
						二次分拣区
					</el-divider>
					<div v-for="i in 5" :key="i + 'G'">
						<el-row style="margin-bottom: 10px" type="flex" class="flex-warp">
							<div
								class="dashboard-layout-item"
								v-for="j in wareData
									.filter(
										(item) =>
											item.agvGroundCode.substr(1, 2) == 6 - i &&
											item.region === 4
									)
									.reverse()"
								:key="j.id"
								:title="j.lineEdgeLibraryCode">
								<el-popover
									placement="top-start"
									:title="j.lineEdgeLibraryCode"
									width="200"
									trigger="hover">
									<div class="point" />
									托盘编码: {{ j.trayCode }}
									<br />
									<div class="point" />
									Agv地码: {{ j.agvGroundCode }}
									<br />
									<el-button
										@click="lState(j.id)"
										v-hasPermi="['asrs:warehouse-line-monitoring:change']"
										type="text">
										改变库位状态
									</el-button>
									<div
										slot="reference"
										class="hoverDiv"
										:style="{
											cursor:
												j.lineEdgeLibraryState === 1
													? 'not-allowed'
													: 'pointer',
											background: bgColor[j.lineEdgeLibraryState],
										}"></div>
								</el-popover>
							</div>
						</el-row>
					</div>
				</el-col>
				<el-col :span="12">
					<el-divider class="divider" content-position="left">
						自动包装区
					</el-divider>
					<el-row style="margin-bottom: 10px" type="flex" class="flex-warp">
						<div
							class="dashboard-layout-item"
							v-for="j in wareData.filter((item) => item.region == 8).reverse()"
							:key="j.id"
							:title="j.lineEdgeLibraryCode">
							<el-popover
								placement="top-start"
								:title="j.lineEdgeLibraryCode"
								width="200"
								trigger="hover">
								<div class="point" />
								托盘编码: {{ j.trayCode }}
								<br />
								<div class="point" />
								Agv地码: {{ j.agvGroundCode }}
								<br />
								<el-button
									@click="lState(j.id)"
									v-hasPermi="['asrs:warehouse-line-monitoring:change']"
									type="text">
									改变库位状态
								</el-button>
								<div
									slot="reference"
									class="hoverDiv"
									:style="{
										cursor:
											j.lineEdgeLibraryState === 1 ? 'not-allowed' : 'pointer',
										background: bgColor[j.lineEdgeLibraryState],
									}"></div>
							</el-popover>
						</div>
					</el-row>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-divider class="divider" content-position="left">
						一次分拣区
					</el-divider>
					<div v-for="i in 7" :key="i + 'F'">
						<el-row style="margin-bottom: 10px" type="flex" class="flex-warp">
							<!-- <div
						class="dashboard-layout-item"
						style="opacity: 0"
						v-if="i === 7" /> -->
							<div
								class="dashboard-layout-item"
								v-for="j in wareData
									.filter(
										(item) =>
											item.agvGroundCode.substr(1, 2) == 8 - i &&
											item.region === 2
									)
									.reverse()"
								:key="j.id"
								:title="j.lineEdgeLibraryCode">
								<el-popover
									placement="top-start"
									:title="j.lineEdgeLibraryCode"
									width="200"
									trigger="hover">
									<div class="point" />
									托盘编码: {{ j.trayCode }}
									<br />
									<div class="point" />
									Agv地码: {{ j.agvGroundCode }}
									<br />
									<el-button
										@click="lState(j.id)"
										v-hasPermi="['asrs:warehouse-line-monitoring:change']"
										type="text">
										改变库位状态
									</el-button>
									<div
										slot="reference"
										class="hoverDiv"
										:style="{
											cursor:
												j.lineEdgeLibraryState === 1
													? 'not-allowed'
													: 'pointer',
											background: bgColor[j.lineEdgeLibraryState],
										}"></div>
								</el-popover>
							</div>
						</el-row>
					</div>
				</el-col>
				<el-col :span="12">
					<el-divider class="divider" content-position="left">
						手动包装区
					</el-divider>
					<div v-for="i in 2" :key="i + 'E'">
						<el-row style="margin-bottom: 10px" type="flex" class="flex-warp">
							<div
								class="dashboard-layout-item"
								v-for="j in wareData
									.filter(
										(item) =>
											item.agvGroundCode.substr(1, 2) == i + 1 &&
											item.region === 5
									)
									.reverse()"
								:key="j.id"
								:title="j.lineEdgeLibraryCode">
								<el-popover
									placement="top-start"
									:title="j.lineEdgeLibraryCode"
									width="200"
									trigger="hover">
									<div class="point" />
									托盘编码: {{ j.trayCode }}
									<br />
									<div class="point" />
									Agv地码: {{ j.agvGroundCode }}
									<br />
									<el-button
										@click="lState(j.id)"
										v-hasPermi="['asrs:warehouse-line-monitoring:change']"
										type="text">
										改变库位状态
									</el-button>
									<div
										slot="reference"
										class="hoverDiv"
										:style="{
											cursor:
												j.lineEdgeLibraryState === 1
													? 'not-allowed'
													: 'pointer',
											background: bgColor[j.lineEdgeLibraryState],
										}"></div>
								</el-popover>
							</div>
						</el-row>
					</div>
				</el-col>
			</el-row>
			<el-divider class="divider" content-position="left">
				一次分切区
			</el-divider>
			<el-row style="margin-bottom: 10px" type="flex" class="flex-warp">
				<div
					class="dashboard-layout-item"
					v-for="j in wareData.filter((item) => item.region == 1).reverse()"
					:key="j.id"
					:title="j.lineEdgeLibraryCode">
					<el-popover
						placement="top-start"
						:title="j.lineEdgeLibraryCode"
						width="200"
						trigger="hover">
						<div class="point" />
						托盘编码: {{ j.trayCode }}
						<br />
						<div class="point" />
						Agv地码: {{ j.agvGroundCode }}
						<br />
						<el-button
							@click="lState(j.id)"
							v-hasPermi="['asrs:warehouse-line-monitoring:change']"
							type="text">
							改变库位状态
						</el-button>
						<div
							slot="reference"
							class="hoverDiv"
							:style="{
								cursor:
									j.lineEdgeLibraryState === 1 ? 'not-allowed' : 'pointer',
								background: bgColor[j.lineEdgeLibraryState],
							}"></div>
					</el-popover>
				</div>
				<el-divider direction="vertical"></el-divider>
				<div
					class="dashboard-layout-item"
					v-for="j in wareData.filter((item) => item.region == 9).reverse()"
					:key="j.id"
					:title="j.lineEdgeLibraryCode">
					<el-popover
						placement="top-start"
						:title="j.lineEdgeLibraryCode"
						width="200"
						trigger="hover">
						<div class="point" />
						托盘编码: {{ j.trayCode }}
						<br />
						<div class="point" />
						Agv地码: {{ j.agvGroundCode }}
						<div
							slot="reference"
							class="hoverDiv"
							:style="{
								cursor:
									j.lineEdgeLibraryState === 1 ? 'not-allowed' : 'pointer',
								background: bgColor[j.lineEdgeLibraryState],
							}"></div>
					</el-popover>
				</div>
				<el-divider direction="vertical"></el-divider>
				<div
					class="dashboard-layout-item"
					v-for="j in wareData.filter((item) => item.region == 10).reverse()"
					:key="j.id"
					:title="j.lineEdgeLibraryCode">
					<el-popover
						placement="top-start"
						:title="j.lineEdgeLibraryCode"
						width="200"
						trigger="hover">
						<div class="point" />
						托盘编码: {{ j.trayCode }}
						<br />
						<div class="point" />
						Agv地码: {{ j.agvGroundCode }}
						<div
							slot="reference"
							class="hoverDiv"
							:style="{
								cursor:
									j.lineEdgeLibraryState === 1 ? 'not-allowed' : 'pointer',
								background: bgColor[j.lineEdgeLibraryState],
							}"></div>
					</el-popover>
				</div>
				<el-divider direction="vertical"></el-divider>
				<div
					class="dashboard-layout-item"
					v-for="j in wareData.filter((item) => item.region == 11).reverse()"
					:key="j.id"
					:title="j.lineEdgeLibraryCode">
					<el-popover
						placement="top-start"
						:title="j.lineEdgeLibraryCode"
						width="200"
						trigger="hover">
						<div class="point" />
						托盘编码: {{ j.trayCode }}
						<br />
						<div class="point" />
						Agv地码: {{ j.agvGroundCode }}
						<div
							slot="reference"
							class="hoverDiv"
							:style="{
								cursor:
									j.lineEdgeLibraryState === 1 ? 'not-allowed' : 'pointer',
								background: bgColor[j.lineEdgeLibraryState],
							}"></div>
					</el-popover>
				</div>
			</el-row>
			<el-divider class="divider" content-position="left">
				二次分切区
			</el-divider>
			<el-row style="margin-bottom: 10px" type="flex" class="flex-warp">
				<div
					class="dashboard-layout-item interval"
					v-for="j in wareData.filter((item) => item.region == 3).reverse()"
					:key="j.id"
					:title="j.lineEdgeLibraryCode">
					<el-popover
						placement="top-start"
						:title="j.lineEdgeLibraryCode"
						width="200"
						trigger="hover">
						<div class="point" />
						托盘编码: {{ j.trayCode }}
						<br />
						<div class="point" />
						Agv地码: {{ j.agvGroundCode }}
						<br />
						<el-button
							@click="lState(j.id)"
							v-hasPermi="['asrs:warehouse-line-monitoring:change']"
							type="text">
							改变库位状态
						</el-button>
						<div
							slot="reference"
							class="hoverDiv"
							:style="{
								cursor:
									j.lineEdgeLibraryState === 1 ? 'not-allowed' : 'pointer',
								background: bgColor[j.lineEdgeLibraryState],
							}"></div>
					</el-popover>
				</div>
			</el-row>
			<el-divider class="divider" content-position="left">涂覆区</el-divider>
			<div v-for="i in 4" :key="i + 'C'">
				<el-row style="margin-bottom: 10px" type="flex" class="flex-warp">
					<div
						class="dashboard-layout-item"
						v-for="j in wareData
							.filter(
								(item) =>
									item.agvGroundCode.substr(1, 2) == i && item.region === 6
							)
							.reverse()"
						:key="j.id"
						:title="j.lineEdgeLibraryCode">
						<el-popover
							placement="top-start"
							:title="j.lineEdgeLibraryCode"
							width="200"
							trigger="hover">
							<div class="point" />
							托盘编码: {{ j.trayCode }}
							<br />
							<div class="point" />
							Agv地码: {{ j.agvGroundCode }}
							<br />
							<el-button
								@click="lState(j.id)"
								v-hasPermi="['asrs:warehouse-line-monitoring:change']"
								type="text">
								改变库位状态
							</el-button>
							<div
								slot="reference"
								class="hoverDiv"
								:style="{
									cursor:
										j.lineEdgeLibraryState === 1 ? 'not-allowed' : 'pointer',
									background: bgColor[j.lineEdgeLibraryState],
								}"></div>
						</el-popover>
					</div>
				</el-row>
			</div>
		</div>
		<el-dialog title="改变库位状态" :visible.sync="dialogFormVisible">
			<el-form :model="form" label-width="80px">
				<el-form-item label="库位名称">
					<el-input v-model="form.lineEdgeLibraryCode" readonly />
				</el-form-item>
				<el-form-item label="库位状态">
					<el-radio-group v-model="form.lineEdgeLibraryState">
						<el-radio :label="0">空</el-radio>
						<el-radio :label="1">锁</el-radio>
						<el-radio :label="2">满</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="托盘编码">
					<el-input
						v-model="form.trayCode"
						placeholder="请输入内容"
						clearable />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="changeState">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import basicPage from '../mixins/basic-page';
import {
	getLineList,
	getLine,
	updateLine,
} from '@/api/asrs/warehouseStorehouse';

export default {
	mixins: [basicPage],
	data() {
		return {
			urlOptions: {
				getDataListURL: getLineList,
			},
			listQuery: {},
			wareData: [],
			dialogFormVisible: false,
			bgColor: ['#d3d3d3', '#7362F3', '#16DC09'], //空，锁，满
			formConfig: [
				{
					type: this.$auth.hasPermi('asrs:warehouse-line-monitoring:query')
						? 'button'
						: '',
					btnName: '刷新',
					name: 'search',
					color: 'primary',
				},
			],
			form: {
				id: undefined,
				lineEdgeLibraryState: undefined,
				trayCode: '',
			},
		};
	},
	components: {},
	created() {},
	methods: {
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.getDataList();
					break;
				case 'export':
					break;
				default:
					console.log(val);
			}
		},
		// 获取数据列表
		getDataList() {
			this.dataListLoading = true;
			this.urlOptions.getDataListURL(this.listQuery).then((response) => {
				this.wareData = response.data;
				this.dataListLoading = false;
			});
		},
		lState(id) {
			getLine(id).then((response) => {
				this.form = response.data;
				this.dialogFormVisible = true;
			});
		},
		changeState() {
			updateLine(this.form).then((response) => {
				this.$modal.msgSuccess('修改成功');
				this.dialogFormVisible = false;
				this.getDataList();
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.mainbody {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	min-width: 80vw;
	border-radius: 5px;
}
.flex-warp {
	flex-wrap: nowrap;
}
.dashboard-layout-item {
	width: 30px;
	height: 30px;
	background-color: #d3d3d3;
	border-radius: 2px;
	margin: 0 6px 6px 0;
	position: relative;
	&:first-child {
		margin-left: 40px;
	}
	&:last-child {
		margin-right: 30px;
	}
}
.interval {
	&:nth-child(2n) {
		margin-right: 30px;
		::before {
			content: '';
		}
		::after {
			content: '';
			position: absolute;
			right: -15px;
			top: 1px;
			z-index: 1;
			background-color: black;
			width: 1px;
			height: 12px;
		}
	}
}
.hoverDiv {
	width: 100%;
	height: 30px;
	&:hover {
		border: 1px #000000 dashed;
		transform: scale(1.3);
	}
}
.el-divider--horizontal {
	margin-top: 10px;
}
.el-divider {
	background-color: black;
}
.tips {
	position: absolute;
	top: 22px;
	right: 120px;
}
.point {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #409eff;
	float: left;
	margin-top: 7px;
	margin-right: 5px;
}
</style>
