<!--
 * @Author: zwq
 * @Date: 2025-10-13 15:07:24
 * @LastEditors: zwq
 * @LastEditTime: 2025-11-07 15:35:14
 * @Description:
-->
<template>
	<div>
		<div class="circle-container">
			<div v-for="(item, index) in dotArr" :key="index" class="circle-wrapper">
				<div
					class="circle"
					:style="{
						background: stepNum == index + 1 ? '#0B58FF' : '',
					}">
					{{ index + 1 }}
				</div>
				<div
					class="circle-text"
					:style="{
						color: stepNum == index + 1 ? '#0B58FF' : '',
					}">
					{{ item.name }}
				</div>
				<!-- 圆点后面的虚线 -->
				<div v-if="index < 2" class="connector" />
			</div>
		</div>
		<div v-if="stepNum == 1">
			<div class="topTip">
				1.可选择库区、巷道，同批次创建任务搬运仅支持同一产品型号。
				<br />
				2.须在本页下方填写搬运数量，搬运数量仅支持双数，且数量≤当前可用库存总量。
			</div>
			<small-title style="margin: 16px 0" size="sm" :no-padding="true">
				步骤一：选择产品及起点
			</small-title>
			<el-form
				:model="dataForm"
				:rules="dataRule"
				ref="dataForm"
				@keyup.enter.native="dataFormSubmit()"
				label-position="top"
				label-width="80px">
				<el-row :gutter="10">
					<el-col :span="6">
						<el-form-item label="搬运对象" prop="val1">
							<el-select
								style="width: 100%"
								v-model="dataForm.val1"
								placeholder="请选择搬运对象">
								<el-option
									v-for="item in options1"
									:key="item.value"
									:label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="dataForm.val1 == 1">
						<el-form-item label="产品名称" prop="val1">
							<el-select
								style="width: 100%"
								v-model="dataForm.val2"
								placeholder="请选择产品名称">
								<el-option
									v-for="item in options1"
									:key="item.value"
									:label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6" v-if="dataForm.val1 == 1">
						<el-form-item label="规格型号" prop="val1">
							<el-select
								style="width: 100%"
								v-model="dataForm.val2"
								placeholder="请选择规格型号">
								<el-option
									v-for="item in options1"
									:key="item.value"
									:label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="搬运数量" prop="val4">
							<el-input
								v-model="dataForm.val4"
								oninput="value=value.replace(/^(0+)|[^\d]+/g,'')">
								<template slot="append">盘</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item label="起点信息" prop="val5">
							<el-radio-group v-model="dataForm.val5">
								<el-radio :label="1">按策略自动选择</el-radio>
								<el-radio :label="2">指定起点</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div v-if="dataForm.val5 == 2" class="potBG-div">
				<div>
					<el-row :gutter="10">
						<el-col :span="10">
							起点库区:
							<el-select
								style="width: 200px; margin-left: 10px"
								v-model="startPot"
								size="small"
								placeholder="请选择起点库区">
								<el-option
									v-for="item in options1"
									:key="item.value"
									:label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-col>
						<el-col :span="13" style="text-align: right; line-height: 36px">
							<span
								class="num1-startPot-status"
								style="background-color: #5ab45a" />
							可选
							<span class="num1-startPot-status" />
							不可选
							<span
								class="num1-startPot-status"
								style="background-color: #e9b100" />
							已选
						</el-col>
					</el-row>
					<div class="potTitleBG">
						<div v-for="item in Object.keys(startPotList)" :key="item">
							<div class="potTitle">
								{{ item }}
							</div>
							<div class="potList">
								<div
									class="pot"
									v-for="sitem in startPotList[item]"
									:key="sitem.id"
									:style="{
										backgroundColor: potBGcolor[sitem.status],
										cursor: sitem.status > 0 ? 'pointer' : '',
									}"
									@click="sitem.status > 0 && setStartPot(sitem)"
									:title="sitem.name">
									{{ sitem.name }}
								</div>
							</div>
						</div>
					</div>
						<el-divider></el-divider>
						<div style="text-align: right">可用库存总量 <span style="color:#409EFF;font-size:16px">12</span> 盘</div>
				</div>
			</div>
		</div>
		<div v-if="stepNum == 2">
			<div class="topTip">
				1.指定终点库位，下发后会锁定所属巷道仅本批次任务进入。
				<br />
				2.指定终点库位选位规则：仅可从巷道最里空对位选位。
				<br />
				3.只选择库区或巷道时，该方式下当前终点为候选位置，系统将根据策略与现场实际情况自动确定最终终点库位。
			</div>
			<small-title style="margin: 16px 0" size="sm" :no-padding="true">
				步骤二：选择终点
			</small-title>
		</div>
		<div v-if="stepNum == 3">
			<small-title style="margin: 16px 0" size="sm" :no-padding="true">
				步骤三：预览与下发
			</small-title>
		</div>
	</div>
</template>

<script>
import SmallTitle from './SmallTitle';
export default {
	components: {
		SmallTitle,
	},
	data() {
		return {
			dotArr: [
				{
					name: '选择起点',
				},
				{
					name: '选择终点',
				},
				{
					name: '预览下发',
				},
			],
			potBGcolor: ['', '#dafadc', '#f8f0c4'],
			stepNum: 1, // 当前第几步
			//第一步参数
			dataForm: {
				id: undefined,
				val1: undefined,
				val2: undefined,
				val3: undefined,
				val4: undefined,
				val5: 1,
			},
			options1: [
				{
					label: '产品',
					value: 1,
				},
				{
					label: '空盘',
					value: 2,
				},
			],
			dataRule: {},
			startPot: undefined, //起点库区选择的类型
			startPotList: {
				//起点库区List
				G01: [
					{
						id: '001',
						name: 'L001',
						status: 1,
					},
					{
						id: '002',
						name: 'R002',
						status: 1,
					},
					{
						id: '003',
						name: 'L003',
						status: 0,
					},
					{
						id: '004',
						name: 'R004',
						status: 0,
					},
				],
				G02: [
					{
						id: '005',
						name: 'L005',
					},
					{
						id: '006',
						name: 'R006',
					},
					{
						id: '007',
						name: 'L007',
					},
					{
						id: '008',
						name: 'R008',
					},
				],
			},
		};
	},
	methods: {
		init(id) {
			this.dataForm.id = id || undefined;
			this.$nextTick(() => {
				if (this.dataForm.id) {
				} else {
				}
			});
		},
		//上一步
		upSubmit() {
			if (this.stepNum == 2) {
				this.stepNum -= 1;
				this.$emit('setSN', this.stepNum);
			} else if (this.stepNum == 3) {
				this.stepNum -= 1;
				this.$emit('setSN', this.stepNum);
			}
		},
		//下一步
		nextSubmit() {
			if (this.stepNum == 1) {
				this.stepNum += 1;
				this.$emit('setSN', this.stepNum);
				return;
			}
			if (this.stepNum == 2) {
				this.stepNum += 1;
				this.$emit('setSN', this.stepNum);
				return;
			}
			if (this.stepNum == 3) {
				this.stepNum = 1;
				this.$emit('setSN', this.stepNum);
				return;
			}
		},
		cancelStep() {},

		// 第一步方法
		setStartPot(data) {
			data.status = data.status == 1 ? 2 : 1;
		},
	},
};
</script>

<style scoped>
.topTip {
	background-color: #ebebeb;
	padding: 10px 20px;
	border-radius: 5px;
	line-height: 25px;
}
</style>
<!-- //库位点的样式 -->
<style scoped>
.potBG-div {
	width: 100%;
	margin: 10px;
	border: 1px solid gainsboro;
	box-shadow: 2px 2px 2px gainsboro, -1px -1px 3px gainsboro;
	padding: 15px;
}
.num1-startPot-status {
	margin-left: 5px;
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid gainsboro;
}
.potTitleBG {
	margin-top: 10px;
	overflow-x: auto;
	display: flex;
}
.potTitle {
	width: 82px;
	background-color: rgb(169, 235, 249);
	border-radius: 3px;
	margin-right: 5px;
	text-align: center;
	color: #000000;
	letter-spacing: 1px;
	margin-bottom: 10px;
}
.potList {
	width: 82px;
	display: grid;
	grid-template-columns: 40px 40px;
	gap: 2px;
}
.pot {
	width: 40px;
	text-align: center;
	border: 1px solid gainsboro;
	border-radius: 3px;
	padding: 5px 0;
	margin-bottom: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>

<!-- //序号圆点 -->
<style scoped>
.circle-container {
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	width: 90%;
	overflow-x: auto;
	margin: auto;
}

.circle-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.circle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #8db1ff;
	font-weight: 500;
	font-size: 31px;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;
	cursor: pointer;
}
.circle-text {
	position: absolute;
	top: 60px;
	left: -15px;
	color: #8db1ff;
	width: 82px;
	text-align: center;
}

/* 下半圆虚线边框 */
.circle::after {
	content: '';
	position: absolute;
	bottom: -6px; /* 2px边框 + 2px间隙 */
	left: -4px;
	right: -4px;
	height: 30px; /* 半圆高度 */
	border-radius: 0 0 60px 60px;
	border: 1px dashed #0b58ff;
	border-top: none;
	z-index: 1;
}

.connector {
	width: 160px; /* 计算连接线长度 */
	height: 2px;
	border-bottom: 1px dashed rgb(11, 88, 255, 1);
	margin: 0 5px;
	z-index: 1;
}
</style>
