<!--
 * @Author: zwq
 * @Date: 2025-11-07 17:01:51
 * @LastEditors: zwq
 * @LastEditTime: 2025-11-07 22:31:17
 * @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">
					TSK202510230001
				</el-col>
				<el-col :span="8">满盘搬运（自动）</el-col>
				<el-col :span="8">
					上次刷新：{{ parseTime(Date.now()) }}
					<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[1].color }"
						class="taskStatus">
						{{ statusColor[1].label }}
					</span>
				</el-col>
				<el-col :span="8">中</el-col>
				<el-col :span="8">--</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">
				<el-col :span="8">--</el-col>
				<el-col :span="8">系统/张三</el-col>
				<el-col :span="8">{{ parseTime(Date.now()) }}</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">任务异常：无效路径</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>
				</el-col>
				<el-col :span="12">
					<div class="pan-info">
						<div class="pan-title">R盘</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="bgDiv4">
			<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/R)">
					CK-01-A05-L / R
				</el-descriptions-item>
				<el-descriptions-item label="终点库位(L/R)">
					CC-02-B03-L/R (候选 )
				</el-descriptions-item>
				<el-descriptions-item label="起点策略">--</el-descriptions-item>
				<el-descriptions-item label="终点策略">入库策略</el-descriptions-item>
				<el-descriptions-item label="FMS任务号">--</el-descriptions-item>
				<el-descriptions-item label="车辆位置">--</el-descriptions-item>
				<el-descriptions-item label="电量">--</el-descriptions-item>
				<el-descriptions-item label="是否载货">--</el-descriptions-item>
				<el-descriptions-item label="创建方式">自动/人工</el-descriptions-item>
				<el-descriptions-item label="任务来源">
					PDA/PC/系统
				</el-descriptions-item>
				<el-descriptions-item label="关联叫料单">--</el-descriptions-item>
				<el-descriptions-item label=""></el-descriptions-item>
			</el-descriptions>
		</div>
		<div class="bgDiv6">
			<small-title style="margin: 0 0 8px 0" size="sm" :no-padding="true">
				任务日志
			</small-title>
			<el-timeline style="padding: 0">
				<el-timeline-item
					v-for="(activity, index) in activities"
					:key="index"
					:type="activity.type"
					:color="activity.color"
					size="large"
					hide-timestamp>
					<span>{{ activity.content }}</span>
					<span style="float: right">{{ activity.timestamp }}</span>
				</el-timeline-item>
			</el-timeline>
		</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';

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

			activities: [
				{
					content: 'FMS | 卸货完成，任务完成',
					timestamp: '2018-04-12 20:46',
					type: 'primary',
				},
				{
					content: 'FMS | 取货完成',
					timestamp: '2018-04-03 20:46',
				},
				{
					content: 'FMS | 派车AGV-03，前往起点取货',
					timestamp: '2018-04-03 20:46',
				},
				{
					content: '张三 | 任务扫码配对完成，进入待下发',
					timestamp: '2018-04-03 20:46',
				},
			],
		};
	},
	components: {
		SmallTitle,
	},
	created() {},
	methods: {
		init(val) {
			this.visible = true;
		},
		//刷新
		refresh() {},
		closeD() {
      this.visible = false
			this.$emit('closeDrawer');
		},
	},
};
</script>

<style lang="scss" scoped>
.bgDiv1 {
	background-color: rgba(242, 242, 242, 0.5);
	padding: 20px;
	line-height: 25px;
	font-size: 15px;
	border-bottom: 1px solid rgba(121, 121, 121, 0.5);
	.taskStatus {
		text-align: center;
		border-radius: 3px;
		padding: 2px 5px;
		color: #fff;
	}
}
.bgDiv2 {
	border-bottom: 1px solid rgba(121, 121, 121, 0.5);
	padding: 18px 0;
	.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: 350px;
		border: 1px solid rgba(121, 121, 121, 0.8);
		border-radius: 5px;
		.pan-title {
			background-color: rgba(242, 242, 242, 0.5);
			height: 35px;
			font-size: 20px;
			line-height: 35px;
			padding: 0 20px;
			border-bottom: 1px solid rgba(121, 121, 121, 0.5);
			letter-spacing: 2px;
		}
	}
}
.bgDiv4 {
	padding: 20px 20px 0;
}
.bgDiv5 {
	padding: 20px 20px 0;
}
.bgDiv6 {
	padding: 20px 20px 0;
}
.drawer-body__footer {
	display: flex;
	justify-content: flex-end;
	padding: 0 18px 10px;
}
</style>
