<template>
<div class="agreeMent">
    <van-popup  v-model="isShow" style="height:100%;width:100%;transform:none;top:0;bottom:0;left:0;right:0;">
        <div class="h100 flex flex-col">
            <!-- <div class="p10 text-cen tittle relative"></div> -->
            <mt-header fixed style="font-size: 18px;" :title="option.title||'协议'">
                    <div  slot="left">
                        <mt-button icon="back" @click="back"></mt-button>
                    </div>
                    <div slot="right" v-if="option.time!= -1">{{time}}</div>
            </mt-header>
            <div class="scrollBox"  style="">
                <my-loadMore class="box" :onLoadMore="()=>{}" :options="{top:40,bottom:40,showBottom:false}" :enableLoadMore="false">
                    <div id="innerHtmlBox" >
                        <!-- v-html="option.html" -->
                        <template v-for="(item,index) in option.text">
                            <div :key="index" v-if="item['type']=='html'" v-html="item.html">
                                {{setFormKey(item)}}
                                <!-- <p>{{form[item['name']]={} }}</p>
                                <p :key=i v-for="(e,i) in item.required">{{form[item['name']][e]=''}}</p> -->
                            </div>
                            <p  :key="index" v-else :style="getText(item).style">{{getText(item).text}}</p>
                        </template>
                    </div>
                </my-loadMore>
            </div>
             <div class="flex flex-just-around p10">
                 
                 <van-button class="btn" type="primary" v-if="isdownLoad" @click="downFile" size="small">下载合约</van-button>
                <van-button class="btn" type="info" v-if="!isdownLoad" :disabled="time>0" @click="select='no';isShow=false" size="small">拒绝</van-button>
                <van-button class="btn" type="primary" v-if="!isdownLoad" :disabled="time>0" @click="agree" size="small">同意</van-button>
            </div>
        </div>
    </van-popup>
</div>
    
</template>

<script>
export default {
    name:"myAgreement",
    data(){
        return{
            isdownLoad:false,
            isShow:false,
            time:10,
            timerr:'',
            numTimer:'',
            select:"",
            option:{},
            form:{},
            data:'',
            dataType:{
                sign:[
								{
									text:"房屋租赁协议范本",
									style:"text-align:center;font-size:20px;color:#000;"
								},
								'出租方(以下简称甲方)： 身份证号： 承租方(以下简称乙方)： 身份证号：',
								'甲、乙双方通过友好协商，就房屋租赁事宜达成协议如下：',
								'一、租赁地址： 房型规格：楼房;居住面积平方 平米;',
								'二、租用期限及其约定：',
								'1.租用期限：甲方同意乙方租用月日起至月日;',
								'2.房屋租金：每年',
								'3.付款方式：按现金/年支付，另付一个年押金，租房终止，甲方验收无误后，将押金退还乙方，不计利息',
								'4.租赁期内的所产生的水、电、煤气、电话、有线电视、暖气等费用由乙方支付;',
								'5.租用期内，乙方有下列情形之一的甲方可以终止合同，收回房屋使用权、乙方需担全部责任，并赔 偿甲方损失',
								'(1)乙方擅自将房屋转租、转让或转借的;',
								'(2)乙方利用承租房屋只准做居住使用，不得进行非法活动损害公共利益;',
								'(3)乙方不得无故拖欠房屋租金;',
								'(4)连续两个月不付所有费用的。',
								'三、双方责任及义务：',
								'1.乙方须按时交纳水、电、煤气等费用，无论在任何情况下，乙方都不能将押金转换为房屋租金;',
								'2.在租用期内，甲方必须确保乙方的正常居住，不得将乙方租用的房屋转租(卖)给任何第三者;或在租赁期内房租加价;',
								'3.租用期满后，乙方如需继续使用，应提前一个月提出，甲方可根据实际情况，在同等条件下给予优先;',
								'4.在租赁期内，甲、乙双方如有一方有特殊情况需解除协议的，必须提前一个月通知对方，协商后解除本协议;',
								'5.乙方不得擅自改变室内结构，并爱惜使用室内设施，若人为损坏的将给予甲方相应赔偿;如发生自然损坏，应及时通知甲方，并配合甲方及时给予修复。',
								'四、其它未尽事宜，由甲乙双方协商解决，协商不成按有关现行法规办理或提交有关仲裁机关进行仲裁。',
                                '本协议一式二份，甲、乙双方各执一份，签字后即行生效。',
                                {
                                    type:'html',
									name:'jia',
                                    required:['jiaIdcard','jiaPhone'],
                                    html:`
                                    <p>　　甲方(公章)：_________乙方(公章)：_________</p><p>　　法定代表人(签字)：_________法定代表人(签字)：_________</p><p>　　_________年____月____日_________年____月____日</p><p>　<strong>　租房合同书2</strong></p><p>　　第一条 甲方自愿将坐落在 市 区 房屋建筑面积 平方米(以下简称该房屋)租给乙方使用，其他基本情况载于本合同附件。</p><p>　　第二条 该房屋现有设施及装饰、<a href="//www.xuexila.com/shenghuo/zhuangxiu/" target="_blank"><u>装修</u></a>情况设施情况：</p><p>　　1。_________________________</p><p>　　2。_________________________</p><p>　　3。_________________________</p><p>　　装饰、装修情况：</p><p>　　1。 天棚：</p><p>　　2。 地面：</p><p>　　3。 墙面：</p><p>　　4。_________________________</p><p>　　第三条 乙方对该房屋( )</p><p>　　①不进行装修</p><p>　　②进行装修，费用自理，同时增添设施：</p><p>　　1。_________________________</p><p>　　2。_________________________</p><p>　　3。_________________________</p><p>　　第四条 租赁期限为 年。自 起至 止。</p><p>　　第五条 甲方须在本合同生效之日起 日内将该房交付乙方使用。</p><p>　　第六条 该房屋月租金每平方米建筑面积为￥ 元，人民币(大写) 元。年租金总额￥ 元，人民币(大写) 元。</p><p>　　第七条 租金结算时间和方式：</p><p>　　第八条 上述租金不包括：</p><p>　　该部分费用由乙方按实际发生额支付。</p><p>　　第九条 租赁期内，该房屋自然损坏的维修养护由 方负责;由于使用不当或装修造成损坏的维修由
								方负责;维修责任方延误维修或维修不当，给对方或他人造成损失的，由责任方按实际损失赔偿。</p><p>　　第十条 在租赁期限内甲方承担下列责任：</p><p>　　1。 保证该房屋产权清楚，没有纠纷，若发生与甲方有关的产权纠纷或其他债务，概由甲方负责<a href="//www.xuexila.com/shenghuo/shoujiqingli/" target="_blank"><u>清理</u></a>;给乙方造成损失的，甲方负责赔偿;</p><p>　　2。 如需转让或抵押房屋，甲方应提前三个月通知乙方并保证本合同继续履行;甲方如出卖该房屋，在同等条件下，乙方享有优先购买权。</p><p>　　3。_________________________</p><p>　　第十一条 在租赁期限内乙方承担下列责任：</p><p>　　1。 必须按合同约定的使用用途使用该房屋，如需改变用途，应征得甲方同意或签订补充协议，否则应当承担违约责任，并可解除合同;</p><p>　　2。
								欲对房屋进行改建、装修或增添设施，应征得甲方书面同意，并办理有关手续;对涉及到墙体、楼板、支撑立柱等承重构件的改动，增加房屋荷载，以及从事危及毗邻房屋和整栋房屋安全的活动，必须经房屋安全鉴定单位鉴定、批准，装修费用由乙方承担，乙方设计的装修方案应经甲方书面认可，未经甲方同意，乙方擅自装修的，甲方有权要求恢复原状，并可解除合同;</p><p>　　3。 如将该房屋转租，必须征得甲方同意，并签订转租合同;如未经甲方同意并签订转租合同，擅自转租，甲方可以追究乙方的违约责任，并解除合同;</p><p>　　4。 因使用不当或乙方的其他原因造成房屋或设施损坏的，乙方负责赔偿或修复;</p><p>　　5。 乙方应在租赁届满时，将该房屋交还甲方;如需继续承租，应在租赁期满前三个月提出，经甲方同意，双方重新签订<a href="//www.xuexila.com/fanwen/contract/zulin/" target="_blank"><u>租赁合同</u></a>;</p><p>　　6。 乙方在交还房屋时，必须保证该房屋原有设施完好，乙方增添的下列设施不得拆卸：</p><p>　　①_________________________</p><p>　　②_________________________</p><p>　　②_________________________</p><p>　　第十二条 甲方未按本合同第五条约定的时间交付房屋，乙方按下列第 款约定追究甲方的违约责任：</p><p>　　1。 终止合同，同时甲方按年租金总额的 %支付违约金，乙方的实际损失超过违约金时，由甲方按实际损失赔偿;</p><p>　　2。 甲方向乙方支付年租金总额的 %的违约金，合同继续履行。</p><p>　　3。</p><p>　　第十三条 乙方未按本合同第七条约定的时间交付租金，甲方按下列第 款约定追究乙方的责任：</p><p>　　1。 终止合同，同时乙方按年租金总额的 %向甲方支付违约金，甲方实际损失超过违约金的，按实际损失赔偿;</p><p>　　2。 乙方按年租金总额的 %支付违约金，合同继续履行。</p><p>　　3。_________________________</p><p>　　第十四条 有下列情形之一的，可以提前解除本合同：</p><p>　　1。 因不可抗力的原因须提前解除的;</p><p>　　2。 经房屋安全鉴定单位鉴定为危险房屋不能继续使用的。</p><p>　　第十五条 在租赁期内该房屋因政府规划<a href="//www.xuexila.com/fanwen/jueding/" target="_blank"><u>决定</u></a>拆迁的，按政府有关规定执行。</p><p>　　第十六条 双方如在本合同履行中发生争议，可向房屋租赁管理部门申请调解，调解不成，按下列第 款约定方式解决：</p><p>　　1。 向 仲裁委员会申请仲裁;</p><p>　　2。 向人<a href="//www.xuexila.com/lunwen/law/minfa/" target="_blank"><u>民法</u></a>院起诉。</p><p>　　第十七条 本合同签订后30日内，双方到房屋租赁管理部门办理登记备案手续，交纳有关规费，领取《房屋租赁证》。</p><p>　　第十八条 本合同自登记备案之日起生效。</p><p>　　第十九条 本合同未尽事宜，由双方另行协商。</p><p>　　第二十条 本合同的附件有：</p><p>　　1。_________________________</p><p>　　2。_________________________</p><p>　　3。_________________________</p><p>　　上述附件与本合同具有同等<a href="//www.xuexila.com/zhishi/falv/" target="_blank"><u>法律</u></a>效力。</p><p>　　第二十一条 本合同一式 份，甲、乙双方各执 份，房屋租赁管理部门一份。</p><p>　　第二十二条 双方承认的附加条款如下：</p><p>　　甲方(签章) 乙方(签章)</p><p>　　法定代表人： 法定代表人：</p><p>　　地址： 地址：</p><p>　　联系电话： 联系电话：</p><p>　　邮政编码： 邮政编码：</p><p>　　委托代理人： 委托代理人：</p><p>　　附件(略)</p><p>　<strong>　租房合同书3</strong></p><p>　　出租方(甲方)</p><p>　　承租方(乙方)</p><p>　　根据国家有关法律、法规和本市有关规定，甲、乙双方在自愿、平等、互利的基础上，经协商一致，就甲方将其合法拥有的房屋出租给乙方使用，乙方承租使用甲方房屋事宜，订立本合同。</p><p>　　1、房屋的座落、面积及装修、设施</p><p>　　1—1、甲方将其合法拥有的座落在本市 区(县) 路 弄(新村) 号 室(部位) 出租给乙方使用。</p><p>　　1—2、甲方出租给乙方使用的该房屋建筑面积共 平方米。</p><p>　　1—3、该房屋的现有装修及设施状况，由双方在合同附件(
								)中加以列明。除双方另有约定外，该附件作为甲方按本合同约定交付乙方使用和乙方在本合同租赁期满交还该房屋时的验收依据。</p><p>　　2、租赁用途</p><p>　　2—1、本合同签订前，甲方已向乙方出示了该房屋的《房地产权证》(权证编号： )，其用途为 。</p><p>　　2—2、乙方向甲方承诺，租赁该房屋仅作为 使用。</p><p>　　2—3、在租赁期限内，未事前征得甲方的书面同意，并按规定报经有关部门核准，乙方不得擅自改变该房屋的使用用途。</p><p>　　3。租赁期限</p><p>　　3—1、该房屋租赁期共 个月。自一九 年 月 日起至一九 年 月 日止。</p><p>　　3—2、租赁期满，甲方有权收入回全部出租房屋，乙方应如期交还。乙方如要求续租，则必须在租赁期满前的
                                月向甲方提出书面意向，经甲方同意后，重新签订租赁合同。</p><p>　　4、租金及支付方式</p><p>　　4—1、该房屋每月每平方米建筑面积租金为人民币 元，月租金总计为人民币 元。(大写： 万 仟 佰 拾 元 角整)</p><p>　　4—2、该房屋租金 年内不变。自第 年起，租金每 年递增 %。</p><p>　　4—3、乙方必须在每月 日前支付当月租金。逾期支付，每逾期一天，则乙方需按月租金的 %支付滞纳金。</p><p>　　4—4、该房屋租金支付方式如下：</p><p>　　5、其他费用</p><p>　　5—1、乙方在租赁期限内，使用的水、电、煤气及 等费用，计算或分摊<a href="//www.xuexila.com/fanwen/banfa/" target="_blank"><u>办法</u></a>：</p><p>　　5—2、上述费用的支付方式和时间：</p><p>　　6、房屋修缮责任</p><p>　　6—1、在租赁期限内，甲方应保证出租房屋的使用安全。乙方应爱护并合理使用其所承租的该房屋及其附属设施。如乙方因使用不当造成房屋或设施损坏的，乙方应立即负责修复或予以经济赔偿。</p><p>　　6—2、除房屋内已有装修和设施外，乙方如要求重新装修或变更原有设施的，应事先征得甲方的书面同意。按规定应向有关部门(包括该房屋物业管理机构)办理申报手续的，须办妥有关手续后，方可进行。租赁期满，根据原书面约定，要求恢复原状的，乙方必须恢复原状;乙方拆除添置的设备时，不得损坏房屋结构，<a href="//www.xuexila.com/fanwen/jingyan/" target="_blank"><u>经验</u></a>收认可，方可办理退租手续。</p><p>　　6—3、该房屋的维修责任除双方在本合同和本合同补充条款中约定的外，均由甲方负责。</p><p>　　6—4、甲方维修房屋及其附属设施，应提前 天书面通知乙方，乙方应积极协助和配合。因乙方阻挠房屋所有人进行维修而产生的后果，则概由乙方负责。</p><p>　　6—5、如因不可抗力原因，导致房屋损坏或造成乙方损失的，双方互不承担责任。</p><p>　　7、转租的约定</p><p>　　7—1、除甲、乙双方在本合同补充条款中另有约定的外，乙方在租赁期限内，须事先征得甲方的书面同意，方可将承租的该房屋部分或全部转租给他人。但同一间房屋，乙方不得部分或以铺位转租给他人，或同时转租给二个以上的承租人居住。</p>
                                 <p>　　出租方(甲方)：<input id="jiaIdcard" placeholder="请输入身份证号"/></p> <p><input id="jiaPhone" placeholder="请输入手机号" /></p>
                                    `
                                },
								{
									type:'html',
									name:'yi',
									required:['idcard','phone','rentLength','startRentDate'],
									html:`<p>　　承租方(乙方)：<input id="idcard" placeholder="请输入身份证号"/></p> <p><input id="phone" placeholder="请输入手机号" /></p><input id="rentLength" placeholder="请输入所租时长年限" type="number" /> <input id="startRentDate" type='date' placeholder="请输入所租时长年限" />`
								}
											]
            }
        }
    },
    methods:{
        setFormKey(item){
            this.form[item.name]={};
            for(let k in item.required){
                let key = item.required[k]
                this.form[item.name][key]="";
            }
        },
        getVal(){
            let data={};
            for(let key in this.form){
                let obj={}
                for(let name in this.form[key]){
                    let value = document.getElementById(name).value
                    obj[name] = value
                }
                data[key]=obj
            }
            return data;
        },
        verify(data){
            let isValue = true;
            for(let key in data){
                if(this.option['noRequired']){
                    let has = false;
                    for(let k in this.option['noRequired']){
                        if(this.option['noRequired'][k]==key){
                            has=true;
                        };
                    }
                    if(has){
                        continue;
                    }
                }
                if(data[key] instanceof Object){
                    return isValue= this.verify(data[key])
                }else{
                    if(!!data[key]){
                    }else{
                        Notify({ type: 'warning', message: document.getElementById(key).placeholder});
                        isValue=false;
                        return false;
                    }
                }
            }
            return isValue;
        },
        agree(){
            this.data = JSON.parse(JSON.stringify(this.getVal()))
            if(this.verify(this.data)){//验证通过
                this.select='yes';
                this.isShow=false;
            }
            
        },
        getText(item){
            if(typeof(item)=='object'){
                return {text:item.text,style:item['style']}
            }
            return {text:item,style:''};
        },
        setTime(){
            this.time=10;
            this.numTimer = setInterval(() => {
            if(this.time<=1){
                clearInterval(this.numTimer)    
            }
            this.time--;
        }, 1000);
        },
        clearTimer(){
            if(!!this.timerr){
                clearInterval(this.timerr)
            }
            if(!!this.numTimer){
                clearInterval(this.numTimer)
            }
        },
        back(){
            this.clearTimer();
            this.isShow=false;
        },
        downFile(){
            var html = document.getElementById("innerHtmlBox").innerHTML;
            for(let key in this.option['value']){
                    let element = document.getElementById(key);
                    html = html.replace(element.outerHTML,"<span>"+this.option.value[key]+"</span>")
            }
            // console.log(html)
            console.log(encodeURI(html))
        },
        download(data){
            this.isdownLoad=true;
            this.select=""
            this.option=data;
            this.option.time = -1
            if(!!data['type']&&data.type=='sign'){
                this.option.text = this.dataType.sign;
            }
            this.isShow=true
            this.setValue();
        },
        setValue(){
            if(!!this.option['value']){
                this.$nextTick(()=>{
                    for(let key in this.option['value']){
                    let element = document.getElementById(key);
                    element.value = this.option.value[key]
                    element.disabled=true;
                }
                })
            }
        },
        show(data){
            this.clearTimer();
            this.setTime();
            this.time=data.time||10;
            this.select=""
            this.option=data;
            if(!!data['type']&&data.type=='sign'){
                this.option.text = this.dataType.sign;
            }
            return new Promise((resolve,rejoce)=>{
                this.isShow=true
                this.setValue();
                this.timerr =setInterval(()=>{
                    if(!!this.select){
                        this.clearTimer();
                        if(this.select=="yes"){
                            resolve([true,this.data,document.getElementById("innerHtmlBox").innerHTML])
                        }else{
                            resolve([false])
                        }
                    }
                },1000)
             
            })
        },
        hide(){
            this.isShow=false;
            this.select=""
            this.option={}
        },
    }


}

</script>
<style scoped lang="stylus">
    .box{
            color: #555;
        line-height: 1.5rem;
        padding: 10px;
    }
    .btn{
        padding:0 30px;
    }
    .tittle{
        box-shadow:0px 0px 5px rgba(0,0,0,1)
    }
</style>