<!--
 * @Author: zwq
 * @Date: 2024-01-17 09:58:41
 * @LastEditors: zwq
 * @LastEditTime: 2024-02-22 14:07:03
 * @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>
			<el-tag effect="dark" color="#ff0000" style="border: none">不可用</el-tag>
		</div>
		<div class="mainbody">
      <!-- @click="showDia()" -->
			<div v-for="i in listQuery.total" :key="i">
				<el-row style="margin-bottom: 10px">
					<el-col :span="24">
						<el-row type="flex" class="flex-warp">
							<div
								class="dashboard-layout-item"
								v-for="j in wareData.filter(
									(item) => item.wareRow === (i - 1) * 4 + 1
								)"
								:key="j.id + j.warehouseStorehouseName"
								:title="j.warehouseStorehouseName">
								<div class="x-coordinate coordinate" v-if="j.wareRow === 1">
									{{ j.wareColumn }}
								</div>
								<div class="y-coordinate coordinate" v-if="j.wareColumn === 1">
									{{ j.wareRow }}
								</div>
								<el-popover
									placement="top-start"
									:title="j.warehouseStorehouseName"
									width="200"
									trigger="hover">
									库位状态:
									{{
										j.deactivate === 1
											? ['空', '锁', '满'][j.warehouseStorehouseState]
											: '不可用'
									}}
									<div v-for="(k, index) in j.productList" :key="index">
										产品名称: {{ k.goodSpecificationName }}
										<br />
										产品数量: {{ k.number }}
									</div>
									<div
										slot="reference"
										class="hoverDiv"
										:style="{
											cursor:
												j.deactivate === 0 || j.warehouseStorehouseState === 1
													? 'not-allowed'
													: 'pointer',
									background:
										j.deactivate === 1
											? bgColor[j.warehouseStorehouseState]
											: '#ff0000',
										}" />
								</el-popover>
							</div>
						</el-row>
						<el-row type="flex" class="flex-warp">
							<div
								class="dashboard-layout-item"
								v-for="j in wareData.filter(
									(item) => item.wareRow === (i - 1) * 4 + 2
								)"
								:key="j.id + j.warehouseStorehouseName"
								:title="j.warehouseStorehouseName">
								<div class="y-coordinate coordinate" v-if="j.wareColumn === 1">
									{{ j.wareRow }}
								</div>
								<el-popover
									placement="top-start"
									:title="j.warehouseStorehouseName"
									width="200"
									trigger="hover">
									库位状态:
									{{
										j.deactivate === 1
											? ['空', '锁', '满'][j.warehouseStorehouseState]
											: '不可用'
									}}
									<div v-for="(k, index) in j.productList" :key="index">
										产品名称: {{ k.goodSpecificationName }}
										<br />
										产品数量: {{ k.number }}
									</div>
									<div
										slot="reference"
										class="hoverDiv"
										:style="{
											cursor:
												j.deactivate === 0 || j.warehouseStorehouseState === 1
													? 'not-allowed'
													: 'pointer',
									background:
										j.deactivate === 1
											? bgColor[j.warehouseStorehouseState]
											: '#ff0000',
										}" />
								</el-popover>
							</div>
						</el-row>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-row type="flex" class="flex-warp">
							<div
								class="dashboard-layout-item"
								v-for="j in wareData.filter(
									(item) => item.wareRow === (i - 1) * 4 + 3
								)"
								:key="j.id + j.warehouseStorehouseName"
								:title="j.warehouseStorehouseName">
								<div class="y-coordinate coordinate" v-if="j.wareColumn === 1">
									{{ j.wareRow }}
								</div>
								<el-popover
									placement="top-start"
									:title="j.warehouseStorehouseName"
									width="200"
									trigger="hover">
									库位状态:
									{{
										j.deactivate === 1
											? ['空', '锁', '满'][j.warehouseStorehouseState]
											: '不可用'
									}}
									<div v-for="(k, index) in j.productList" :key="index">
										产品名称: {{ k.goodSpecificationName }}
										<br />
										产品数量: {{ k.number }}
									</div>
									<div
										slot="reference"
										class="hoverDiv"
										:style="{
											cursor:
												j.deactivate === 0 || j.warehouseStorehouseState === 1
													? 'not-allowed'
													: 'pointer',
									background:
										j.deactivate === 1
											? bgColor[j.warehouseStorehouseState]
											: '#ff0000',
										}" />
								</el-popover>
							</div>
						</el-row>
						<el-row type="flex" class="flex-warp">
							<div
								class="dashboard-layout-item"
								v-for="j in wareData.filter((item) => item.wareRow === i * 4)"
								:key="j.id + j.warehouseStorehouseName"
								:title="j.warehouseStorehouseName">
								<div class="y-coordinate coordinate" v-if="j.wareColumn === 1">
									{{ j.wareRow }}
								</div>
								<el-popover
									placement="top-start"
									:title="j.warehouseStorehouseName"
									width="200"
									trigger="hover">
									库位状态:
									{{
										j.deactivate === 1
											? ['空', '锁', '满'][j.warehouseStorehouseState]
											: '不可用'
									}}
									<div v-for="(k, index) in j.productList" :key="index">
										产品名称: {{ k.goodSpecificationName }}
										<br />
										产品数量: {{ k.number }}
									</div>
									<div
										slot="reference"
										class="hoverDiv"
										:style="{
											cursor:
												j.deactivate === 0 || j.warehouseStorehouseState === 1
													? 'not-allowed'
													: 'pointer',
									background:
										j.deactivate === 1
											? bgColor[j.warehouseStorehouseState]
											: '#ff0000',
										}" />
								</el-popover>
							</div>
						</el-row>
					</el-col>
				</el-row>
				<el-divider class="divider" v-if="i < listQuery.total"></el-divider>
			</div>
		</div>
		<pot-dialog
			ref="dialogRef"
			v-if="diaVisible"
			@refreshDataList="getDataList"></pot-dialog>
	</div>
</template>

<script>
import basicPage from '../mixins/basic-page';
import {
	getWarehouseStorehouseMonitoring,
	exportWarehouseStorehouseExcel,
} from '@/api/asrs/warehouseStorehouse';
import potDialog from './potDialog';

export default {
	mixins: [basicPage],
	data() {
		return {
			urlOptions: {
				getDataListURL: getWarehouseStorehouseMonitoring,
				exportURL: exportWarehouseStorehouseExcel,
			},
			listQuery: {
				wareLayer: 1,
			},
			diaVisible: false,
			wareData: [],
			bgColor: ['#d3d3d3', '#7362F3', '#16DC09'], //空，锁，满
			formConfig: [
				{
					type: 'select',
					label: '选择层',
					selectOptions: [
						{ id: 1, name: '1' },
						{ id: 2, name: '2' },
						{ id: 3, name: '3' },
						{ id: 4, name: '4' },
					],
					param: 'value',
					filterable: true,
					defaultSelect: 1,
					clearable: false,
				},
				{
					type: 'button',
					btnName: '搜索',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'button',
					btnName: '下载',
					name: 'export',
					plain: true,
					color: 'primary',
				},
			],
		};
	},
	components: {
		potDialog,
	},
	created() {},
	methods: {
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.wareLayer = val.value;
					this.getDataList();
					break;
				case 'export':
					this.handleExport(this.aId);
					break;
				default:
					console.log(val);
			}
		},
		// 获取数据列表
		getDataList() {
			this.dataListLoading = true;
			this.urlOptions.getDataListURL(this.listQuery).then((response) => {
				this.wareData = response.data.list;
				this.listQuery.total = Math.ceil(response.data.list.length / 120);
				this.dataListLoading = false;
			});
		},
		showDia() {
			this.diaVisible = true;
			this.$nextTick(() => {
				this.$refs.dialogRef.init();
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.mainbody {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	min-width: 80vw;
	border-radius: 5px;
	padding-top: 25px;
}
.flex-warp {
	flex-wrap: nowrap;
}
.dashboard-layout-item {
	width: 30px;
	height: 30px;
	background-color: #d3d3d3;
	border-radius: 2px;
	margin: 0 6px 8px 0;
	position: relative;
	&:nth-child(2n) {
		margin-right: 30px;
	}
	&:first-child {
		margin-left: 40px;
	}
	&:last-child {
		margin-right: 30px;
	}
	.coordinate {
		font-weight: bold;
		font-size: 18px;
	}
	.x-coordinate {
		position: absolute;
		top: -25px;
		text-align: center;
		width: 100%;
	}
	.y-coordinate {
		position: absolute;
		line-height: 30px;
		text-align: center;
		width: 20px;
		height: 30px;
		left: -25px;
	}
}
.hoverDiv {
	width: 100%;
	height: 30px;
	&:hover {
    border: 1px #000000 dashed;
		transform: scale(1.3);
	}
}
.el-divider--horizontal {
	margin: 0 0 8px 0;
}
.el-divider {
	background-color: black;
}
.tips {
	position: absolute;
	top: 22px;
	right: 120px;
}
</style>
