<template>
	<view class="content">
		<img class="speedBack" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/e6aa6a3fb17e7b5476dafc373d7fd9ee.png">
		<view class="speedFrame">
			<view class="speedCont">
				<view class="item" :class="{active: !item.over && !item.status}" v-for="(item, index) in stepArr" :key="index">
					<view class="item-circular">{{item.order}}</view>
					<img class="item-img" :src="item.icon">
					<view class="item-text">
						<view class="item-top">
							<view class="item-name">
								{{item.name}}
								<block v-if="item.key == 'b_complete'">
									<block v-if="item.refund_status.value > 0">（{{item.refund_status.text}}）</block>
								</block>
							</view>
							
							<!-- 去支付待预约 -->
							<block v-if="item.key == 'a_init'">
								<block v-if="item.status">
									<view class="item-btn active" @click="$Router.push({name: 'sheetPay', params: {id: infoData.id}})">
										去支付
										<image class="item-more" src="/static/imgs/speedMore.png" mode="aspectFill"></image>
									</view>
								</block>
								<block v-else>
									<view class="item-btn">
										{{item.buttonText}}
										<image class="item-more" src="/static/imgs/speedOver.png" mode="aspectFill"></image>
									</view>
								</block>
							</block>
							
							<!-- 查看预估方案 -->
							<block v-else-if="item.key == 'a_service'">
								<block v-if="!item.status && item.over">
									<view class="item-btn active" @click="$Router.push({name: 'sheetEstimate', params: {id: infoData.id}})">
										去查看
										<image class="item-more" src="/static/imgs/speedMore.png" mode="aspectFill"></image>
									</view>
								</block>
								
								<block v-else>
									<view class="item-btn">
										{{item.buttonText}}
										<image class="item-more" src="/static/imgs/speedOver.png" mode="aspectFill"></image>
									</view>
								</block>
							</block>
							
							<!-- 去缴费服务费 -->
							<block v-else-if="item.key == 'a_serviced'">
								<block v-if="item.status">
									<view class="item-btn active" @click="$Router.push({name: 'sheetPayment', params: {id: infoData.id, price: infoData.total, style: 'daijiao'}})">
										去缴费
										<image class="item-more" src="/static/imgs/speedMore.png" mode="aspectFill"></image>
									</view>
								</block>
								<block v-else>
									<view class="item-btn">
										{{item.buttonText}}
										<image class="item-more" src="/static/imgs/speedOver.png" mode="aspectFill"></image>
									</view>
								</block>
							</block>
							
							<!-- 待签约 -->
							<block v-else-if="item.key == 'b_sign'">
								<block v-if="item.status">
									<view class="item-btn active" @click="contractClick">
										去签约
										<image class="item-more active" src="/static/imgs/speedMore.png" mode="aspectFill"></image>
									</view>
								</block>
								<block v-else>
									<view class="item-btn">
										{{item.buttonText}}
										<image class="item-more" src="/static/imgs/speedOver.png" mode="aspectFill"></image>
									</view>
								</block>
							</block>
							
							<!-- 初审中 -->
							<block v-else-if="item.key == 'b_check'">
								<block v-if="item.status">
									<view class="item-btn active" @click="$Router.push({name: 'sheetProcess'})">
										查看进度
										<image class="item-more" src="/static/imgs/speedMore.png" mode="aspectFill"></image>
									</view>
								</block>
								<block v-else>
									<view class="item-btn">
										{{item.buttonText}}
										<image class="item-more" src="/static/imgs/speedOver.png" mode="aspectFill"></image>
									</view>
								</block>
							</block>
							
							<!-- 复审中 -->
							<block v-else-if="item.key == 'b_recheck'">
								<block v-if="item.status">
									<view class="item-btn active" @click="$Router.push({name: 'sheetProcess'})">
										查看进度
										<image class="item-more" src="/static/imgs/speedMore.png" mode="aspectFill"></image>
									</view>
								</block>
								<block v-else>
									<view class="item-btn">
										{{item.buttonText}}
										<image class="item-more" src="/static/imgs/speedOver.png" mode="aspectFill"></image>
									</view>
								</block>
							</block>
							
							<!-- 办理中 -->
							<block v-else-if="item.key == 'b_process'">
								<block v-if="item.status">
									<view class="item-btn active" @click="$Router.push({name: 'sheetHandle', params: {id: infoData.id}})">
										查看记录
										<image class="item-more" src="/static/imgs/speedMore.png" mode="aspectFill"></image>
									</view>
								</block>
								<block v-else>
									<view class="item-btn">
										{{item.buttonText}}
										<image class="item-more" src="/static/imgs/speedOver.png" mode="aspectFill"></image>
									</view>
								</block>
							</block>
							
							<!-- 办理中 -->
							<block v-else-if="item.key == 'b_confirm'">
								<block v-if="item.status">
									<view class="item-btn active" @click="$Router.push({name: 'OrderModify', params: {id: infoData.id}})">
										去确认
										<image class="item-more" src="/static/imgs/speedMore.png" mode="aspectFill"></image>
									</view>
								</block>
								<block v-else>
									<view class="item-btn">
										{{item.buttonText}}
										<image class="item-more" src="/static/imgs/speedOver.png" mode="aspectFill"></image>
									</view>
								</block>
							</block>
							
							<!-- 其他显示 -->
							<block v-else>
								<view class="item-btn">
									{{item.buttonText}}
									<image class="item-more" src="/static/imgs/speedOver.png" mode="aspectFill"></image>
								</view>
							</block>
						</view>
						
						<!-- start 补充详细资料 -->
						<view class="item-see" v-if="item.key == 'a_bank' && item.status == true">
							<!-- 基础信息 -->
							<view class="item-see-label">
								<view class="item-see-name">
									基础信息
								</view>
								<!-- orderId -->
								<view v-if="!item.base" class="item-see-go" @click="$Router.push({name: 'ModifyBase', params: {id: infoData.id}})">
									去补充
								</view>
								<view v-else class="item-see-go active">
									已完善
								</view>
							</view>
							
							<!-- 机构信息 -->
							<view v-if="item.status">
								<block v-if="item.items.length > 0">
									<view class="item-see-label" v-for="(items, itemsIndex) in item.items" :key="itemsIndex">
										<view class="item-see-name">
											{{items.institution.title}}({{items.business_type.title}})
										</view>
										<view class="item-see-go" v-if="items.is_finish != 1" @click="$Router.push({name: 'ModifyBank', params: {id: items.business_order_item_id}})">
											去补充
										</view>
										<view class="item-see-go active" v-else>
											已完善
										</view>
									</view>
								</block>
							</view>
							
							<!-- 邮寄资料 -->
							<view class="item-see-label" v-if="infoData.deliver_count.can">
								<view class="item-see-name">
									邮寄资料（{{infoData.deliver_count.num}}/{{infoData.deliver_count.all}}）
								</view>
								<view class="item-see-go" v-if="item.deliver.status" @click="$Router.push({name: 'sheetExpress', params: {id: infoData.id, adderss: infoData.adderss, metarial: infoData.deliver_count.metarial, mobile: infoData.deliver_count.mobile}})">
									去邮寄
								</view>
								<view class="item-see-go active" v-else>
									已邮寄
								</view>
							</view>
							
							<block v-if="item.is_show">
								<view class="item-see-label" v-if="item.diff.status">
									<view class="item-see-name">
										补差价
									</view>
									<view class="item-see-go" @click="$Router.push({name: 'sheetPayment', params: {id: item.diff.business_order_diff_price_id, price: item.diff.price, style: 'chajia'}})">
										补差价
									</view>
								</view>
							</block>
						</view>
						<!-- end 补充详细资料 -->
						
						<!-- start 待签约 -->
						<block v-if="item.is_show">
							<view class="item-see" v-if="item.key == 'b_sign' && item.status == true">
								<view class="item-see-label" v-if="item.diff.status">
									<view class="item-see-name">
										补差价
									</view>
									<view class="item-see-go" @click="$Router.push({name: 'sheetPayment', params: {id: item.diff.business_order_diff_price_id, price: item.diff.price, style: 'chajia'}})">
										补差价
									</view>
								</view>
							</view>
						</block>
						<!-- end 待签约 -->
						
						<!-- start 进行中 -->
						<block v-if="item.is_show">
							<view class="item-see" v-if="item.key == 'b_process' && item.status == true">
								<view class="item-see-label" v-if="item.diff.status">
									<view class="item-see-name">
										补差价
									</view>
									<view class="item-see-go" @click="$Router.push({name: 'sheetPayment', params: {id: item.diff.business_order_diff_price_id, price: item.diff.price, style: 'chajia'}})">
										补差价
									</view>
								</view>
							</view>
						</block>
						<!-- end 进行中 -->
						
						<!-- start 办理中 -->
						<block v-if="item.is_show">
							<view class="item-see" v-if="item.key == 'b_confirm' && item.status == true">
								<view class="item-see-label" v-if="item.diff.status">
									<view class="item-see-name">
										补差价
									</view>
									<view class="item-see-go" @click="$Router.push({name: 'sheetPayment', params: {id: item.diff.business_order_diff_price_id, price: item.diff.price, style: 'chajia'}})">
										补差价
									</view>
								</view>
							</view>
						</block>
						<!-- end 办理中 -->
						
						<!-- start 办理完成 -->
						<block v-if="item.is_show">
							<view class="item-see" v-if="item.key == 'b_complete' && item.status == true">
								<view class="item-see-label" v-if="item.diff.status">
									<view class="item-see-name">
										补差价
									</view>
									<view class="item-see-go" @click="$Router.push({name: 'sheetPayment', params: {id: item.diff.business_order_diff_price_id, price: item.diff.price, style: 'chajia'}})">
										补差价
									</view>
								</view>
							</view>
						</block>
						<!-- end 办理完成 -->
						
						<!-- start 初审中 -->
						<block v-if="item.is_show">
							<view class="item-see" v-if="item.key == 'b_check' && item.status == true">
								<view class="item-see-label" v-if="item.diff.status">
									<view class="item-see-name">
										补差价
									</view>
									<view class="item-see-go" @click="$Router.push({name: 'sheetPayment', params: {id: item.diff.business_order_diff_price_id, price: item.diff.price, style: 'chajia',remark: item.diff.remark}})">
										补差价
									</view>
								</view>
								
								<!-- 基础信息 -->
								<view class="item-see-label" v-if="item.user.status">
									<view class="item-see-name">
										基础信息
									</view>
									<view v-if="!item.base" class="item-see-go" @click="$Router.push({name: 'ModifyBase', params: {id: infoData.id}})">
										去修改
									</view>
									<view v-else class="item-see-go active">
										已完善
									</view>
								</view>
								
								<!-- 机构信息 -->
								<block v-if="item.items.status">
									<block v-if="item.items.lists.length > 0">
										<view class="item-see-label" v-for="(items, index) in item.items.lists" :key="index">
											<view class="item-see-name">
												{{items.institution.title}}({{items.business_type.title}})
											</view>
											<view class="item-see-go" v-if="items.is_finish != 1" @click="$Router.push({name: 'ModifyBank', params: {id: items.business_order_item_id}})">
												去补充
											</view>
											<view class="item-see-go active" v-else>
												已完善
											</view>
										</view>
									</block>
								</block>
								
								<!-- 邮寄资料 -->
								<view class="item-see-label" v-if="infoData.deliver_count.can">
									<view class="item-see-name">
										邮寄资料
									</view>
									<view class="item-see-go" v-if="item.deliver.status" @click="$Router.push({name: 'sheetExpress', params: {id: infoData.id, adderss: infoData.adderss, metarial: infoData.deliver_count.metarial, mobile: infoData.deliver_count.mobile}})">
										去邮寄（{{infoData.deliver_count.num}}/{{infoData.deliver_count.all}}）
									</view>
									<view class="item-see-go active" v-else>
										已邮寄
									</view>
								</view>
							</view>
						</block>
						<!-- end 初审中 -->
						
						<!-- start 复审中 -->
						<block v-if="item.is_show">
							<view class="item-see" v-if="item.key == 'b_recheck' && item.status == true">
								<view class="item-see-label" v-if="item.diff.status">
									<view class="item-see-name">
										补差价
									</view>
									<view class="item-see-go" @click="$Router.push({name: 'sheetPayment', params: {id: item.diff.business_order_diff_price_id, price: item.diff.price, style: 'chajia'}})">
										补差价
									</view>
								</view>
								
								<!-- 基础信息 -->
								<view class="item-see-label" v-if="item.user.status">
									<view class="item-see-name">
										基础信息
									</view>
									<view v-if="!item.base" class="item-see-go" @click="$Router.push({name: 'ModifyBase', params: {id: infoData.id}})">
										去修改
									</view>
									<view v-else class="item-see-go active">
										已完善
									</view>
								</view>
								
								<!-- 机构信息 -->
								<block v-if="item.items.status">
									<block v-if="item.items.lists.length > 0">
										<view class="item-see-label" v-for="(items, index) in item.items.lists" :key="index">
											<view class="item-see-name">
												{{items.institution.title}}
											</view>
											<view class="item-see-go" v-if="items.is_finish != 1" @click="$Router.push({name: 'ModifyBank', params: {id: items.business_order_item_id}})">
												去补充
											</view>
											<view class="item-see-go active" v-else>
												已完善
											</view>
										</view>
									</block>
								</block>
							</view>
						</block>
						<!-- end 复审中 -->
						
						<!-- start 初审中 -->
						<block v-if="item.key == 'b_confirm'">
							<view class="item-see" v-if="item.items.length > 0">
								<view class="item-see-label" v-for="(itemsIndex, index) in item.items" :key="index">
									<view class="item-see-name">
										{{itemsIndex.institution.title}}({{itemsIndex.business_type.title}})
									</view>
									<view class="item-see-go" :class="{greenColor: itemsIndex.status.text == '方案通过'}">
										{{itemsIndex.status.text}}
									</view>
								</view>
							</view>
						</block>
						<!-- end 初审中 -->
					</view>
				</view>
			</view>
			
			<view class="speedCont speedWarm">
				<view class="speedWarm-title">
					如果疑惑，可联系相关人员进行咨询
				</view>
				<view class="speedWarm-label">
					电话：1888-888888
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { StepsUrl, contractGo } from '@/apis/interfaces/user'
	export default {
		data() {
			return {
				infoData: '', // 其他信息
				stepArr : '', // 列表
				orderId : ''
			}
		},
		onShow() {
			// 获取基础信息
			this.stepsInfo();
		},
		methods: {
			// 基础信息
			stepsInfo() {
				StepsUrl(this.$Route.query.id).then(res => {
					this.infoData= res.info
					this.stepArr = res.steps
				}).catch( err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 去签约
			contractClick() {
				contractGo(this.$Route.query.id, {
					redirect_url: "https://web.douhuofalv.com/user/index",
					// redirect_url: "https://web.douhuotest.douhuofalv.com/user/index",
					app_scheme : ''
				}).then(res => {
				    // let faceUrl = encodeURIComponent(res.sign_url)
					window.location.href= res.sign_url
				    // uni.navigateTo({
				    //     url: '/webview/webview?faceUrl=' + faceUrl
				    // });
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #448acf;
		height: 100vh;
		overflow-y: scroll;
	}
	.speedBack {
		width: 100%;
	}
	
	.speedFrame {
		padding: $padding;
		box-sizing: border-box;
		.speedCont {
			border-radius: $radius;
			background-color: #ffffff;
			border: 4rpx solid #185caf;
			padding: 10rpx $padding - 10 $padding;
			box-sizing: border-box;
			margin-bottom: $margin;
			.item {
				display: flex;
				padding: $padding 0;
				position: relative;
				&::after {
				    position: absolute;
				    content: '';
				    height: 100%;
				    width: 0;
				    left: 26rpx;
				    top: 80rpx;
				    border-left-width: 2rpx;
				    border-left-style: solid;
				    border-left-color: $mian-color;
				}
				&:last-child::after {
					display: none;
				}
				&.active::after {
					border-left-color: #d9d9d9;
				}
				.item-circular {
					width: 50rpx;
					height: 50rpx;
					line-height: 38rpx;
					border-radius: 50%;
					font-size: $title-size-sm;
					background-color: $mian-color;
					border: 6rpx solid #FBE7EE;
					box-sizing: border-box;
					color: #ffffff;
					text-align: center;
				}
				&.active .item-circular {
					background-color: #e5e5e5;
					border: 6rpx solid #f3f3f3;
					color: $text-gray;
				}
				.item-img {
					margin: 8rpx 20rpx 0;
					width: 40rpx;
					height: 40rpx;
					-webkit-filter: grayscale(0%);
					filter: grayscale(0%);
				}
				&.active .item-img {
					-webkit-filter: grayscale(100%);
					filter: grayscale(100%);
				}
				.item-text {
					width: calc(100% - 120rpx);
					.item-top {
						display: flex;
						line-height: 52rpx;
						.item-name {
							flex: 1;
							font-size: $title-size-lg;
							color: $mian-color;
						}
						.item-btn {
							color: #999999;
							font-size: $title-size-m;
							display: flex;
							.item-more {
								width: 40rpx;
								height: 40rpx;
								margin-left: 5rpx;
								margin-top: 6rpx;
							}
							&.active {
								color: $mian-color;
							}
						}
					}
					.item-see {
						background-color: #f7f8fb;
						padding: 5rpx $padding;
						box-sizing: border-box;
						border-radius: $radius-sm;
						position: relative;
						margin-top: $margin - 10;
						&::after {
							content: '';
							width:0;
							height:0;
							border-width: 14rpx;
							border-style:solid;
							border-color:transparent transparent #f7f8fb transparent;
							position: absolute;
							left: 40rpx;
							top: -27rpx;
						}
						.item-see-title {
							margin: 10rpx 0;
						}
						.item-see-label {
							font-size: $title-size-sm;
							display: flex;
							line-height: 48rpx;
							padding: $padding - 10 0;
							.item-see-name {
								flex: 1;
							}
							.item-see-go {
								color: $mian-color;
								&.active {
									color: $text-gray;
								}
								&.greenColor {
									color: green;
								}
							}
						}
					}
				}
				&.active .item-name {
					color: $text-gray !important;
				}
			}
		}
		.speedWarm {
			padding: $padding + 20 $padding $padding + 10;
			box-sizing: border-box;
			position: relative;
			color: #5f6d7a;
			&::after,
			&::before {
				position: absolute;
				content: '';
				width: 14rpx;
				height: 80rpx;
				top: -60rpx;
				border-radius: $radius;
				background-image: linear-gradient(to top, #a7d5fe, #ffffff, #a7d5fe);
			}
			&::after {
				left: $padding + 10;
			}
			&::before {
				right: $padding + 10;
			}
			.speedWarm-title {
				font-weight: 600;
			}
			.speedWarm-label {
				font-weight: 600;
				margin-top: $margin - 10;
			}
		}
	}
</style>