<!--
 * @Author: zwq
 * @Date: 2025-11-07 17:01:51
 * @LastEditors: zwq
 * @LastEditTime: 2025-11-17 15:47:16
 * @Description:
-->
<template>
	<el-drawer
		:visible.sync="visible"
		:with-header="false"
		size="50%"
		@close="closeD"
		:show-close="false">
		<div class="bgDiv1">
			<el-row :gutter="20" style="margin-bottom: 15px">
				<el-col :span="8" style="font-size: 20px; font-weight: 600">
					{{ infoData.mainTaskCode }}
				</el-col>
				<el-col :span="8">
					{{
						['', '满盘搬运', '空盘搬运', '备料搬运', '临时搬运'][
							infoData.mainTaskType
						] +
						'(' +
						['', '自动', '人工'][infoData.taskAttribute] +
						')'
					}}
				</el-col>
				<el-col :span="8">
					上次刷新：{{ parseTime(nowDate) }}
					<el-button type="text" @click="refresh">刷新</el-button>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="8">任务状态</el-col>
				<el-col :span="8">优先级</el-col>
				<el-col :span="8">执行车辆</el-col>
			</el-row>
			<el-row :gutter="20" style="margin-bottom: 15px">
				<el-col :span="8">
					<span
						:style="{
							backgroundColor: statusColor[infoData.mainTaskState].color,
						}"
						class="taskStatus">
						{{ statusColor[infoData.mainTaskState].label }}
					</span>
				</el-col>
				<el-col :span="8">
					{{ ['最高', '较高', '常规', '较低', '最低'][infoData.taskPriority] }}
				</el-col>
				<el-col :span="8">{{ infoData.agv }}</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="8">创建人</el-col>
				<el-col :span="8">创建时间</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="8">{{ infoData.creator }}</el-col>
				<el-col :span="8">{{ parseTime(infoData.createTime) }}</el-col>
			</el-row>
		</div>
		<div class="bgDiv2">
			<el-steps
				:active="stepNum"
				finish-status="success"
				:process-status="stepStatus"
				align-center>
				<el-step title="待下发"></el-step>
				<el-step title="待执行"></el-step>
				<el-step title="执行中"></el-step>
				<el-step title="已完成"></el-step>
			</el-steps>
			<div class="abnormal" v-if="infoData.mainTaskState == 7">
				任务异常：无效路径
			</div>
		</div>
		<div class="bgDiv3">
			<small-title style="margin: 0 0 8px 0" size="sm" :no-padding="true">
				搬运对象
			</small-title>
			<el-row :gutter="20">
				<el-col :span="12">
					<div class="pan-info">
						<div class="pan-title">L盘</div>
						<div class="pan-body">
							<el-row :gutter="15">
								<el-col :span="12">物料名称</el-col>
								<el-col :span="12">物料规格</el-col>
								<el-col :span="12" style="color: black">
									{{ infoData.leftMaterialName }}
								</el-col>
								<el-col :span="12" style="color: black">
									{{ infoData.leftMaterial }}
								</el-col>
								<el-col :span="12">物料编码</el-col>
								<el-col :span="12">批次</el-col>
								<el-col :span="12" style="color: black">
									{{ infoData.leftMaterialCode }}
								</el-col>
								<el-col :span="12" style="color: black">
									{{ infoData.leftBatch }}
								</el-col>
								<el-col :span="12">线缆长度</el-col>
								<el-col :span="12">虚拟盘号</el-col>
								<el-col :span="12" style="color: black">
									{{ infoData.leftCableLength }}
								</el-col>
								<el-col :span="12" style="color: black">
									{{ infoData.leftVirtualTrayNumber }}
								</el-col>
							</el-row>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="pan-info">
						<div class="pan-title">R盘</div>
						<div class="pan-body">
							<el-row :gutter="15">
								<el-col :span="12">物料名称</el-col>
								<el-col :span="12">物料规格</el-col>
								<el-col :span="12" style="color: black">
									{{ infoData.rightMaterialName }}
								</el-col>
								<el-col :span="12" style="color: black">
									{{ infoData.rightMaterial }}
								</el-col>
								<el-col :span="12">物料编码</el-col>
								<el-col :span="12">批次</el-col>
								<el-col :span="12" style="color: black">
									{{ infoData.rightMaterialCode }}
								</el-col>
								<el-col :span="12" style="color: black">
									{{ infoData.rightBatch }}
								</el-col>
								<el-col :span="12">线缆长度</el-col>
								<el-col :span="12">虚拟盘号</el-col>
								<el-col :span="12" style="color: black">
									{{ infoData.rightCableLength }}
								</el-col>
								<el-col :span="12" style="color: black">
									{{ infoData.rightVirtualTrayNumber }}
								</el-col>
							</el-row>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="bgDiv4" v-if="false">
			<small-title style="margin: 0 0 8px 0" size="sm" :no-padding="true">
				回收信息
			</small-title>
			<el-descriptions :column="2" size="medium" border>
				<el-descriptions-item label="回收方式">他车回收</el-descriptions-item>
				<el-descriptions-item label="回收任务编号">
					18100000000
				</el-descriptions-item>
				<el-descriptions-item label="回收库位">
					CK-01-A05-L / R
				</el-descriptions-item>
				<el-descriptions-item label="执行车辆">AGV-06</el-descriptions-item>
			</el-descriptions>
		</div>
		<div class="bgDiv5">
			<small-title style="margin: 0 0 8px 0" size="sm" :no-padding="true">
				任务明细
			</small-title>
			<el-descriptions :column="2" size="medium" border>
				<el-descriptions-item label="起点库位( L )(候选)">
					{{ infoData.leftLibraryStartName }}
				</el-descriptions-item>
				<el-descriptions-item label="终点库位( L )(候选)">
					{{ infoData.leftLibraryEndName }}
				</el-descriptions-item>
				<el-descriptions-item label="起点库位( R )(候选)">
					{{ infoData.rightLibraryStartName }}
				</el-descriptions-item>
				<el-descriptions-item label="终点库位( R )(候选)">
					{{ infoData.rightLibraryEndName }}
				</el-descriptions-item>

				<el-descriptions-item
					label="起点库位( L )"
					:labelStyle="{ background: '#f1ffe9' }">
					{{ infoData.changeLeftLibraryStartName }}
				</el-descriptions-item>
				<el-descriptions-item
					label="终点库位( L )"
					:labelStyle="{ background: '#f1ffe9' }">
					{{ infoData.changeLeftLibraryEndName }}
				</el-descriptions-item>
				<el-descriptions-item
					label="起点库位( R )"
					:labelStyle="{ background: '#f1ffe9' }">
					{{ infoData.changeRightLibraryStartName }}
				</el-descriptions-item>
				<el-descriptions-item
					label="终点库位( R )"
					:labelStyle="{ background: '#f1ffe9' }">
					{{ infoData.changeRightLibraryEndName }}
				</el-descriptions-item>
			</el-descriptions>
		</div>
		<div class="bgDiv6">
			<small-title style="margin: 0 0 8px 0" size="sm" :no-padding="true">
				任务日志
			</small-title>
			<div class="timelineDiv">
				<el-timeline style="padding: 0">
					<el-timeline-item
						v-for="(activity, index) in activities"
						:key="index"
						:type="index == 0 ? 'primary' : ''"
						:color="activity.color"
						size="large"
						hide-timestamp>
						<span>
							{{ activity.triggerObject + ' | ' + activity.description }}
						</span>
						<span style="float: right">
							{{ parseTime(activity.createTime) }}
						</span>
					</el-timeline-item>
				</el-timeline>
			</div>
		</div>
		<el-divider></el-divider>

		<!-- 底部按钮 -->
		<div class="drawer-body__footer">
			<el-button @click="closeD">返 回</el-button>
		</div>
	</el-drawer>
</template>
<script>
import SmallTitle from './SmallTitle';
import { getTask, getTaskLogPage } from '@/api/ssdl/taskList';

export default {
	name: '',
	data() {
		return {
			visible: false,
			infoID: '',
			infoData: '',
			statusColor: [
				//bgDiv1的任务状态
				{ label: '待下发', color: '#fa8c16' },
				{ label: '待执行', color: '#1890ff' },
				{ label: '执行中', color: '#1890ff' },
				{ label: '取货完成', color: '#52c41a' },
				{ label: '已完成', color: '#52c41a' },
				{ label: '暂停中', color: '#8c8c8c' },
				{ label: '已终止', color: '#faad14' },
				{ label: '异常', color: '#ff4d4f' },
			],
			nowDate: Date.now(),
			//bgDiv2的步骤条
			stepNum: 0,
			stepStatus: 'finish',
			//bgDiv6的时间线

			activities: [],
		};
	},
	components: {
		SmallTitle,
	},
	created() {},
	methods: {
		init(id) {
			this.visible = true;
			this.infoID = id;
			this.$nextTick(() => {
				this.getInfoData();
			});
		},
		getInfoData() {
			getTask(this.infoID).then(({ data }) => {
				this.infoData = data;
				if (data.mainTaskState < 3) {
					this.stepNum = data.mainTaskState;
				} else if (data.mainTaskState == 4) {
					this.stepNum = 3;
				}
				getTaskLogPage({
					mainTaskId: this.infoID,
					pageNo: 1,
					pageSize: 100,
				}).then(({ data }) => {
					this.activities = data.list.sort((a, b) => a.timestamp - b.timestamp);
				});
			});
		},
		//刷新
		refresh() {
			this.nowDate = Date.now();
			this.getInfoData();
		},
		closeD() {
			this.visible = false;
			this.$emit('closeDrawer');
		},
	},
};
</script>

<style lang="scss" scoped>
.bgDiv1 {
	background-color: #f1f9ff;
	padding: 20px;
	line-height: 25px;
	font-size: 15px;
	.taskStatus {
		text-align: center;
		border-radius: 3px;
		padding: 2px 5px;
		color: #fff;
	}
}
.bgDiv2 {
	padding: 18px 0;
	background-image: linear-gradient(
		to right,
		transparent 0%,
		#c5c5c5 10%,
		#c5c5c5 90%,
		transparent 100%
	);
	background-position: bottom;
	background-size: 100% 1px;
	background-repeat: no-repeat;
	padding-bottom: 1px;
	.abnormal {
		width: 80%;
		margin: auto;
		border-radius: 5px;
		height: 40px;
		font-size: 22px;
		line-height: 40px;
		text-align: center;
		background-color: rgba(217, 0, 27, 0.1);
		color: rgba(217, 0, 27, 1);
		border: 1px solid rgba(217, 0, 27, 1);
	}
}
.bgDiv3 {
	padding: 20px 20px 0;
	.pan-info {
		height: 200px;
		border: 1px solid rgba(121, 121, 121, 0.8);
		border-radius: 5px;
		.pan-title {
			background-color: #d8eeff;
			border-radius: 5px;
			height: 35px;
			font-size: 20px;
			line-height: 35px;
			padding: 0 20px;
			border-bottom: 1px solid rgba(121, 121, 121, 0.5);
			letter-spacing: 2px;
		}
		.pan-body {
			padding: 15px;
			font-size: 16px;
			color: rgba(121, 121, 121, 1);
		}
	}
}
.bgDiv4 {
	padding: 20px 20px 0;
}
.bgDiv5 {
	padding: 20px 20px 0;
}
.bgDiv6 {
	padding: 20px 20px 0;
	.timelineDiv {
		padding: 5px;
		height: 400px;
		overflow-y: auto;
	}
}
.drawer-body__footer {
	display: flex;
	justify-content: flex-end;
	padding: 0 18px 10px;
}
</style>
