<template>
	<view class="details">
		<navbar title="工单详情" :isCenter="true" :back="true"></navbar>
		<view class="content">
			<view class="order">
				<view class="orderItem">
					<view class="orderTitle">
						<view class="titleName">{{detaildInfo.product_pattern}}</view>
						<view :class="detaildInfo.status==1?'titleStatus progress'
								:detaildInfo.status==4?'titleStatus already'
								:detaildInfo.status==5?'titleStatus failed':'titleStatus'">
							{{detaildInfo.status==1?'调试中'
							:detaildInfo.status==2?'待审核人员验收'
							:detaildInfo.status==3?'待用户验收'
							:detaildInfo.status==4?'已验收'
							:detaildInfo.status==5?'验收失败':''
							}}
						</view>
					</view>
					<view class="itemContent">
						<view class="contentItem">
							<view class="left">条形码编号</view>
							<view class="right">{{detaildInfo.barcode}}</view>
						</view>
						<view class="contentItem">
							<view class="left">产品类型</view>
							<view class="right">{{detaildInfo.product_type}}</view>
						</view>
						<view class="contentItem">
							<view class="left">产品型号</view>
							<view class="right">{{detaildInfo.product_pattern}}</view>
						</view>
						<view class="contentItem">
							<view class="left">产品数量</view>
							<view class="right">{{detaildInfo.product_num}}</view>
						</view>
						<view class="contentItem">
							<view class="left">循环承压类型</view>
							<view class="right">{{detaildInfo.pressure_type}}</view>
						</view>
						<view class="contentItem">
							<view class="left">条形码编号2</view>
							<view class="right">{{detaildInfo.barcode2}}</view>
						</view>
						<view class="contentItem">
							<view class="left">条形码编号3</view>
							<view class="right">{{detaildInfo.barcode3}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="order">
				<view class="orderItem">
					<view class="itemContent">
						<view class="contentItem">
							<view class="left">代理商</view>
							<view class="right">{{detaildInfo.agent_company_name}}</view>
						</view>
						<view class="contentItem">
							<view class="left">城市</view>
							<view class="right">{{detaildInfo.city}}</view>
						</view>
						<view class="contentItem">
							<view class="left">姓名</view>
							<view class="right">{{detaildInfo.agent_name}}</view>
						</view>
						<view class="contentItem">
							<view class="left">电话</view>
							<view class="right">{{detaildInfo.agent_mobile}}</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="install">
			<view class="title">
				安装调试记录
			</view>
			<view class="empty" v-if="recordList.length==0">
				<image src="../../static/detailEmpty.png" mode="widthFix"></image>
				<view class="text">暂无进展</view>
			</view>
			<view v-if="recordList.length!=0" class="recordList">
				<view class="recordItem" v-for="(item,index) in recordList" :key="index">
					<view class="title">
						<image src="../../static/shij.png" mode=""></image>
						<text>验收项：{{item.acceptance}}</text>
					</view>
					<view class="time">
						<view class="timeText">
							{{item.createtime}}
						</view>
						<view class="people">
							<image src="../../static/r.png" mode=""></image>
							<text>{{item.user_name}}</text>
						</view>
					</view>
					<view class="textContent">
						{{item.record}}
					</view>
					<view class="picGroup">
						<image :src="i" v-for="(i,p) in item.image" :key="p" @click="goPreview(i)" mode="aspectFill"></image>
						
					</view>
				</view>
				
			</view>
		</view>
		<view class="bottomBtn">
			<view class="btn" @click="installRule">安装规范</view>
			<view class="btn" @click="goRecordDetails">验收记录</view>
			<view class="btn add" @click="addLogHandle">添加记录</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/navbar.vue'
	import {getDetails,getInstallLog} from '@/common/api.js'
	export default {
		components:{navbar},
		data() {
			return {
				recordList:[],
				id:null,
				detaildInfo:{
					
				}
			}
		},
		onLoad(option) {
			this.id=option.id
			this.getDetails()
			this.getInstallLog()
		},
		onShow() {
			this.getInstallLog()
		},
		methods: {
			getDetails(){
				getDetails({id:this.id,custom: { auth: true }}).then(res=>{
					let obj = JSON.parse(JSON.stringify(res.data))
					
					for(let i in obj){
						this.$set(this.detaildInfo,i,obj[i])
					}
					uni.setStorageSync('acceptance',this.detaildInfo.acceptance)
				})
			},
			getInstallLog(){
				getInstallLog({wordorder_id:this.id,custom: { auth: true }}).then(res=>{
					this.recordList = res.data;
				})
				
			},
			goRecordDetails(){
				uni.navigateTo({
					url:'/pages/index/acceptRecord?id='+this.id
				})
			},
			installRule(){
				uni.navigateTo({
					url:'/pages/index/file?id='+this.id
				})
			},
			addLogHandle(){
				uni.navigateTo({
					url:'/pages/index/addRecord?id='+this.id
				})
			},
			goPreview(url){
				let imgs =[]
				imgs.push(url)
				uni.previewImage({
					urls:imgs,
					current:0
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.details{
	min-height: calc(100vh);
	background-color: #F4F5F7;
	padding-bottom: 30rpx;
}
.order{
	.orderItem{
		background: #FFFFFF;
		border-radius: 10rpx;
		margin:20rpx 24rpx;
		.orderTitle{
			display:flex;
			justify-content: space-between;
			padding:36rpx 30rpx;
			border-bottom:1px solid #EAEAEA;
			.titleName{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.titleStatus{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #8EC31F;
			}
			.progress{
				color: #8EC31F;
			}
			.already{
				color:#999999;
			}
			.failed{
				color:#E72525;
			}
		}
		.itemContent{
			padding:27rpx 30rpx;
			:first-child{
				margin-top:0rpx !important;
			}
			.contentItem{
				display: flex;
				margin-top:36rpx;
				
				.left{
					width: 170rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					margin-right:52rpx;
					text-align-last: justify;
				}
				.right{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
				}
			}
			
			
		}
	}
}
.install{
	background: #FFFFFF;
	border-radius: 10rpx;
	padding:31rpx;
	margin:0 24rpx;
	margin-bottom: 120rpx;
	.title{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.empty{
		margin:97rpx 0;
		text-align: center;
		&>image{
			width:323rpx;
			height:auto;
		}
		.text{
			margin-top:24rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #222222;
		}
	}
}
.bottomBtn{
	height: 110rpx;
	background: #FFFFFF;
	border: 1px solid #EAEAEA;
	box-shadow: 0px 2px 8px 0px rgba(1,6,14,0.05);
	position: fixed;
	width: 100%;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	// padding:0 24rpx 0 0;
	.btn{
		background: #FFFFFF;
		border: 1px solid #8EC31F;
		border-radius: 39px;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #8EC31F;
		padding:27rpx 40rpx;
		height: auto;
		margin-left:30rpx;
	}
	.add{
		background: #8EC31F;
		color:#ffffff;
		margin-right:24rpx;
	}
}
.recordList{
	.recordItem{
		margin-top:30rpx;
		border-bottom:1px solid #EAEAEA;
		padding-bottom:20rpx;
		.title{
			display: flex;
			align-items: center;
			image{
				width:44rpx;
				height:44rpx;
			}
			text{
				font-size: 26rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #333333;
			}
		}
		.time{
			padding-left:44rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.timeText{
				
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #999999;
			}
			.people{
				display: flex;
				align-items: center;
				image{
					width:44rpx;
					height:44rpx;
				}
				text{
					font-size: 26rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #333333;
				}
			}
		}
		.textContent{
			margin: 20rpx 12rpx;
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #333333;
			line-height: 36rpx;
		}
		.picGroup{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			image{
				// width:30%;
				width: 200rpx;
				height: 120rpx;
				background: #E5E6E8;
				border: 1px solid #EAEAEA;
				border-radius: 4px;
				margin-bottom:16rpx;
			}
		}
		.picGroup :last-child {
		     /* 让最后一个元素的右边距自动适应，从而实现左对齐的效果。*/
		    margin-right: auto; 
			margin-left:10rpx;
		}
	}
}
</style>
