<template>
	<view class="content">
		<view class="top-heder">
			<view class="t-left" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="t-title">
				<text>检测详情</text>
			</view>
			<view class="t-you"></view>
		</view>
		<view class="x-box">
			<view class="box-top">
				<view style=" width: 100%;">
					<view class="touxiang" v-if="!detailData.workerAvatar">
						<image src="../../static/detection/touxiang.png" mode=""></image>
					</view>
					<view v-else>
						<image :src="baseUrl+detailData.workerAvatar" mode=""></image> 
					</view>
					<view class="sanniu">
						<text>{{detailData.workerName}}</text>
					</view>
				</view>
			
				
			</view>
			<view class="box-dis">
				<view class="shop-img">
					<image :src="baseUrl+detailData.goodsImage" mode=""></image>
				</view>
				<view class="ds-right">
					<view class="h-title">{{detailData.goodsName}} </view>
					<view class="dis-hui">
						<text>预约人：</text>
						<text>{{detailData.buyUserName}}</text>
					</view>
					<view class="dis-hui">
						<text>手机号：</text>
						<text>{{detailData.buyUserPhone}}</text>
					</view>
					<view class="dis-hui">
						<text>车型：</text>
						<text>{{detailData.carType}}</text>
					</view>
					<view class="dis-hui">
						<text>车牌号：</text>
						<text>{{detailData.carNum}}</text>
					</view>
					<view class="dis-hui">
						<text>商品价格：</text>
						<text>{{detailData.goodsPrice/100}}元</text>
					</view>
				</view>
			</view>
			<view class="bd-tel" @click="callUser(detailData.buyUserPhone)">
				<uni-icons type="phone" color="#0D2E8D" size="16"></uni-icons>
				<text>联系用户</text>
			</view>
		</view>
		<view class="x-box">
			<view class="h-title">订单详情</view>
			<view class="on-input">
				<view class="o-left">订单编号：</view>
				<view class="o-right">{{detailData.orderNo}}</view>
			</view>
			<view class="on-input">
				<view class="o-left">折扣：</view>
				<view class="o-right">{{detailData.reduceMoney/100}}</view>
			</view>
			<view class="on-input">
				<view class="o-left">优惠金额：</view>
				<view class="o-right">{{detailData.couponDiscount/100}}</view>
			</view>
			<view class="on-input">
				<view class="o-left">核销人：</view>
				<view class="o-right">{{detailData.validationRealName}}</view>
			</view>
			<view class="on-input">
				<view class="o-left">核销时间：</view>
				<view class="o-right">{{detailData.validationTime}}</view>
			</view>
			<view class="bottomxx" v-if="isOnline&&isOnline==0&&orderStatus&&orderStatus==0" @click="xling = true">
				<view class="">结算</view>
			</view>
			<view class="bottom-input">
				<view class="o-left">实付金额：</view>
				<view class="o-zui">{{(detailData.payMoney+detailData.balance)/100}}元</view>
			</view>
		</view>

		<view class="x-box" v-for="(item,index) in detailData.stepInfos">
			<view class="h-title" style="display: flex;align-items: center;justify-content: space-between;">
				<text>{{item.title}} </text>
				<text class="times">{{item.createTime}}</text>
			</view>
			<view class="">
					<text>{{item.content}}</text>
			</view>
<!-- 			<view class="imgs-warp">
				<view class="imgss" v-for="(item,index) in item.images.split(',')" :key="index">
					<image :src="baseUrl+item" mode=""></image>
				</view>
			</view> -->
	
		</view>
	
		<view class="annniu" v-if="detailData.status&&detailData.status == 0" @click="hge = true">
			<view class="">结束检测</view>
		</view>
		<view class="annniu" v-if="detailData.status&&detailData.status == 1&&detailData.isPass&&detailData.isPass ==1&&detailData.makeCert!=1" @click="dialogToggle" >
					<view class="">制证完成</view>
		</view>
		<u-picker :show="show" :columns="columns"  keyName="dictLabel" @close="close" @confirm="confirm" @change="change" @cancel="cancel"></u-picker>
		<u-popup :show="hge" @close="closehge" :round="10"  @open="openxl">
		    <view class="popup-box">
				<view class="t-title">是否合格</view>
				<view class="on-inputx">
					<view class="anniu" :class="{'an':geindex == index}" v-for="(item,index) in sfou" :key="index" @click="Nnimamadewen(item.value,index)">
						<text>{{item.text}}</text>
					</view>
					
				</view>
				<view class="t-title" v-if="geindex == 1">重审/退办</view>
				<view class="on-inputx" v-if="geindex == 1">
					<view class="anniu" :class="{'an':isRetrial == item.value}" v-for="(item,index) in cstb" :key="index" @click="shenmowanyi(item.value,index)">
						<text>{{item.text}}</text>
					</view>
					
				</view>
				<view class="on-inputx">
					<text>说明：</text>
				<!-- 	<input type="text" placeholder="请输入内容"> -->
				</view>
				<u--textarea v-model="remark" placeholder="请输入内容" border="bottom"></u--textarea>
				<view class="bottomx"  @click="submit()" >
					<uni-icons type="compose" color="#0D2E8D" size="20"></uni-icons>
					<text>提交</text>
				</view>
				
		        
		    </view>
		</u-popup>
		<u-popup :show="xling" @close="closexl" :round="10"  @open="openxl">
		    <view class="popup-box">
				<view class="t-title">线下订单</view>
					
				<view class="on-inputx">
					<text>商品价格：</text>
				<text>{{detailData.goodsPrice/100}}元</text>
				</view>
				
				<view class="on-inputx">
					<text>优惠金额：</text>
					<input type="number" v-model="reduceMoney" @input="jisuan" placeholder="请输入优惠金额">
				</view>
				<view class="on-inputx">
					<text>实付金额：</text>
					<input type="number" v-model="payMoney" placeholder="请输入实付金额">
				</view>
				<view class="on-inputx">
					<text>付款方式：</text>
			
				</view>
				<view class="warp-box">
				
					<view class="lan-box" :class=" {'lantong':payType == item.dictValue  } " v-for="(item,index) in shelist" :key="index" @click="xuanxiaolan(item)">
						{{item.dictLabel}}
					</view>
				</view>
				<view class="on-inputx">
					<text>收款账号：</text>
					<input type="text" v-model="receivablesAccount" placeholder="请输入收款账号">
				</view>
				<view class="on-inputx">
					<text>备注：</text>
			
				</view>
				<u--textarea  v-model="payRemark" placeholder="如果存在组合付款方式,请在备注中描述清楚" border="bottom"></u--textarea>
			
				
					<view class="bottomx"  @click="tiijiao()" style="margin-top: 10px;">
						<uni-icons type="compose" color="#0D2E8D" size="20"></uni-icons>
						<text>提交</text>
					</view>
		    </view>
		</u-popup>
		<uni-popup ref="alertDialog" type="dialog">
						<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" title="通知" content="您确定制证完成吗" @confirm="dialogConfirm"
							@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
	import upload from '@/utils/upload.js'
	export default {
		data() {
			return {
			reduceMoney:null,
			payMoney:null,
			payType:'',
			receivablesAccount:'',
			orderStatus:null,
			payRemark:'',
			isRetrial:1,
				isOnline:1,
				hge:false,
				show:false,
				xling:false,
				baseUrl:this.$baseUrl,
				geindex:0,
				detailData:{},
				inspectionInfoId:'',
				stepInfo:{isPass:"0"},
				lei:'请选择车辆类型',
				columns: [],
				cph:'',
				fileList1:[],
				fileList2:[],
				shelist:[],
				isPass:"1",
				remark:'',
				sfou:[
					{text:'合格',value:"1"},
					{text:'不合格',value:"0"},
				],
				cstb:[
					{text:'重审',value:"1"},
					{text:'退办理',value:"0"},
				]
			}
		},
		onLoad(option) {
			this.inspectionInfoId = option.inspectionInfoId
			
		},
		onShow() {
			this.getindex()
		},
		methods:{
			dialogToggle() {
				this.$refs.alertDialog.open()
						},
			async dialogConfirm() {
				let data = {
					inspectionId:this.inspectionId
				}
				let res = await request({
					url:'/partnerOwn/partner/makeCertOk',
					method: 'post',
					params:data
				})	
				if(res.code == 200){
						console.log('点击确认')
						uni.showToast({
							title:'操作成功'
						})
						this.getindex()
					this.$refs.alertDialog.close()
				}
						},
			dialogClose() {
				this.$refs.alertDialog.close()
						console.log('点击关闭')
					},
			jisuan(){
				if(this.reduceMoney>(this.detailData.goodsPrice/100)){
					this.reduceMoney = this.detailData.goodsPrice/100
				}
			this.payMoney =	(this.detailData.goodsPrice/100)- this.reduceMoney
			},
			async tiijiao(){
					
				if( !this.payMoney ||!this.payType){
					uni.showToast({
						title:'实付金额与付款方式不能为空！',
						icon:'none'
					})
					return
				}
				let data = {
					reduceMoney:this.reduceMoney?this.reduceMoney*100:0,
					payMoney:this.payMoney*100,
					payType:this.payType,
					receivablesAccount:this.receivablesAccount,
					payRemark:this.payRemark,
					inspectionId:this.inspectionId,
				}
				let res = await request({
					url:'/partnerOwn/partner/offlineCharging',
					method: 'post',
					data:data
				})	
				console.log(res);
				if(res.code = 200){
					uni.showToast({
						title:"提交成功"
					})
						this.getindex()
					this.xling = false
				}
			},
			callUser(phone){
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			async submit(){
				let inspectionInfo = {
					id:this.inspectionInfoId,
					isPass:this.isPass,
					isRetrial:this.isRetrial,
					remark:this.remark
				}
				let res = await request({
					url:'/partnerOwn/partner/stopInspection',
					method: 'post',
					data:inspectionInfo
				})	
				if(res.code == 200){
					this.getindex()
					uni.showToast({
						title:"成功",
						
					})	
					uni.navigateBack();
				}
				if(res.code == 500){
					console.log('执行');
					uni.navigateBack();
				}
			},
			closehge(){
				this.hge = false
			},
			async addStepInfo(){
				console.log(this.fileList2)
				this.stepInfo.images = this.fileList2.join(",")
				this.stepInfo.inspectionInfoId = this.inspectionInfoId
				let res = await request({
					url:'/partnerOwn/partner/addStepInfo',
					method: 'post',
					data:this.stepInfo
				
				})	
				if(res.code == 200){
					this.fileList1 =[]
					this.fileList2 =[]
					this.stepInfo = {}
					this.xling = false
					uni.showToast({
						title:"成功",
					})	
					this.getindex()
					
				uni.reLaunch({
					url:'/pages/index/ordermanage'
				})
					
				}
				if(res.code == 500){
					uni.showToast({
						title:"已结束",
					})	
					uni.reLaunch({
						url:'/pages/index/ordermanage'
					})
				}
			},
			async getindex(){
				
				let res = await request({
					url:'/partnerOwn/partner/inspectionDetail',
					method: 'get',
					params:{
						inspectionInfoId:this.inspectionInfoId
					}
				})	
				this.detailData = res.data
				this.inspectionId = res.data.inspectionId
				this.isOnline = res.data.isOnline
				this.orderStatus = res.data.orderStatus
				this.payMoney = res.data.goodsPrice/100
				console.log('执行',this.isOnline);
				
			
				let she = await request({
					url:'/system/dict/data/type/pay_type',
					method: 'get',
				})
				this.shelist = she.data
				console.log(this.shelist);

				
			},
			xuanxiaolan(item){
				console.log(item);	
				this.payType = item.dictValue
			},
			
			getback(){
				uni.navigateBack()
			},
			Nnimamadewen(value,index){
				this.isPass = value
				this.geindex = index
			},
			shenmowanyi(value,index){
				this.tbindex = value
				this.isRetrial = value
			},
			closexl(e){
				this.xling = false
				console.log('n');
				
			},
			openxl(e){
				console.log('y');
			},
			close(e){
				console.log(e);
			},
			confirm(e){
				this.show = false,
				console.log(e.value[0].dictLabel);
				this.lei = e.value[0].dictLabel
			},
			change(e){
				console.log(e);
			},
			cancel(e){
					this.show = false,
				console.log(e);
			},
			// 删除图片
					deletePic(event) {
						this[`fileList${event.name}`].splice(event.index, 1)
					},
					// 新增图片
					async afterRead(event) {
						// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
						let lists = [].concat(event.file)
						let fileListLen = this[`fileList${event.name}`].length
						lists.map((item) => {
							this[`fileList${event.name}`].push({
								...item,
								
							})
						})
						for (let i = 0; i < lists.length; i++) {
							const result = await this.uploadFilePromise(lists[i].url)
							let item = this[`fileList${event.name}`][fileListLen]
							this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
								status: 'success',
								message: '',
								url: result
							}))
							fileListLen++
						}
					},
					uploadFilePromise(url) {
						console.log(url);
						upload({						
							url:'/common/upload',
							filePath: url,				
						}).then((res)=>{
							// this.newsCover =  res.fileName
							this.fileList2.push(res.fileName)
							console.log(res);
						})
					
					},
					deletePic1(event) {
						this[`fileList${event.name}`].splice(event.index, 1)
					},
		}
	}
</script>

<style scoped lang="scss">
	image{
		width: 100%;
		height: 100%;
	}
	.lantong{
			background-color: #0D2E8D !important;
			color: white;
	}
	.lan-box{
		font-size: 14px;
		margin: 5px 10px;
		padding: 5px;
		box-sizing: border-box;
		background-color: #F4F4F4;
		border-radius: 4px;
		
	}
	.warp-box{
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		
		
	}
	.content {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		background: #F4F4F4;
	}
	
	.top-heder{
		width: 100%;
		// height: 46px;
		background: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 5px 15px;
		padding-top: 45px;
		padding-bottom: 15px;
		margin-bottom: 10px;
	}
	.t-title{
		font-size: 17px;
		font-weight: bold;
		color: #333333;
	}
	.t-left{
		width: 10%;
	}
	.t-you{
		height: 100%;
		width: 10%;
	}
	.x-box{
		width: 95%;
		margin: 10px auto;
		background: #FFFFFF;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 10px;
		background: white;
		// display: flex;
		// align-items: center;
		// justify-content: center;
	}
	.bottomx{
		margin: 0 auto;
		width: 225px;
		height: 46px;
		border-radius: 6px 6px 6px 6px;
		opacity: 1;
		border: 1px solid #0D2E8D;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #0D2E8D;
	}
	.bottomxx{
		position: fixed;
		right: 10px;
		bottom: 150px;
		width: 46px;
		height: 46px;
		border-radius:50%;
		opacity: 1;
		border: 1px solid #0D2E8D;
		background: #0D2E8D;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}
	.touxiang{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;
		margin: 10px auto;
		
	}
	.sanniu{
		width: 105px;
		height: 35px;
		background: #0D2E8D;
		border-radius: 50px; 
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 15px;
		margin: 0 auto;
	}
	.xiamxia{
		width: 30%;
		height: 30px;
		background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
		border-radius: 50px; 
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 15px;
		margin: 15px auto;
	}
	.annniu{
		width: 90%;
		height: 45px;
		background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
		border-radius: 50px; 
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 15px;
		margin: 15px auto;
	}
	.banniu{
		width: 20%;
		height: 30px;
		background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
		border-radius: 50px; 
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		font-weight: 400;
		color: #FFFFFF;
	}
	.box{
	
	}
	.box-dis{
		box-sizing: border-box;
		padding: 15px;
		// border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
	}
	.shop-img{
		width: 125px;
		height: 125px;
		border-radius: 8px;
		overflow: hidden;
		margin-right: 10px;
	}
	.dis-hui{
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 15px;
		font-weight: 400;
		color: #999999;
		margin-bottom: 5px;
	}
	.times{
		font-size: 15px;
				font-weight: 400;
				color: #999999;
				margin-left: 25px;
	}
	.h-title{
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 5px;
	}
	.box-top{
		box-sizing: border-box;
		padding: 15px;
		border-bottom: 1px solid #EEEEEE;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.t-input{
		width: 90%;
		margin: 20px auto;
		border: 1px solid #0D2E8D;
		border-radius: 6px;
		box-sizing: border-box;
		padding: 2px 5px ;
		
	}
	.on-input{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15px auto; 
	}
	.on-inputx{
		width: 100%;
		display: flex;
	
		align-items: center;
		margin: 15px auto; 
	}
	.bottom-input{
		border-top: 1px solid #F4F4F4;
		box-sizing: border-box;
		padding-top: 20px;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.o-left{
		font-size: 15px;
		font-weight: 400;
		color: #666666;
	}
	.o-right{
		font-size: 15px;
		font-weight: 400;
		color: #333333;
	}
	.o-zui{
		font-size: 20px;
		font-weight: 500;
		color: #333333;
	}
	.popup-box{
		overflow: hidden;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
		width: 100%;
		background-color: white;
	}
	.sousuo{
		width: 95%;
		margin: 0 auto;
		margin-left: 0px;
		height: 30px;
		background: #F0F0F0;
		border-radius: 50px;
		color: #999999;
		box-sizing: border-box;
		padding:0 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		input{
			width: 80%;
		}
	}
	.list-box{
		width: 100%;
		height: 300px;
		overflow: hidden;
		box-sizing: border-box;

	}
	.list_scroll{
		height: 100%; // 需设置高度
		display: flex;
		flex-direction: column;

	}
	.list-qiu{
		width: 95%;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding: 10px 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tel{
		margin-left: 5px;
		font-size: 15px;
		font-weight: 400;
		color: #666666;
	}
	.bd-tel{
		width: 100%;
		border-top:1px solid #EEEEEE;
		box-sizing: border-box;
		padding-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #0D2E8D;
		
	}
	.imgs-warp{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
	}
	.imgss{
		width: 32%;
		height: 110px;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
		
	}
	.anniu{
		box-sizing: border-box;
		padding: 2px 10px;
		margin: 0px 10px;
		// background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
		border: 1px solid #0D2E8D;
		border-radius: 23px;
		font-size: 15px;
		color:  #0D2E8D;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.an{
		box-sizing: border-box;
		padding: 2px 10px;
		margin: 0px 10px;
		background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%) !important;
		
		border-radius: 23px;
		font-size: 15px;
		color:  white !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>