<template>
	<view class="container">
		<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 pass">5</text>
			<text class="line line_pass"></text>
			<text class="num actived pass">6</text>
			<text class="line line_pass"></text>
			<text class="num actived">7</text>
			<text class="line"></text>
			<text class="num">8</text>
		</view>
		<view class="wrapper">
			<view class="title">
			   <view>
					<text class="line"></text>合同文档确认
				</view>
			   <text class="page_mark">7/8</text>
			</view>
			<view class="content">
			 	<view class="ulBox">
			 	   <view class="liBox" v-for="contractItem in contractTermsList" @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.applyParam.approvalStatus== 0 || this.applyParam.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>
	  <view class="contract" v-html="curContract" ></view>
	 <view class="agree" @click="agree(curContractId)" >同意</view>
	</view>
</template>

<script>
	import api from '../../api/api';
	import { ref, nextTick } from 'vue'
	export default{
		data(){
			return {
				contractTermsList:[],
				isShow: undefined,
				curTitle: '',
				curContract: '',
				curContractId: null,
				isAllAgree: false,
				applyParam:{
					contractTerms:''
				},
				contractTermsConfirmsListParm:[]
			}
		},
		components:{},
		onLoad(options){
			this.getContractList();
			setTimeout(()=>{
				if(uni.getStorageSync('applyId')){
					this.queryById(uni.getStorageSync('applyId'),null)
				}else if(options.shareId){
					this.queryById(options.shareId,null)
				}else{
					this.queryById(null,uni.getStorageSync('cffp_userId'))
				}
			},500)
		},
		methods:{
			getContractList(){
				api.listQuery({systemType:'1'}).then((res)=>{
					this.contractTermsList = res["data"]["contractDtos"];
					console.log(this.contractTermsList)
				})
			},
			saveInfo(){
				if(this.applyParam.approvalStatus== 0 || this.applyParam.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.applyParam.contractTerms = this.contractTermsConfirmsListParm .join(',');
					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.applyParam.approvalStatus== 0 || this.applyParam.approvalStatus == 2){
					if (contractItem.confirmStatus == 1) {
					  contractItem.confirmStatus = 0;
					} else {
					  this.isShow = true;
					  this.curContract = contractItem.termNote;
					  this.curTitle = contractItem.termName;
					  this.curContractId = contractItem.id;
					}
					this.isAllAgree = this.contractTermsList.every((item) => {
					  return item.confirmStatus == 1;
					});
				}
			  },
			//同意合同条款
			agree() {
			    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(this.applyParam.contractTerms){
							this.contractTermsConfirmsListParm = this.applyParam.contractTerms.split(',');
							console.log(this.contractTermsConfirmsListParm)
							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;
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	@import 'applyCommon.scss';
	.container {
		background-color: #FBFBFB;
	}
	.toastWrapper {
	    height: 100%;
	    background-color: rgba(0, 0, 0, 0.5);
	    top: 0;
	}
	.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: 16px;
	        padding: 10px;
	    }
	    .contract{
	        overflow: hidden;
	        padding: 10px;
	    }
	    .agree{
	        width: 100%;
	        height: 45px;
	        line-height: 45px;
	        background: #C81B1E;
	        text-align: center;
	        color: #fff;
	        font-size: 20px;
	        font-weight: bold;
	        position: relative;
	        bottom: 0;
	    }
	  }
</style>