<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="border-right: 1px solid  #EEEEEE; width: 50%;">
					<view class="touxiang" v-if="!sureWorker.avatar">
						<image src="../../static/detection/touxiang.png" mode=""></image>
					</view>
					<view v-else>
						<image :src="sureWorker.avatar" mode=""></image> 
					</view>
					<view style="margin-left: 35%;" v-if="sureWorker.workName" class="h-title">{{sureWorker.workName}} </view>
					<view class="sanniu" @click="getWorker()">
						<text>选择接待员</text>
					</view>
				</view>
				<view style=" width: 50%;">
					<view class="t-input">
						<input type="text" v-model="cph" placeholder="请输入车牌号">
					</view>
				<!-- 	<view class="t-input" @click="show = true">
					<text style="color: #0D2E8D;">{{lei}}</text>
					</view> -->
				</view>
				
			</view>
			<view class="box-dis">
				<view class="shop-img">
					<image :src="orderInfo.goodsImage" mode=""></image>
				</view>
				<view class="ds-right">
					<view class="h-title">{{orderInfo.goodsTitle}} </view>
					<view class="dis-hui">
						<text>客户：</text>
						<text>{{orderInfo.buyUserName?orderInfo.buyUserName:""}}</text>
					</view>
					<view class="dis-hui">
						<text>手机号：</text>
						<text>{{orderInfo.buyUserPhone}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="x-box">	
			<view class="h-title">订单详情</view>
			<view class="on-input">
				<view class="o-left">订单编号：</view>
				<view class="o-right">{{orderInfo.orderNo}}</view>
			</view>
			<view class="on-input">
				<view class="o-left">支付时间：</view>
				<view class="o-right">{{orderInfo.payTime}}</view>
			</view>
			<view class="on-input">
				<view class="o-left">商品原价：</view>
				<view class="o-right">{{orderInfo.goodsPrice/100}}</view>
			</view>
			<view class="on-input">
				<view class="o-left">折扣：</view>
				<view class="o-right">{{orderInfo.reduceMoney/100}}</view>
			</view>
			<view class="on-input">
				<view class="o-left">优惠券减免：</view>
				<view class="o-right">{{orderInfo.couponDiscount/100}}</view>
			</view>
			<view class="bottom-input">
				<view class="o-left">实付金额：</view>
				<view class="o-zui">{{(orderInfo.payMoney+orderInfo.balance)/100}}</view>
			</view>
		
		</view>
		<view @click="takeOut()" class="annniu">
			<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="xling" @close="closexl" :round="10"  @open="openxl">
		    <view class="popup-box">
				<view class="sousuo">
					<uni-icons type="search" size="22"></uni-icons>
					<input type="text" v-model="searchValue" placeholder="请输入招待员信息">
					<text @click="getWorker()">搜索	</text>
				</view>
		         <view class="list-box">
					 <scroll-view class="list_scroll"  scroll-y="true" >
					 	<view class="list-qiu" v-for="(item,index) in workerList" :key="index">
						<view class="">{{item.workName}} <text class="tel">{{item.workPhone}}</text> </view>
						<view class="banniu">
							<text @click="sureWorkerFun(item)">选择</text>
						</view>
						</view>
					</scroll-view>
				 </view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
	export default {
		data() {
			return {
				baseUrl:this.$baseUrl,
				show:false,
				xling:false,
				lei:'请选择车辆类型',
				
				columns: [],
				workerList:[],
				cph:'',
				orderId:'',
				partnerId:uni.getStorageSync("partnerId"),
				orderInfo:{},
				searchValue:'',
				sureWorker:{}
			}
		},
		
		onLoad(opion) {
			this.orderId = opion.orderId
			this.getindex()
		},
		methods:{
			async takeOut(){
				if(!this.sureWorker.id){
					uni.showToast({
						title:"请选择招待员",
						icon: "error"
					})
					return
				}
				if(!this.cph){
					uni.showToast({
						title:"请输入车牌号",
						icon: "error"
					})		
					return
				}
			
				let res = await request({
					url:'/partnerOwn/partner/takeOut',
					method: 'post',
					params:{
						partnerId:this.partnerId,
						orderId:this.orderId,
						workId:this.sureWorker.id,
					
						carNum:this.cph
					},
				})	
				if(res.code == 200){
					uni.showToast({
						title:"订单正式开始"
					})
						setTimeout(() => {
						 uni.navigateTo({
						 	url:"/pages/index/index"
						 })	
						}, 1000);
				}else{
					uni.showToast({
						title:"异常错误",
						icon: "error"
					})	
				}
				
			},
			async sureWorkerFun(data){
				this.sureWorker = data
				this.xling = false
			},
			async getWorker(){
				this.xling = true
				let res = await request({
					url:'/partnerOwn/partner/getWorkList',
					method: 'get',
					params:{
						partnerId:this.partnerId,
						workName:this.searchValue,
						pageNum:1,
						pageSize:100,
					},
				})	
				this.workerList = res.rows	
			},
			async getindex(){
				let res = await request({
					url:'/rescue/dict/data/type/inspection_car_type',
					method: 'get',
				})	
				this.columns.push(res.data)	
				let orderRes = await request({
					url:'/partnerOwn/partner/orderDetail',
					method: 'get',
					params:{
						partnerId:this.partnerId,
						orderId:this.orderId
					}
				})	
				this.orderInfo = orderRes.data
				this.cph = orderRes.data.carNum
			},
			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
				this.carType = e.value[0].dictValue
			},
			change(e){
				console.log(e);
			},
			cancel(e){
					this.show = false,
				console.log(e);
			},
		}
	}
</script>

<style scoped lang="scss">
	image{
		width: 100%;
		height: 100%;
	}
	.content {
		box-sizing: border-box;
		width: 100%;
		// height: calc(100vh);
		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;
		ackground: #FFFFFF;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 10px;
		background: 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;
	}
	.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;
	}
	.shop-img{
		width: 80px;
		height: 80px;
		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;
	}
	.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; 
	}
	.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;
	}
</style>