<template>
	<view class="content">
		<view style="height: calc(100vh); background-color:  #F4F4F4;">
		<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="http://www.nuoyunr.com/lananRsc/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.buyName}}</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>
			</view>
			<view class="bd-tel" @click="callUser(detailData.workerPhone)">
				<uni-icons type="phone" color="#0D2E8D" size="16"></uni-icons>
				<text>联系招待员</text>
			</view>
		</view>

	<!-- 	<view class="x-box">
			<view class="bottomx"  @click="xling = true">
				<uni-icons type="compose" color="#0D2E8D" size="16"></uni-icons>
				<text>添加检测信息</text>
			</view>
		</view> -->
			<view class="x-box">
				<view class="dix">
						<view class="h-title">开始时间：</view>
						<view class="dis-hui" style="width: 50%;">
								<text>{{detailData.startTime}}</text>
						</view>
				</view>
				<view class="dix">
						<view class="h-title">结束时间：</view>
						<view class="dis-hui" style="width: 50%;">
								<text>{{detailData.endTime || ''}}</text>
						</view>
				</view>

				<view class="di-bottom">
					<view class="dix">
							<view class="h-title">{{detailData.remark || ''}}</view>
					</view>
				<view class="sshi" v-if="detailData.isPass == '0'">
					<image :src="imgurl + '/noPass.png'" mode=""></image>
				</view>
				<view class="sshi" v-if="detailData.isPass == '1'">
					<image :src="imgurl + '/pass.png'" mode=""></image>
				</view>
				</view>
			</view>

			<!-- Mzhan -->
			<view class="zdxdbt" v-if="detailData.isPass == '0'">
				<view class="">推荐M站</view>
				<view class="" @click="goM()">
					<text>更多</text>
					<uni-icons type="right" size="14"></uni-icons>
				</view>
			</view>
	<view class="d-box" v-for="(item,index) in listarr" :key="index" v-if="detailData.isPass == '0'">
		<view class="box-top">


			<view class="top-tile">
				<view class="dix">
				<view class="da">{{item.siteName}}</view>
				<view class="dda">{{item.siteAddress}}</view>

				<!-- <view class="huang">{{item.averageScore}} <uni-icons type="star-filled" color= "#FF9600" size="14"></uni-icons></view> -->
				</view>
				<view class="dix">
					<view class="sanyuan">
						<view class="xhui">联系人:</view>
						<view class="dda">{{item.siteContractName}}</view>
					</view>

						<view class="sanyuan">
							<view class="xhui">联系人电话:</view>
							<view class="dda">{{item.siteContractPhone}}</view>
						</view>

				</view>
			</view>
		<view class="" @click="fang(item.latitude,item.longitude)">
			<view class="top-anniu">
				<uni-icons type="paperplane-filled" color="#ffffff" size="24"></uni-icons>
			</view>
			<view v-if="item.distance >=1000" class="ddaa">{{(item.distance/1000).toFixed(2)}} <text class="xhei">km</text> </view>
		</view>
		</view>
		<scroll-view scroll-x="true" class="box-bottom">
			<view class="santu" v-for="(items,index) in item.goodsList" :key="index">
				<view class="simg">
					<image :src=" baseUrl + items.goodsImage" mode=""></image>
				</view>
				<view class="ming">{{items.goodsTitle}}</view>
				<view class="jus">￥{{items.price / 100}}</view>
			</view>
		</scroll-view>

	</view>
<!-- jieshu -->
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
	import upload from '@/utils/upload.js'
	export default {
		data() {
			return {
				imgurl:this.$imgeUrl,
				hge:false,
				show:false,
				xling:false,
				baseUrl:this.$baseUrl,
				geindex:0,
				detailData:{},
				inspectionInfoId:'',
				stepInfo:{isPass:"0"},
				lei:'请选择车辆类型',
				columns: [],
				cph:'',
				longitude:"105.442024",
				latitude:"28.871325",
				siteName:'',
				pageNum: 1,//第几页
				pageSize: 20,//一页多少张
				totalPages: 0,//总数
				fileList1:[],
				fileList2:[],
				isPass:"0",
				remark:'',
				listarr:[],
				sfou:[
					{text:'合格',value:"1"},
					{text:'不合格',value:"0"},
				]
			}
		},
		onLoad(option) {
			this.inspectionInfoId = option.inspectionInfoId
			this.getindex()
			this.getlist()
		},
		onReachBottom() {
			console.log("分页")
			if (this.pageNum >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})
			} else {
				this.pageNum++
				console.log(222)
				this.getlist()
			}
		},
		methods:{
			async getlist(){
				let that = this
					// 列表获取
					uni.getLocation({
						type: 'wgs84',
						success: function (res) {
							let data = {
									longitude:res.longitude,
									latitude:res.latitude,
									siteName:that.siteName,
									pageSize:that.pageSize,
									pageNum:that.pageNum
								}
							 request({

								url: '/inspection/info/list',
								method: 'get',
								params: data
							}).then(res=>{
								if (that.pageNum != 1){
									that.listarr = that.listarr.concat(res.rows)
								}else{
									that.listarr = res.rows
									}
								let total =  res.total
								that.totalPages = Math.ceil(total / that.pageSize);
							})
						},fail(e) {
							let data = {
									longitude:that.longitude,
									latitude:that.latitude,
									siteName:that.siteName,
								pageSize:that.pageSize,
								pageNum:that.pageNum
								}
							 request({

								url: '/inspection/info/list',
								method: 'get',
								params: data
							}).then(res=>{
								if (that.pageNum != 1){
									that.listarr = that.listarr.concat(res.rows)
								}else{
									that.listarr = res.rows
									}
								let total =  res.total
								that.totalPages = Math.ceil(total / that.pageSize);
							})
						}
					});


			},

			// M
			callUser(phone){
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			goM(){
				uni.navigateTo({
					url:'/pages/M/M'
				})
			},
			async submit(){
				let inspectionInfo = {
					id:this.inspectionInfoId,
					isPass:this.isPass,
					remark:this.remark
				}
				let res = await request({
					url:'/partnerOwn/partner/stopInspection',
					method: 'post',
					data:inspectionInfo
				})
				if(res.code == 200){
					this.closehge()
					uni.showToast({
						title:"成功",

					})
					uni.reLaunch({
						url:'/pages/staff/staff'
					});
				}
				if(res.code == 500){
					console.log('执行');
					uni.reLaunch({
						url:'/pages/staff/staff'
					});
				}
			},
			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:'/appInspection/order/inspectionDetail',
					method: 'get',
					params:{
						inspectionInfoId:this.inspectionInfoId
					}
				})
				this.detailData = res.data

			},

			getback(){
				uni.navigateBack()
			},
			Nnimamadewen(value,index){
				this.isPass = value
				this.geindex = index
			},
			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%;
	}
	.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;
	}
	.di-bottom{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.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;
	}
	.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{

	}
	.zdxdbt{
		width: 100%;
		background-color: white;
		box-sizing: border-box;
		padding: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.dix{
		display: flex;
		align-items: center;
	}
	.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;
	}
	.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;
	}
	.sshi{
		width: 40%;
		height: 115px;
		box-sizing: border-box;
		padding: 10px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.dil{
		box-sizing: border-box;
		background-color: #F6F6F6;
		padding: 0px 12px;
	}
	.lan{
		color: #0D2E8D;
	}
	.dis{
		display: flex;
		align-items: center;
	}
	.dix{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.d-box{
		background: #FFFFFF;
		border-radius: 8px;
		padding: 10px;
		// margin-top: 10px;
	}
	.box-top{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.touxiang{
		width: 70px;
		height: 70px;
		border-radius: 8px;
		box-sizing: border-box;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.bjimg{
		width: 255px;
		height: 236px;
		margin: 0px auto;
		margin-top: 100px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.top-tile{
		width: 80%;
		margin-left: 15px;
	}
	.da{
		font-size: 20px;
		font-weight: bold;
		color: #333333;

	}

	.huang{
		margin-left: 20px;
		color: #FF9600;
		font-size: 14px;
	}
	.top-anniu{
		width: 35px;
		height:35px;
		background: #0D2E8D;
		border-radius: 50%;
		display: flex;
		font-size: 14px;
		justify-content: center;
		align-items: center;
		color: white;
		margin: 0 auto;
	}
	.box-cont{
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 15px;
	}
	.sanyuan{
		margin-top: 5px;
		text-align: center;
		display: flex;
		align-items: center;
	}
	.dda{
		font-size: 16px;
		font-weight: 500;
		color: #333333;
		margin-right: 10px;
	}
	.ddaa{
		font-size: 12px;
		font-weight: 500;
	}
	.xhui{
		font-size: 16px;
		font-weight: 400;
		color: #999999;
		margin-right: 5px;
	}
	.xbox{
		width: 100%;
		display: flex;
	}
	.xhei{
		font-size: 14px;
		font-weight: 400;
		color: #333333;
		margin-left: 5px;
	}
	.box-bottom{
		width: 100%;
		box-sizing: border-box;
		white-space: nowrap;
		// display: flex;
		// justify-content: space-between;
		// align-items: center;

	}
	.santu{
		width: 32%;
		display: inline-block;
		// width: 100px;
		margin-top: 15px;
		margin-right: 10px;
	}
	.simg{
		width: 100%;
		height: 80px;
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.ming{
		width: 100%;
		 white-space: nowrap;
		 overflow: hidden;
		 text-overflow: ellipsis;
		font-size: 15px;
		font-weight: 400;
		color: #333333;
		margin: 0px auto;
	}
	.jus{
		font-size: 15px;
		font-weight: bold;
		color: #FF571A;
	}
	.c-top{
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		padding-top: 22%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}
	.c-t-input{
		width: 80%;
		background-color: #F0F0F0;
		color: #BCBCBC;
		height: 40px;
		border-radius: 50px;
		display: flex;
		align-items: center;
		padding: 0px 10px;
		box-sizing: border-box;
	}
	.c-title{
		font-size: 18px;
		font-weight: bold
	}

	.top-list {
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list-box {
		height: 100%;
		width: 33%;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	/* 遮罩 */
	.xuanx {
		position: fixed;
		top: 260rpx;
		width: 100%;
		height: calc(100vh);
		background: rgba(0, 0, 0, 0.2)
	}
	.nbian{
		padding-top: 45px;
	}

	.x-xiang {
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.x-ing {
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 30rpx;

	}

	.ann {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		background: #F2F6FF;
		border-radius: 24rpx;
		padding: 10rpx 30rpx;
		color: #666666;
		font-size: 28rpx;
		margin-right: 20rpx;
		margin-bottom: 30rpx;
	}

	.ax {
		font-size: 28rpx;
		background: #0D2E8D;
		color: white !important;
	}

	.xsanniu {
		border-top: 1px solid #EEEEEE;
		background: white;
		box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wc {
		width: 436rpx;
		height: 80rpx;
		background: #0D2E8D;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		color: white;
		font-size: 32rpx;
		justify-content: center;
	}

	.fanhu {
		width: 224rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		border: 2rpx solid #0D2E8D;
		display: flex;
		align-items: center;
		color: #0D2E8D;
		justify-content: center;
	}
</style>
