<template>
	<view class="content">
		<view class="top">
			<view class="top-text" v-if="userName">
				您好！{{userName.nickname}}
				<!-- {{userName.parent.sex == '男' ? '先生' : '女士'}}： -->
			</view>
			以下是根据您的情况为您匹配的机构最佳方案。由于银行政策实时变动，该方案为预估方案，仅供参考，具体以协商为准，感谢您的支持！
		</view>
		<view class="white">
			<view class="list" v-for="(item, index) in schemesArr" :key="index">
				<view class="label" :class="{active : item.schemesShow}">
					<view class="labelTop">
						<view class="labelTop-name">
							{{item.institution.title}}
						</view>
						<view class="labelTop-tips">
							{{item.business_type.title}}
						</view>
					</view>
					<view class="labelPlan-list">
						<view class="labelPlan-item" v-for="(items, itemsIndex) in item.base" :key="itemsIndex">
							<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 === 'overdue_day'">
									{{items.value}}天
								</block>
								<block v-else>
									{{items.value}}
								</block>
							</view>
							<block v-if="items.value">
								<view v-if="items.key === 'rush' || items.key === 'remark'" class="labelPlan-item-btn" @click="seeTips(items.title, items.value)">查看</view>
							</block>
						</view>
					</view>
					<view class="labelPlan">
						<view class="labelPlan-top">
							<view class="labelPlan-name">
								预估方案
							</view>
							<view class="labelPlan-tips">
								YGFA
							</view>
						</view>
						<view class="labelPlan-list" v-if="item.type == 'one'">
							<text class="labelPlan-item labelPlan-content">
								{{item.content}}
							</text>
						</view>
						<view class="labelPlan-list" v-else>
							<view class="labelPlan-item" v-for="(paramsItem, paramsIndex) in item.params" :key="paramsIndex">
								<view class="labelPlan-item-name">{{paramsItem.title}}</view>
								<view class="nowrap labelPlan-item-text">
									{{paramsItem.value}}
								</view>
								<view class="labelPlan-item-btn" v-if="paramsItem.title == '协商方案' || paramsItem.title == '减免情况' || paramsItem.title == '关于减免结清减免政策'" @click="seeTips(paramsItem.title, paramsItem.value)">查看</view>
							</view>
						</view>
					</view>
					<view class="labelNotice" :class="{active : item.noticeShow}">
						<view class="labelNotice-top">
							<view class="labelNotice-name">
								须知：
							</view>
							<text class="labelNotice-text">
								{{item.business_type.notic}}
							</text>
						</view>
						<view class="labelNotice-btn" @click="noticeTap(index)">
							<image class="labelNotice-img" :class="{active : item.noticeShow}" src="@/static/imgs/openArrow_grey.png" mode="widthFix"></image>{{item.noticeShow ? '收起' : '展开'}}
						</view>
					</view>
				</view>
				<view class="open" @click="recordTap(index)">
					<view class="open-text">
						<image :class="{active : item.schemesShow}" src="@/static/imgs/openArrow.png" mode="widthFix"></image>{{item.schemesShow ? '收起' : '展开'}}
					</view>
				</view>
			</view>
			
			<view class="reminder">
				<image class="reminder-img" src="@/static/imgs/reminderIcon.png"></image>
				<view class="reminder-text">
					<text>温馨提示：</text>
					{{reminder}}
				</view>
			</view>
		</view>
		
		<mouldTips :see-data="seeData" @tipsClose="($event) => {seeData.seeShow = $event}"></mouldTips>
	</view>
</template>

<script>
	import { Schemes } from '@/apis/interfaces/index'
	import mouldTips from '@/components/mould-tips.vue'
	export default {
		components: {
			mouldTips
		},
		data() {
			return {
				schemesArr  : [],  // 预估方案列表
				reminder    : '',  // 温馨提示
				userName    : '', // 用户
				
				// 查看提示组件
				seeData     : {
					seeShow : false,
					seeTitle: '',  
					seeText : '',
				},
				noticeShow  : false,  // 须知展开
				baleShow    : false,  // 服务包弹出
			}
		},
		onShow() {},
		onLoad() {
			// 获取方案
			this.schemesInfo();
		},
		methods: {
			
			// 方案
			schemesInfo() {
				// this.$Route.query.id
			    Schemes(this.$Route.query.id).then(res => {
					this.reminder   = res.tips
					let esArr = res.schemes
					esArr.forEach((item, index) => {
						index == 0 ? item.schemesShow = true : item.schemesShow = false
						index == 0 ? item.noticeShow  = true : item.noticeShow  = false
					})
					this.schemesArr = esArr
					this.userName = res.user
			    }).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 提示组件 -- 赋值
			seeTips(title, text) {
				this.seeData.seeShow = true
				this.seeData.seeTitle = title
				this.seeData.seeText = text
			},
			
			// 列表展开
			recordTap(index) {
				var listData = this.schemesArr
				var helpFlag = this.schemesArr[index].schemesShow
				listData.forEach((item) => {
					item.schemesShow = false
				})
				listData[index].schemesShow = !helpFlag
				this.schemesArr = listData
			},
			
			// 须知展开
			noticeTap(index) {
				var listData = this.schemesArr
				var helpFlag = this.schemesArr[index].noticeShow
				listData.forEach((item) => {
					item.noticeShow = false
				})
				listData[index].noticeShow = !helpFlag
				this.schemesArr = listData
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f6f6f6;
		overflow-y: scroll;
		height: 100vh;
		// height: calc(100vh - 44px);
	}
	.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 40rpx 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;
				height: 84rpx;
				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;
					}
					&.labelPlan-content {
						line-height: 52rpx;
					}
				}
				.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;
							margin-bottom: 100rpx;
						}
					}
					.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)
						}
					}
				}
			}
		}
	}
	
	.reminder {
		position: fixed;
		left: 0;
		bottom: 0;
		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;
			}
		}
	}
	
</style>