<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>售后管理</el-breadcrumb-item>
			<el-breadcrumb-item to="/index/saleAppli">售后列表</el-breadcrumb-item>
			<el-breadcrumb-item>售后详情</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="detailInfo">
			<img src="@/assets/images/saleAfter/1.png" class="tag" />
			<h3>
				工单号 : 4564646465465
				<span>取消申请</span>
			</h3>
			<div class="info">
				<span>设备信息 : 测报灯4564654645646</span>
				<span>联系电话 : 12654645646</span>
				<span>申请日期 : 2020-05-06</span>
				<span>期望维修日期 : 2020-08-06</span>
				<span>地址 : 河南省郑州市瀚海北金</span>
			</div>
			<div class="desc">故障描述 : 灯管不亮灯管不亮灯管不亮灯管不亮灯管不亮灯管不亮</div>
		</div>
		<div class="items" v-if="flag">
			<div
				v-for="(item,index) in items"
				:key="index"
				:style="{color:item.color,width:index==items.length-1?'150px':''}"
				class="item"
			>
				<div class="point" :style="{borderColor:item.color}">
					<i class="el-icon-check" :style="{color:item.color}"></i>
				</div>
				<div
					v-if="index+1 != items.length"
					class="line"
					:style="{background:lineColor(item.color,index)}"
				></div>
				<div class="item-right">
					<div class="content">{{item.content}}</div>
					<template v-if="item.color">
						<div class="person">{{item.person}}</div>
						<div class="time">{{item.time}}</div>
					</template>
					<template v-else>
						<span class="btn" @click="checkState(index)">{{item.btn}}</span>
					</template>
				</div>
			</div>
		</div>
		<h3 class="title">负责人员信息</h3>
		<div class="leadPerson">
			<div>
				<span>
					<i>1</i>
					申请人 : {{appli.name}}
				</span>
				<span>联系电话 : {{appli.tel}}</span>
				<span>申请日期 : {{appli.date}}</span>
			</div>
			<div>
				<span>
					<i>2</i>
					管理员 : {{admin.name}}
				</span>
				<span>联系电话 : {{admin.tel}}</span>
				<span>分配日期 : {{admin.date}}</span>
			</div>
			<div>
				<span>
					<i>3</i>
					售后员 : {{saleAfter.name}}
				</span>
				<span>联系电话 : {{saleAfter.tel}}</span>
				<span>到达日期 : {{saleAfter.date}}</span>
			</div>
		</div>
		<h3 class="title">
			备注
			<i @click="modifyRemark" class="el-icon-edit-outline"></i>
		</h3>
		<div class="remark">
			<!-- <img src="@/assets/images/12.jpg" /> -->
			<img src="@/assets/images/newImg/12.jpg" />
			<div class="tex">
				<span>售后人员备注 :</span>完成售后完成售后完成售后完成售后完成售后完成完成售后完成售后完成售后完成售后完成售后完成售后完成售后完成售后完成售后完成售后完成售后完成售后完成售后完成售后完成售后完成售后完成售后完成售后完成售后完成售后
			</div>
		</div>
		<el-dialog
			title="修改备注"
			:visible.sync="remarkDialogVisible"
			width="30%"
			@close="remarkDialogClosed"
		>
			<el-form></el-form>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			items: [
				{
					content: '提出申请',
					person: '李小明',
					time: '2020-03-26 12:30',
					color: '#57dabb'
				},
				{
					content: '管理员分配',
					person: '管理员',
					time: '2020-03-26 13:30',
					btn: '分配'
				},
				{
					content: '到达售后点',
					person: '陈璐',
					time: '2020-03-26 18:30',
					btn: '到达'
				},
				{
					content: '完成售后',
					person: '成雪',
					time: '2020-03-27 13:30',
					btn: '完成'
				}
			],
			appli: {
				name: '小王',
				tel: 12165464654,
				date: '2020-05-01'
			},
			admin: {
				name: '管理员1',
				tel: 12165464654,
				date: '2020-05-01'
			},
			saleAfter: {
				name: '小陈',
				tel: 12165464654,
				date: '2020-05-01'
			},
			flag: true,
			remarkDialogVisible: false
		}
	},
	methods: {
		lineColor(color, index) {
			let i
			this.items.forEach((item, j) => {
				if (item.color) {
					i = j
				}
			})
			if (color && i != index) {
				return color
			}
		},
		checkState(index) {
			if (index == 1) {
				this.$router.push('/index/saleAllotPeople')
			} else {
				this.$confirm(`确定${this.items[index].content}?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(() => {
						this.flag = false
						Object.assign(this.items[index], { color: '#57dabb' })
						this.flag = true
						this.$message({
							type: 'success',
							message: '确认成功!'
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消确认'
						})
					})
			}
		},
		modifyRemark() {
			// this.remarkDialogVisible=true
			this.$prompt('请输入备注信息', '修改备注信息', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			})
				.then(({ value }) => {
					this.$message({
						type: 'success',
						message: '你的备注信息是: ' + value
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消修改'
					})
				})
		},
		remarkDialogClosed() {}
	}
}
</script>

<style lang='less' scoped>
.detailInfo {
	.tag {
		position: absolute;
		top: -8px;
		left: -10px;
	}
	color: #fff;
	background: #57dabb;
	border-radius: 6px;
	padding: 30px 30px 20px 90px;
	position: relative;
	h3 {
		margin: 0;
		padding: 0;
		span {
			background: #fff;
			color: #57dabb;
			font-size: 12px;
			border-radius: 20px;
			padding: 3px 10px;
			cursor: pointer;
			margin-left: 10px;
		}
	}
	.info {
		line-height: 50px;
		display: flex;
		font-size: 15px;
		span {
			margin-right: 30px;
		}
	}
	.desc {
		font-size: 15px;
	}
}
.items {
	margin: 30px 0;
	display: flex;
	flex-wrap: nowrap;
	padding: 10px 100px 80px 100px;
	box-shadow: 0 0 2px 2px rgba(154, 154, 154, 0.1);
	border-radius: 6px;
	.item {
		width: 33%;
		font-size: 13px;
		color: #666;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		height: 86px;
		.point {
			display: inline-block;
			width: 40px;
			height: 40px;
			box-sizing: border-box;
			border-width: 3px;
			border-color: #d5d5d5;
			background: #fff;
			border-style: solid;
			border-radius: 50px;
			position: absolute;
			i {
				color: #d5d5d5;
				font-size: 26px;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				position: absolute;
				font-weight: 600;
			}
		}
		.line {
			width: 100%;
			height: 3px;
			background: #e4e7ed;
		}
		.item-right {
			text-align: center;
			position: absolute;
			transform: translateX(-50%);
			left: 20px;
			top: 80px;
			min-height: 62px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.content {
				margin-bottom: 8px;
			}
			.person,
			.time {
				color: #666;
			}
			.btn {
				background: #57dabb;
				color: #fff;
				font-size: 14px;
				padding: 3px 10px;
				border-radius: 40px;
				cursor: pointer;
			}
		}
	}
}
.title {
	color: #606060;
	i {
		color: #56d9b9;
		margin-left: 5px;
	}
}
.leadPerson {
	box-shadow: 0 0 2px 2px rgba(154, 154, 154, 0.1);
	border-radius: 6px;
	padding: 20px 30px;
	& > div {
		display: flex;
		justify-content: flex-start;
		padding: 10px 0;
		color: #666;
		span {
			i {
				color: #fff;
				width: 20px;
				height: 20px;
				display: inline-block;
				background: #58d9bb;
				border-radius: 50%;
				font-size: 12px;
				text-align: center;
				line-height: 20px;
				font-style: normal;
				margin-right: 20px;
			}
			font-size: 14px;
			width: 320px;
			text-align: left;
		}
	}
}
.remark {
	display: flex;
	img {
		width: 260px;
		margin-right: 20px;
	}
	.tex {
		flex: 1;
		font-size: 14px;
		line-height: 30px;
		span {
			font-size: 15px;
			font-weight: 600;
		}
	}
}
</style>