<template>
	<view class="content">
		<view class="top">
			<view class="top-text">
				您好！{{userData.nickname}}{{userData.sex == '男' ? '先生' : '女士'}}
			</view>
			您名下的XXX账户商务停止第三方催收洽谈协商服务已完成。
		</view>
		<view class="white">
			<view class="list">
				<view class="label">
					<view class="labelTop">
						<view class="labelTop-name" v-if="schemesData.institution">
							{{schemesData.institution.title}}
						</view>
						<view class="labelTop-tips" v-if="schemesData.business_type">
							{{schemesData.business_type.title}}
						</view>
					</view>
					<view class="labelPlan-list">
						<view class="labelPlan-item" v-for="(items, index) in schemesData.params" :key="index">
							<view class="labelPlan-item-name">{{items.title}}</view>
							<view class="nowrap labelPlan-item-text">
								<block v-if="items.key === 'price'">
									￥{{items.value}}
								</block>
								<block v-else-if="items.key === 'number'">
									{{items.value}}天
								</block>
								<block v-else>
									{{items.value}}
								</block>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- start 驳回原因 弹出 -->
			<view class="reasonBack" v-if="popNo"></view>
			<view class="reasonCont" v-if="popNo">
				<image class="reasonCont-img" src="/static/imgs/payClose.png" mode="aspectFill" @click="popNo = false"></image>
				<view class="reasonCont-title">
					不同意原因
				</view>
				<view class="reasonCont-text">
					<textarea name="remark" placeholder-style="color:#999999; font-size: 14px" placeholder="请输入您不同意的原因" maxlength="500" @input="remarkInput"></textarea>
					<text>{{cursor}}/500</text>
				</view>
				<button class="reasonCont-btn" size="mini" :disabled="disabled" @click="clickNo">确定</button>
			</view>
			<!-- end 驳回原因 弹出 -->
			
			<view class="reminder">
				<image class="reminder-img" src="@/static/imgs/reminderIcon.png"></image>
				<view class="reminder-text">
					<text>温馨提示：</text>
					{{reminder}}
				</view>
			</view>
			<view class="idcardBtn">
				<view class="idcardBtn-go active" @click="popNo = true">
					不同意
				</view>
				<button class="idcardBtn-go" size="mini" :disabled="disabled" @click="clickYes">同意并确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { myModifyInfo, modifyYes, modifyNo, userBasic } from '@/apis/interfaces/user'
	
	export default {
		data() {
			return {
				disabled	 : false, // 按钮状态
				popNo        : false,   // 不同意
				schemesData  : '',  // 预估方案
				reminder     : '',  // 温馨提示
				remark		 : '',
				cursor		 : 0,
				userData     : ''
			}
		},
		onShow() {
			// 获取方案
			this.schemesInfo();
			
			// 获取用户姓名手机号性别
			userBasic().then(res => {
				this.userData = res
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			// 方案
			schemesInfo() {
			    myModifyInfo(this.$Route.query.id).then(res => {
					this.reminder    = res.tips
					this.schemesData = res.close_scheme
			    }).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 备注信息
			remarkInput(val) {
				this.remark = val.detail.value
				this.cursor = val.detail.cursor
			},
			
			// 同意方案
			clickYes() {
				uni.showModal({
					title		: '温馨提示',
					content		: '是否确认？',
					cancelText	: "取消", // 取消按钮的文字  
					confirmText : "确认", // 确认按钮的文字  
					showCancel  : true, // 是否显示取消按钮，默认为 true
					confirmColor: '#D4155A',
					cancelColor : '#999999',
					success: res => {
						if(res.confirm) {  
							modifyYes(this.schemesData.business_order_close_scheme_id, {
								remark: this.remark
							}).then(res => {
								uni.showToast({
									title: '操作成功',
									icon: "none"
								})
								this.disabled = true
								setTimeout(()=>{
									this.$Router.replace({name: 'User'})
									uni.hideLoading() 
								},2000)
							}).catch( err => {
								uni.showToast({
									title: err.message,
									icon: "none"
								})
							})
						} else {}  
					} 
				})
			},
			
			// 不同意方案
			clickNo() {
				if(this.remark) {
					modifyNo(this.schemesData.business_order_close_scheme_id, {
						remark: this.remark
					}).then(res => {
						uni.showToast({
							title: '提交成功',
							icon: "none"
						})
						this.popNo = true
						this.disabled = true
						setTimeout(()=>{
							this.$Router.replace({name: 'User'})
							uni.hideLoading() 
						},2000)
					}).catch( err => {
						uni.showToast({
							title: err.message,
							icon: "none"
						})
					})
				} else {
				    uni.showToast({
				    	title: '请输入您不同意的原因',
				    	icon: "none"
				    })
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f6f6f6;
		overflow-y: scroll;
		height: 100vh;
	}
	.top {
		background-color: $mian-color;
		color: #ffffff;
		padding: $padding * 2 $padding 280rpx;
		box-sizing: border-box;
		font-size: $title-size-m;
		line-height: 42rpx;
		opacity: .9;
		text-align: justify;
		.top-text {
			margin-bottom: $margin;
		}
	}
	
	.white {
		position: relative;
		top: -200rpx;
		left: 0;
		width: 100%;
		padding: $padding;
		box-sizing: border-box;
		z-index: 9;
		border-bottom: transparent 200rpx solid;
		.list {
			padding: $padding;
			box-sizing: border-box;
			background-color: #ffffff;
			border-radius: $radius - 4;
			position: relative;
			margin-top: $margin * 3;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, .05);
			&::after,
			&::before {
				position: absolute;
				content: '';
				background-color: rgba(255, 255, 255, .4);
				left: 20rpx;
				border-radius: $radius - 4 $radius - 4 0 0;
			}
			&::after {
				z-index: 2;
				width: calc(100% - 40rpx);
				left: 20rpx;
				top: -25rpx;
				height: 25px;
			}
			&::before {
				z-index: 1;
				width: calc(100% - 80rpx);
				left: 40rpx;
				top: -50rpx;
				height: 50rpx;
			}
			
			&:first-child {
				margin-top: 0;
			}
			
			.label {
				position: relative;
				overflow: hidden;
				&.active {
					height: auto;
				}
				&::after,
				&::before {
					position: absolute;
					content: '';
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background-color: #f6f6f6;
					top: 33%;
				}
				&::after {
					left: -45rpx;
				}
				&::before {
					right: -45rpx;
				}
				.labelTop {
					line-height: 80rpx;
					margin-bottom: $margin - 20;
					display: flex;
					.labelTop-name {
						flex: 1;
						font-size: $title-size + 2;
						font-weight: 600;
					}
					.labelTop-tips {
						margin-left: 20rpx;
						background-color: #FBE7EE;
						color: $mian-color;
						font-size: $title-size-sm;
						font-weight: normal;
						padding: 0 15rpx;
						border: 2rpx solid $mian-color;
						border-radius: $radius * 2;
						height: 44rpx;
						line-height: 44rpx;
						display: inline-block;
						margin-top: 18rpx;
					}
				}
				.labelPlan {
					border-top: 2rpx dotted #e7e7e7;
					padding-top: $padding;
					margin-top: $margin;
					.labelPlan-top {
						display: flex;
						line-height: 54rpx;
						color: $mian-color;
						margin-bottom: $margin;
						.labelPlan-name {
							flex: 1;
							font-size: $title-size + 4;
							font-weight: 600;
						}
						.labelPlan-tips {
							opacity: .2;
							font-size: $title-size + 2;
						}
					}
				}
				.labelPlan-item {
					line-height: 40rpx;
					margin-bottom: $margin + 10;
					display: flex;
					font-size: $title-size-m;
					color: #111111;
					&:last-child {
						margin-bottom: 10rpx;
					}
					.labelPlan-item-name {
						color: #999999;
						flex: 1;
						margin-right: $margin;
					}
					.labelPlan-item-text {
						width: 30%;
						text-align: right;
					}
					.labelPlan-item-btn {
						color: $mian-color;
						border: $mian-color 2rpx solid;
						width: 80rpx;
						text-align: center;
						border-radius: $radius-m;
						height: 40rpx;
						line-height: 40rpx;
						margin-left: 20rpx;
						font-size: $title-size-sm - 2;
					}
				}
				.labelNotice {
					font-size: $title-size-m;
					background-color: #F6F6F6;
					border-radius: $radius-m;
					margin-top: $margin;
					height: 240rpx;
					overflow: hidden;
					position: relative;
					&.active {
						height: auto;
					}
					.labelNotice-top {
						padding: $padding $padding 0;
						box-sizing: border-box;
						.labelNotice-name {
							color: #111111;
							margin-bottom: $margin - 10;
							font-weight: 600;
						}
						.labelNotice-text {
							color: #666666;
							line-height: 52rpx;
							text-align: justify;
						}
					}
					.labelNotice-btn {
						text-align: center;
						line-height: 100rpx;
						color: #999999;
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						background-color: #F6F6F6;
						.labelNotice-img {
							width: 24rpx;
							height: 24rpx;
							margin-right: 10rpx;
							transition: .2s;
							&.active {
								transform:rotate(180deg)
							}
						}
					}
				}
			}
			
			.open {
				text-align: center;
				margin-top: $margin - 10;
				width: 100%;
				background-color: #ffffff;
				.open-text {
					background-color: #FBE7EE;
					display: inline-block;
					color: $mian-color;
					padding: 0 $padding - 10;
					line-height: 58rpx;
					font-size: $title-size-m;
					border-radius: $radius-sm;
					image {
						width: 22rpx;
						height: 22rpx;
						margin-right: 10rpx;
						transition: .2s;
						&.active {
							transform:rotate(180deg)
						}
					}
				}
			}
		}
	}
	
	.reasonBack {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 98;
		background-color: rgba(0, 0, 0, .5);
		width: 100%;
		height: 100vh;
	}
	.reasonCont {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		width: 100%;
		background-color: #ffffff;
		border-radius: $radius $radius 0 0;
		padding: $padding;
		box-sizing: border-box;
		.reasonCont-title {
			text-align: center;
			font-size: $title-size + 4;
		}
		.reasonCont-img {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			top: $padding;
			right: $padding;
		}
		.reasonCont-text {
			background-color: #F6F6F6;
			width: 100%;
			padding: $padding;
			box-sizing: border-box;
			margin: $margin + 10 0 $margin*2;
			border-radius: $radius;
			textarea {
				width: 100%;
			}
			text {
				text-align: right;
				display: block;
				font-size: $title-size-sm;
				color: $text-gray;
			}
		}
		.reasonCont-btn {
			width: 100%;
			line-height: 90rpx;
			text-align: center;
			border-radius: $radius * 3;
			background-color: #D4155A;
			font-size: $title-size + 2;
			color: #ffffff;
			&[disabled] {
				background-color: #eba5a5;
			}
		}
	}
	
	.reminder {
		position: fixed;
		left: 0;
		bottom: 150rpx;
		background-color: #f6f6f6;
		z-index: 10;
		width: 100%;
		height: 240rpx;
		overflow: hidden;
		padding: $padding;
		box-sizing: border-box;
		display: flex;
		color: #FEA044;
		font-size: $title-size-m;
		border-bottom: 2rpx solid #f5f5f5;
		.reminder-img {
			width: 32rpx;
			height: 32rpx;
			margin-top: 8rpx;
		}
		.reminder-text {
			overflow-y: scroll;
			height: 200rpx;
			width: calc(100% - 52rpx);
			margin-left: 20rpx;
			line-height: 40rpx;
			text-align: justify;
			font-size: $title-size-sm;
			text {
				display: block;
			}
		}
	}
	
	.idcardBtn {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
		z-index: 9;
		width: 100%;
		height: 150rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		.idcardBtn-go {
			width: calc(50% - 20rpx);
			margin: $margin 10rpx;
			background-color: $mian-color;
			color: #ffffff;
			border-radius: $radius-lg;
			height: 90rpx;
			line-height: 90rpx;
			font-size: $title-size;
			text-align: center;
			border: 2rpx solid #ffffff;
			&.active {
				background-color: #ffffff;
				border-color: $mian-color;
				color: $mian-color;
			}
			&[disabled] {
				background-color: #eba5a5;
			}
		}
	}
	
</style>