<template>
	<view class="container">
		<!-- #ifdef APP -->
		<view class="top">
			<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
			<text>申请加盟</text>
		</view>
		<!-- #endif -->
		<view class="page">
			<text class="num actived pass">1</text>
			<text class="line line_pass"></text>
			<text class="num actived pass">2</text>
			<text class="line line_pass"></text>
			<text class="num actived pass">3</text>
			<text class="line line_pass"></text>
			<text class="num actived pass">4</text>
			<text class="line line_pass"></text>
			<text class="num actived">5</text>
			<text class="line"></text>
			<text class="num">6</text>
			<text class="line"></text>
			<text class="num">7</text>
		</view>
		<view class="wrapper">
			<view class="title">
				<view>
					<text class="line"></text>合同文档确认
				</view>
				<text class="page_mark">5/7</text>
			</view>
			<view class="content">
				<view class="ulBox">
					<view class="liBox" v-for="(contractItem,index) in contractTermsList" :key="index" @click="readContract(contractItem)">
						<text class="iconfont icon-yuanxingweixuanzhong" v-if="!contractItem.confirmStatus"></text>
						<text class="iconfont icon-selected-copy" v-if="contractItem.confirmStatus"></text>
						<text class="itemName"> {{contractItem.termName}}</text>
						<text class="iconfont icon-gougou" v-if="contractItem.confirmStatus"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed" @click="saveInfo()">
			{{(this.contractForm.approvalStatus== 0 || this.contractForm.approvalStatus == 2)?'全部阅读且同意,下一步':'下一步'}}
		</view>
	</view>
	<view class="toastWrapper toast" v-if="isShow"></view>
	<view id="toastContent" v-if="isShow" ref="contractRef">
		<view class="title">
			{{curTitle}}
		</view>
		<scroll-view scroll-y style="height:70vh" class="scrollBox">
			<view class="contract" v-html="curContract"></view>
			<!-- :style="btnStyle" -->
			<view class="agree" @click="agree(curContractId)" >同意</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import api from '../../api/api';
	import {
		ref,
		nextTick
	} from 'vue'
	export default {
		data() {
			return {
				contractTermsList: [],
				isShow: undefined,
				curTitle: '',
				remainTimes:10,
				curContract: '',
				curContractId: null,
				isAllAgree: false,
				nineTime: true,
				applyParam:{},
				contractForm: {
					contractTerms: '',
					approvalStatus: ''
				},
				contractTermsConfirmsListParm: [],
				shareId: null
			}
		},
		components: {},
		onLoad(options) {
			this.shareId = options.shareId
		},
		onShow() {
			uni.showLoading({
			  title: '加载中...'
			});
			this.getContractList();
			setTimeout(() => {
				if (uni.getStorageSync('applyId')) {
					this.queryById(uni.getStorageSync('applyId'), null)
				} else if (this.shareId) {
					this.queryById(this.shareId, null)
				} else {
					this.queryById(null, uni.getStorageSync('cffp_userId'))
				}
			}, 500)
		},
		computed: {
			btnStyle(){
				return this.curContractId =='16'?'position: fixed;bottom: 0;':null
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1  
				});
			},
			getContractList() {
				api.listQuery({
					systemType: '2'
				}).then((res) => {
					this.contractTermsList = res["data"]["contractDtos"];
				})
			},
			saveInfo() {
				if (this.contractForm.approvalStatus == 0 || this.contractForm.approvalStatus == 2) {
					if (!this.isAllAgree) {
						uni.showToast({
							title: '请详细阅读全部条款！',
							duration: 2000,
							icon: 'none'
						});
						return;
					}
					this.contractTermsConfirmsListParm = [];
					for (let i = 0; i < this.contractTermsList.length; i++) {
						this.contractTermsConfirmsListParm.push(this.contractTermsList[i]["termName"]);
					}
					this.applyParam.operatStep = 7;
					this.contractForm.contractTerms = this.contractTermsConfirmsListParm.join(',');
					uni.setStorageSync('contractForm',this.contractForm)
					this.applyParam.contractTerms = this.contractForm.contractTerms
					this.applyParam.approvalStatus = this.contractForm.approvalStatus
					api.saveApplyInfo(this.applyParam).then((res) => {
						if (res['success']) {
							uni.navigateTo({
								// url:`signature?id=${res['data']['id']}`
								url: `signature`
							});
						} else {
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'
							})
							return;
						}
					})
				} else {
					uni.navigateTo({
						// url:`signature?id=${res['data']['id']}`
						url: `signature`
					});
				}

			},
			readContract(contractItem) {
				if (this.contractForm.approvalStatus == 0 || this.contractForm.approvalStatus == 2) {
					if (contractItem.confirmStatus == 1) {
						contractItem.confirmStatus = 0;
					} else {
						this.isShow = true;
						// this.nineTime = true;
						// this.timer = setInterval(() => {
						//   this.remainTimes--;
						//   if (this.remainTimes <= 0) {
						// 	this.nineTime = false
						//     this.remainTimes = 10;
						//     clearInterval(this.timer);
						//   }
						// }, 1000);
						this.curContract = contractItem.termNote;
						this.curTitle = contractItem.termName;
						this.curContractId = contractItem.id;
					}
					this.isAllAgree = this.contractTermsList.every((item) => {
						return item.confirmStatus == 1;
					});
				}
			},
			//同意合同条款
			agree() {
				// if(this.nineTime == true){
				// 	return false
				// }
				this.isShow = false;
				for (let i = 0; i < this.contractTermsList.length; i++) {
					if (this.curContractId == this.contractTermsList[i]["id"]) {
						this.contractTermsList[i]["confirmStatus"] = 1;
					}
				}
				this.isAllAgree = this.contractTermsList.every((item) => {
					return item.confirmStatus == 1;
				});
			},
			queryById(id, userId) {
				api.queryById({
					id: id,
					userId: userId
				}).then((res) => {
					if (res['success']) {
						this.applyParam = res['data']['data'];
						if(uni.getStorageSync('contractForm')){
							this.contractForm = uni.getStorageSync('contractForm')
						}else {
							this.contractForm.contractTerms = this.applyParam.contractTerms
						}
						this.contractForm.approvalStatus = this.applyParam.approvalStatus
						if (this.contractForm.contractTerms) {
							this.contractTermsConfirmsListParm = this.contractForm.contractTerms.split(',');
							for (let i = 0; i < this.contractTermsList.length; i++) {
								for (let j = 0; j < this.contractTermsConfirmsListParm.length; j++) {
									if (this.contractTermsList[i]['termName'] == this
										.contractTermsConfirmsListParm[j]) {
										this.contractTermsList[i].confirmStatus = 1;
									}
								}
							}
							this.isAllAgree = true;
						}
					}
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'applyCommon.scss';
	::v-deep .uni-scroll-view-content{
		display: flex;
		flex-direction: column;
	}
	.container {
		background-color: #FBFBFB;
	}

	.toastWrapper {
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		top: 0;
		width: 100%;
	}

	.toast {
		position: fixed;
		left: 0;
		right: 0;
		// min-width: 320px;
		// max-width: 640px;
		width: 100%;
		margin: 0 auto;
		z-index: 1;
	}

	#toastContent {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 75%;
		left: 0;
		right: 0;
		margin: 0 auto;
		background-color: #fff;
		z-index: 2;
		animation: slowUp .5s ease both;
		overflow: auto;
		
		.title {
			text-align: center;
			font-weight: bold;
			font-size: 28rpx;
			padding: 10px;
		}
		.scrollBox{
			display: flex;
			flex-direction: column;
			
			
		}
		.contract {
			padding: 10px;
			font-size: 15rpx;
			padding-bottom: 50rpx;
			flex-grow: 1;
		}

		.agree {
			width: 100%;
			height: 45px;
			line-height: 45px;
			background: #C81B1E;
			text-align: center;
			color: #fff;
			font-size: 20px;
			font-weight: bold;
			// position: absolute;
			// bottom: 0;
			// position: fixed;
			// bottom: 0;
			
		}
		.gree {
			width: 100%;
			height: 45px;
			line-height: 45px;
			background: #cacaca;
			text-align: center;
			color: #fff;
			font-size: 20px;
			font-weight: bold;
			position: relative;
			bottom: 0;
		}
	}
</style>
