<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>-->
		<headersVue titles="检测详情" style="position: static !important;">
			<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
		</headersVue>
		<view class="x-box">
			<view class="box-dis">
				<view class="shop-img">
					<image :src="baseImageUrl+detailData.goodsImage" mode=""></image>
				</view>
				<view class="ds-right">
					<view class="h-title">{{ detailData.carNum  }}</view>
					<view class="dis-hui">
						<text>车型：</text>
						<text>{{ detailData.carType }}</text>
					</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" style="display: flex; justify-content: space-between; align-items: center;">-->
					<!--            <text>引车员：</text>-->
					<!--            <text>{{ detailData.leadManName }}</text>-->
					<!--            <text style="margin-left: auto; color: blue;" @tap="selectLeadMan">更换引车员</text>-->
					<!--          </view>-->


					<view class="dis-hui">
						<text>检测类型：</text>
						<text>{{ detailData.goodsName }}</text>
					</view>
					<view class="dis-hui" v-if="roleSelect == 'shop'">
						<text>￥：</text>
						<text>{{ detailData.goodsPrice / 100 }}元</text>
					</view>
				</view>
			</view>
			<view class="r-two-box">
				<view class="h-two-box"
					style="margin-bottom: 10px;border-bottom: 1px solid #DDDDDD;box-sizing: border-box;padding-bottom: 10px;">

					<view class="h-two-l">
						<view class="h_title"> 引车员</view>
						<view class="h_name">{{ detailData.leadManName }}</view>
					</view>
					<view v-if="isChangeLeadMan" class="h-two-r" @tap="selectLeadMan">
						<image src="../..//static/imgs/t_.png" mode=""></image>
						<text>更换引车员</text>
					</view>

					<view class="h-two-l" v-if="detailData.meetManName">
						<view class="h_title"> 接车员</view>
						<view class="h_name">{{ detailData.meetManName }}</view>
					</view>
					<view class="h-two-r" v-if="isChangeMeetMan" @tap="selectLeadMan">
						<image src="../..//static/imgs/t_.png" mode=""></image>
						<text>更换接车员</text>
					</view>
				</view>
				<view class="h-two-box" v-if="isShowClient">
					<view class="h-two-l">
						<view class="h_title"> 客户信息</view>
						<view class="h_name">{{ detailData.buyUserName }} {{ detailData.buyUserPhone }}</view>
					</view>
					<view class="h-two-r" @click="callUser(detailData.buyUserPhone)">
						<image src="../..//static/imgs/b_.png" mode=""></image>
						<text>拨打电话</text>
					</view>
				</view>
			</view>
			<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 class="touxiang" v-else>-->
					<!--            <image :src="baseImageUrl+detailData.workerAvatar" mode=""></image>-->
					<!--          </view>-->
					<!--          <view class="sanniu">-->
					<!--            <text>{{ detailData.workerName }}</text>-->
					<!--          </view>-->
					<view class="steps-container">
						<view v-for="(item, index) in detailData.workNodes" :key="index" class="step-item">
							<!-- 圆形图标 -->
							<view class="step-circle"
								:class="{'circle-blue': item.type === '1' && item.status == 2, 'circle-yellow': item.type === '0'}">
							</view>
							<!-- 项目信息 -->
							<view class="step-content">{{ item.projectName }}</view>
						</view>
					</view>
				</view>


			</view>

			<!--      <view class="bd-tel" >-->
			<!--        <uni-icons type="phone" color="#0D2E8D" size="16"></uni-icons>-->
			<!--        <text>联系用户</text>-->
			<!--      </view>-->
		</view>
		<view class="x-box" v-if="roleSelect == 'shop'">
			<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="" style="margin-bottom: 10px" v-for="(item,index) in detailData.stepInfos" :key="index">

			<view class="p_titel" style="display: flex;justify-content: space-between;">
				<view style="margin-right: -15px; display: flex; ">
					<view class="qiu_">{{ index + 1 }}</view>
					<view style="margin-left: 10px">
						<view class="jc_title">
							{{ item.title }}
						</view>
						<view class="jc_name">施工人员:
							{{ item.nickname }}
						</view>
					</view>
				</view>
				<text class="times" v-if="!item.updateTime">{{ item.createTime }}</text>
				<text class="times" v-else
					style="text-align: center">{{ item.createTime }}<br /><text>至</text><br />{{item.updateTime}}</text>

			</view>
			<view class="p_box" v-if="index+1 <detailData.stepInfos.length || (item.images.length > 0 || item.content)">

				<view class="g_hui" v-if="item.images.length > 0 || item.content">
					<view style="margin-bottom: 10px; box-sizing: border-box;" v-if="item.content">{{ item.content }}
					</view>
					<view style="display: flex" v-if="item.images">
						<u-album :urls="item.imageList" :singleSize="70"></u-album>
					</view>
				</view>


			</view>

		</view>
		<view class="annniu"
			v-if="detailData.status&&(detailData.status == 0 || detailData.status == 2)&&workNodeStatus == 1"
			@click="hge = true;getProject();cancelInterval()">
			<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="label" @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="on-inputx">
					<text>备注：</text>
				</view>
				<u--textarea v-model="remark" placeholder="请输入内容" border="bottom"></u--textarea>
				<view class="on-inputx">
					<text>施工图片：</text>
				</view>
				<!--        :sizeType="['compressed']" 压缩图片参数-->
				<u-upload :sizeType="['compressed']" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
					name="1" multiple :maxCount="10"></u-upload>

				<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 v-if="isExamine">
					<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="t-title" v-if="tbindex == 1 && isRetrial == 1 && isPass != '1'">选择复检的项目</view>
					<view class="box_ on-inputx" v-if="tbindex == 1 && isRetrial == 1 && isPass != '1'">
						<view class="box_button " :class="{ 'box_button_x' :csId.includes(item.id)  }"
							v-for="item in selectProject" @click="clickProject(item)">{{ item.projectName }}
						</view>
					</view>
				</view>
				<view class="bottomx" @click="submit()">
					<uni-icons type="compose" color="#0174F6" 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 style="color: red;font-weight: bold;text-align: center;">*</text>
						实付金额：
					</text>
					<input type="number" v-model="payMoney" placeholder="请输入实付金额">
				</view>
				<view class="on-inputx">
					<text>
						<text style="color: red;font-weight: bold;text-align: center;">*</text>
						付款方式：
					</text>

				</view>
				<view class="warp-box">

					<view class="lan-box" :class=" {'lantong':payType == item.value  } " v-for="(item,index) in shelist"
						:key="index" @click="xuanxiaolan(item)">
						{{ item.label }}
					</view>
				</view>
				<view class="on-inputx">
					<text>收款账号：</text>
					<input type="text" @click="bankShow = true" 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>
		<u-picker :show="bankShow" :columns="bankList" @confirm="chooseBank" @cancel="bankShow=false"
			keyName="label"></u-picker>
		<u-picker :show="showLeadMan" :columns="leadManList" :defaultIndex="defaultIndex" @confirm="confirmLeadMan"
			@cancel="cancelLeadMan" keyName="nickname"></u-picker>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog 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'
	import headersVue from "@/components/header/headers.vue";

	export default {
		components: {
			headersVue
		},
		data() {
			return {
				baseImageUrl: this.$baseImageUrl,
				reduceMoney: null,
				payMoney: null,
				payType: '',
				receivablesAccount: '',
				orderStatus: null,
				payRemark: '',
				bankList: [],
				bankShow: false,
				isRetrial: 1,
				showLeadMan: false,
				tbindex: 1,
				isOnline: 1,
				hge: false,
				roleSelect: '',
				orImages: false,
				isShowClient: true,
				show: false,
				xling: false,
				leadManList: [],
				baseUrl: this.$baseUrl,
				geindex: 0,
				detailData: {},
				inspectionInfoId: '',
				workNodeId: '',
				workNodeStatus: '',
				stepInfo: {
					isPass: "0"
				},
				selectProject: [],
				lei: '请选择车辆类型',
				defaultIndex: [0],
				columns: [],
				isExamine: false,
				cph: '',
				fileList1: [],
				fileList2: [],
				shelist: [],
				type: 1,
				isPass: "1",
				remark: '',
				csId: [],
				sfou: [{
						text: '合格',
						value: "1"
					},
					{
						text: '不合格',
						value: "0"
					},
				],
				cstb: [{
						text: '重检',
						value: "2"
					}, {
						text: '复检',
						value: "1"
					},
					{
						text: '退办理',
						value: "0"
					},
				],
				isChangeLeadMan: false,
				isChangeMeetMan: false,
			}
		},
		onLoad(option) {
			this.inspectionInfoId = option.inspectionInfoId
			this.workNodeId = option.workNodeId
			this.workNodeStatus = option.workNodeStatus
			if (this.workNodeStatus == '1') {
				this.isExamines()
			}
			if (this.inspectionInfoId) {
				this.judgeUpdateLeadMan()
			}
			this.getindex()
			uni.getStorage({
				key: 'roleSelect',
				success: (res) => {
					this.roleSelect = res.data
				}
			})
			if (option.type == 'staff') {
				this.isShowClient = false
			}
			// 在组件挂载后启动定时器
			this.timer = setInterval(this.getindex, 10000);
		},
		onShow() {},
		onHide() {
			clearInterval(this.timer);
			this.timer = null
		},
		onUnload() {
			clearInterval(this.timer);
			this.timer = null;
		},
		methods: {
			judgeUpdateLeadMan() {
				request({
					url: '/system/info/judgeUpdateLeadMan?id=' + this.inspectionInfoId,
					method: 'get'
				}).then(res => {
					this.isChangeLeadMan = res.data
				})
			},
			cancelInterval() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			chooseBank(e) {
				this.receivablesAccount = e.value[0]
				this.bankShow = false
			},
			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) {
					uni.showToast({
						title: '操作成功'
					})
					this.getindex()
					this.$refs.alertDialog.close()
				}
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			selectLeadMan() {
				this.getLeadeMan();
				this.showLeadMan = true
			},
			/*获取引车员信息*/
			getLeadeMan() {
				this.leadManList = []
				request({
					url: '/system/role/getUsersByRoleCode',
					method: 'get',
					params: {
						code: "jcycy"
					}
				}).then(res => {
					this.leadManList.push(res.data)
					let result = this.leadManList
						.map((subArray, subArrayIndex) => {
							const index = subArray.findIndex(item => item.id === this.detailData.leadManId);
							if (index !== -1) {
								// 返回的是子数组的索引和匹配项的索引
								return {
									subArrayIndex,
									itemIndex: index
								};
							} else {
								// 没有找到匹配项，返回 null 或 undefined
								return null;
							}
						})
						.filter(item => item !== null); // 过滤掉没有匹配的项
					let index = result[0].itemIndex
					// let subArrayIndex = result[0].subArrayIndex
					this.defaultIndex = [index]
				})
			},
			cancelLeadMan() {
				this.showLeadMan = false
			},
			confirmLeadMan(e) {
				this.nickname = e.value[0].nickname
				this.leadManId = e.value[0].id
				this.showLeadMan = false
				let data = {
					partnerId: uni.getStorageSync('partnerId'),
					id: this.inspectionId,
					leadManId: this.leadManId
				}

				request({
					url: '/system/info/updateLeadMan',
					method: 'post',
					data: data
				}).then(res => {
					uni.showToast({
						title: '修改成功'
					})
					this.getindex()
				})
			},
			//判断当前登陆人是否有重检重审和退办理的权限
			isExamines() {
				request({
					url: '/system/info/isExamine',
					method: 'get'
				}).then(res => {
					this.isExamine = res.data
				})
			},
			//查询重审可以选择的项目
			getProject() {
				request({
					url: '/system/info/getWeorkNodesById',
					method: 'get',
					params: {
						inspectionId: this.inspectionId
					}
				}).then(res => {
					this.selectProject = res.data
					//查询当前是否是第一个节点或最后一个节点
					// let data = {
					// 	inspectionId: this.inspectionId,
					// 	workNodeId: this.workNodeId
					// }
					// request({
					// 	url: '/system/info/orImages',
					// 	method: 'get',
					// 	params: data
					// }).then(res => {
					// 	this.orImages = res.data
					// })
				})
			},
			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
				})
				if (res.code = 200) {
					uni.showToast({
						title: "提交成功"
					})
					this.getindex()
					this.xling = false
				}
			},
			callUser(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			async submit() {
				let inspectionInfo = {
					inspectionInfoId: this.inspectionInfoId,
					isPass: this.isPass,
					id: this.workNodeId,
					remark: this.remark,
					dealImages: this.fileList2.join(","),
					type: this.type,
				}
				let status = 0
				if (this.isPass == '1') {
					status = 3
				} else if (this.isExamine && this.tbindex == 1 && this.isRetrial == 1) {
					if (this.csId == '' || this.csId == undefined) {
						uni.showToast({
							title: '请选择要复检的项目',
							icon: 'none'
						})
						return
					}
					const workNodes = []
					this.csId.forEach(item => {
						let a = {
							id: item,
							status: "3"
						}
						workNodes.push(a)
					})
					inspectionInfo.workNodes = workNodes
					await request({
						url: '/system/info/recheck',
						method: 'post',
						data: inspectionInfo
					})
					uni.navigateBack();
					return
				} else if (this.isExamine && this.tbindex == 2 && this.isRetrial == 2) {
					//跳转到修改工单页面
					uni.navigateTo({
						url: '/pages/index/Neworder?inspectionInfoId=' + this.inspectionInfoId
					})
					return
				} else if (this.tbindex == 0 && this.isRetrial == 0) {
					status = 1
				}
				inspectionInfo.selectType = status

				let res = await request({
					// url: '/partnerOwn/partner/stopInspection',
					url: '/system/info/controls',
					method: 'post',
					data: inspectionInfo
				})
				if (res.code == 200) {
					this.getindex()
					uni.showToast({
						title: "成功",
					})
					uni.$emit('refresh')
					uni.navigateBack();
				}
				if (res.code == 500) {
					uni.navigateBack();
				}
			},
			closehge() {
				this.hge = false
			},
			async addStepInfo() {
				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'
					})
				}
			},
			clickProject(data) {
				//判断当前id是否存在csId数组里面
				let index = this.csId.indexOf(data.id)
				if (index !== -1) {
					// 如果存在，则从数组中删除
					this.csId.splice(index, 1);
				} else {
					// 如果不存在，则添加到数组中
					this.csId.push(data.id);
				}
			},
			async getindex() {
				try {


					let res = await request({
						url: '/partnerOwn/partner/inspectionDetail',
						method: 'get',
						params: {
							inspectionInfoId: this.inspectionInfoId
						}
					})
					this.detailData = res.data

					this.detailData.stepInfos.forEach(item => {
						// 检查 item.images 是否为有效的字符串
						if (typeof item.images === 'string' && item.images.trim() !== '') {
							// 将里面的images转为数组
							item.images = item.images.split(',');
							// 使用map方法处理每个图片路径，转换为对象格式
							item.images = item.images.map(image => this.baseImageUrl + "/" + image);

							// 将处理后的图片列表赋值给imageList
							item.imageList = item.images;
						} else {
							// 如果 item.images 不是有效的字符串，设置为空数组
							item.images = [];
							item.imageList = [];
						}

						// 输出最终结果
					});


					this.inspectionId = res.data.inspectionId
					this.isOnline = res.data.isOnline
					this.orderStatus = res.data.orderStatus
					this.payMoney = res.data.goodsPrice / 100


					let she = await request({
						url: '/rescue/dict/data/type/pay_type',
						method: 'get',
					})
					this.shelist = she.data


					let bankRes = await request({
						url: '/partnerOwn/partner/getBankAccountList',
						method: 'get',
					})
					if (bankRes.code == 200) {
						let tempList = []
						this.bankList = []
						if (bankRes.data && bankRes.data.length > 0) {
							bankRes.data.forEach(it => {
								tempList.push((it.remark) + it.label)
							})
						}
						this.bankList.push(tempList)
					}
				} catch (e) {
					console.log(e, '查询错误')
				}

			},
			xuanxiaolan(item) {
				this.payType = item.value
			},

			getback() {
				uni.navigateBack()
			},
			Nnimamadewen(value, index) {
				this.isPass = value
				this.geindex = index
				this.type = value
			},
			shenmowanyi(value, index) {
				this.tbindex = value
				this.isRetrial = value
			},
			closexl(e) {
				this.xling = false

			},
			openxl(e) {},
			close(e) {},
			confirm(e) {
				this.show = false,
					this.lei = e.value[0].label
			},
			change(e) {},
			cancel(e) {
				this.show = false
			},
			// 删除图片
			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) {
				upload({
					url: '/common/upload',
					filePath: url,
				}).then((res) => {
					// this.newsCover =  res.fileName
					this.fileList2.push(res.data.url)
					return res.data.url
				})

			},
			deletePic1(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
		},
		mounted() {

		},
		beforeDestroy() {
			// 在组件销毁前清除定时器
			if (this.timer) {
				clearInterval(this.timer);
			}
		}
	}
</script>

<style scoped lang="scss">
	image {
		width: 100%;
		height: 100%;
	}

	.lantong {
		background-color: #0174F6 !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: #fff;
	}

	.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;
		padding-bottom: 0px;
		padding-top: 0px;
		margin-top: 0px;
		margin-bottom: 0px;

		// display: flex;
		// align-items: center;
		// justify-content: center;
	}

	.p_box {
		position: relative;
		width: 90%;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 10px;
		//border-left: 1px dashed #DEE1EA;
		border-left: 1px dashed #0d2e8d;

	}

	.g_hui {
		background: #F4F5F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		box-sizing: border-box;
		padding: 10px;
	}

	.p_titel {
		width: 90%;
		margin: 0 auto;
		box-sizing: border-box;

		position: relative;
	}


	.bottomx {
		margin: 0 auto;
		width: 225px;
		height: 46px;
		border-radius: 6px 6px 6px 6px;
		opacity: 1;
		border: 1px solid #0174F6;
		display: flex;
		align-items: center;
		justify-content: center;
		//color: #0174F6;
	}

	.bottomxx {
		position: fixed;
		right: 10px;
		bottom: 150px;
		width: 46px;
		height: 46px;
		border-radius: 50%;
		opacity: 1;
		border: 1px solid #0174F6;
		background: #0174F6;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		z-index: 999;
	}

	.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 0px;
		// border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
	}

	.shop-img {
		width: 150px;
		height: 150px;
		border-radius: 8px;
		overflow: hidden;
		margin-right: 10px;
	}

	.ds-right {
		width: 55%;
	}


	.dis-hui {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 15px;
		font-weight: 400;
		color: #999999;
		margin-bottom: 5px;
	}

	.times {

		font-size: 14px;
		font-weight: 600;
		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;
		margin-bottom: 15px;
	}

	.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;
	}

	.box_ {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.box_button {
		border-radius: 6px;
		border: 1px solid #999;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		box-sizing: border-box;
		padding: 5px 10px;
		margin-right: 5px;
		margin-bottom: 5px;
	}

	.box_button_x {
		border-radius: 6px;
		border: 1px solid #0D2E8D;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		box-sizing: border-box;
		padding: 5px 10px;
		margin-right: 5px;
		margin-bottom: 5px;
		background: #0D2E8D;
		color: #fff;
	}

	.qiu_ {
		width: 25px;
		height: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		color: #fff;
		background: #0174F6;
		margin-left: -13px;
		margin-top: 5px;
		//position: absolute;
		//left: -10x;
		//top: 0px;
	}

	.xb_ {

		width: 13%;
		height: 35px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 6px;
		color: #0D2E8D;
		font-size: 40px;
		font-weight: bold;
	}

	.steps-container {
		display: flex;
		flex-wrap: wrap;
		/* 自动换行 */
		justify-content: space-between;
		/* 均匀分布 */
		gap: 10px;
		/* 控制横向和纵向间距 */
	}

	.step-item {
		display: flex;
		align-items: center;
		/* 图标和文字垂直居中对齐 */
		width: 31%;
		/* 每行展示三个 */
		text-align: left;
		margin-bottom: 20px;
	}

	.step-circle {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: linear-gradient(to right, #F1F1F1, #858899);
		box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
		flex-shrink: 0;
		margin-right: 5px;
		/* 圆点和文字的间距 */
	}

	.circle-blue {
		background: linear-gradient(to right, #80BCFF, #0174F6) !important;
		box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
	}

	.circle-yellow {
		background: linear-gradient(to right, #FFD78C, #FFB323) !important;
	}

	.step-content {
		font-size: 16px;
		line-height: 20px;
		/* 与图标高度对齐 */
		color: #333;
	}

	.r-two-box {
		width: 100%;
		background: #F4F5F8;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 10px;
		margin-bottom: 15px;
	}

	.h-two-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.h-two-r {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #0174F6;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 5px;

		}
	}

	.h_title {
		font-size: 24rpx;
		color: #999999;
		margin-bottom: 5px;
	}

	.h_name {
		font-size: 28rpx;
		color: #333333;
	}

	.jc_title {
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	}

	.jc_name {
		font-weight: 500;
		font-size: 28rpx;
		color: #9AA0B0;
	}
</style>