import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableHighlight,
  TouchableOpacity,
  Dimensions,
  Linking
} from "react-native";
import { observable } from "mobx";
var RNFS = require("react-native-fs");
import BackHeader from '../../components/backHeader'
import { inject, observer } from "mobx-react";
import NaviBar from "../../components/navi-bar";
import HTML from "react-native-render-html";
import RNHTMLtoPDF from "react-native-html-to-pdf";
import { width, height } from "../../common/screen";
import { colors } from "../../assets/styles/colors-theme";
import { Fonts } from "../../assets/styles/fonts-theme";
import LoadingView from "../../common/loading";
import Toast, { DURATION } from "react-native-easy-toast";
import Size from "../../common/size";
import { date } from "serializr";
const IMAGES_MAX_WIDTH = Dimensions.get("window").width - 50;
const CUSTOM_STYLES = {};
const CUSTOM_RENDERERS = {};
const size = new Size();
const DEFAULT_PROPS = {
  htmlStyles: CUSTOM_STYLES,
  renderers: CUSTOM_RENDERERS,
  imagesMaxWidth: IMAGES_MAX_WIDTH,
  onLinkPress: (evt, href) => {
    Linking.openURL(href);
  },
  debug: true
};
@inject("appStore")
@observer
export default class Lease extends Component {
  @observable data = {};
  @observable signContractDate = null;
  @observable contractExpiryDate = null;
  @observable remarkString = '';
  constructor(props) {
    super(props);
    this.store = props.appStore;
    this.data = this.props.navigation.state.params.contractData;
    this.signContractDate = this.data.signContractDate;
    this.contractExpiryDate = this.data.endContractDate;
    this.renderRemark();
  }

  sign() {
    var data = {
      apartment: this.data.apartment,
      ownerId: this.data.ownerId,
      ownerName: this.data.ownerName,
      ownerPhone: this.data.ownerPhone,
      ownerContractAddress: this.data.ownerContactAddress,
      tenantId: this.data.tenantId,
      tenantName: this.data.tenantName,
      tenantPhone: this.data.tenantPhone,
      tenantContractAddress: this.data.tenantContactAddress,
      rent: "" + this.data.rent,
      rates: "" + this.data.rates,
      managementFee: "" + this.data.managementFee,
      deposit: "" + this.data.deposit,
      address: this.data.apartmentAddress,
      signContractDate: this.data.signContractDate,
      endContractDate: this.data.endContractDate,
      remark:this.data.remark
    };
    if (this.store.loginUserData.data.member.chara == "tenant") {
      this.store.tenantSign(this.data.id, this);
    } else {
      this.store.ownerCreateContract(data, this);
    }
  }


  dateHandler(which) {
    if (this.signContractDate !== null) {
      switch (which) {
        case 0:
          return this.signContractDate.getDate();
          break;
        case 1:
          return "" + (this.signContractDate.getMonth() + 1);
          break;
        case 2:
          return this.signContractDate.getFullYear();
          break;
        case 3:
          return this.contractExpiryDate.getDate();
          break;
        case 4:
          return "" + (this.contractExpiryDate.getMonth() + 1);
          break;
        case 5:
          return this.contractExpiryDate.getFullYear();
          break;
        case 6:
          return (
            this.contractExpiryDate.getFullYear() -
            this.signContractDate.getFullYear()
          );
          break;
      }
    }
  }

  test() {
    return (
      `  
        <!DOCTYPE html>
        <html>
          <head>
            <style>
            body {
                height: 842px;
                width: 595px;
                /* to centre page on screen*/
                margin-left: auto;
                margin-right: auto;
            }
            </style>
          </head>
          <body>
          <h1 class="last-paragraph">物 業 租 賃 契 約</h1>
          <i>出租人：` +
      this.data.ownerName +
      `</i>
          <br/>
          <i>身分證號碼： ` +
      this.data.ownerId +
      `</i>
          <br/>
          <i>通訊地址: ` +
      this.data.ownerContactAddress +
      `</i>
          <br/>
          <i>連絡電話： ` +
      this.data.ownerPhone +
      `</i>
          <br/>
          <br/>
          <i>承租人： ` +
      this.data.tenantName +
      `</i>
          <br/>
          <i>身分證號碼： ` +
      this.data.tenantId +
      `</i>
          <br/>
          <i>通訊地址: ` +
      this.data.tenantContactAddress +
      `</i>
          <br/>
          <i>連絡電話： ` +
      this.data.tenantPhone +
      `</i>
          <br/>
          <br/>
          <i>出租人與承租人因物業租賃事件，雙方同意簽訂「物業租賃契約」(以下稱“本契約”)並約定條款如下： </i>
          <h3>第一條  物業所在地及使用範圍：</h3>
          <i>承租人向出租人承租` +
      this.data.apartmentAddress +
      `，作為居住之用，不得逾此範圍或改作他用。不得在該物業內賭博及違反香港法例行為，更不可將地址作任何公共社團、劇院、舞院、手工業製品廠或其他商業性質等用途。
          </i>
          <h3>第二條  租賃期間：</h3>
          <i>租期自` +
      this.dateHandler(2) +
      `年` +
      this.dateHandler(1) +
      `月` +
      this.dateHandler(0) +
      `日起至` +
      this.dateHandler(3) +
      `年` +
      this.dateHandler(4) +
      `月` +
      this.dateHandler(5) +
      `日止，共計` +
      this.dateHandler(6) +
      ` 年。
          </i>
          <h3>第三條  租金、按金及給付方式：</h3>
          <i>該物業租金港幣$` +
      this.data.rent.toString() +
      `，(差餉港幣$` +
      this.data.rates.toString() +
      `)另大廈管理費每月港幣 $` +
      this.data.managementFee.toString() +
      `，承租人同意每月一號，將前述訂明之租金及大廈管理費用等，交給出租人。
          </i>
          <br/>
          <i>該物業按金港幣` +
      this.data.deposit.toString() +
      `元整，以作為其履行本契約義務之擔保。承租人如在所訂承租期未滿前退租時，承租人自知中途毀約，自願放棄收回此項按金之權。承租人應於簽訂本契約時給付，承租人於租賃期滿交還該物產後，出租人應於扣除所積欠之債務（包括水電費、大樓管理費、該物業租金、大廈公共管理及任何非自然損壞的損毀費用等費用）後，承租人得憑原收據領回按金(不計利息)。
          </i>
          <h3>第四條  使用物業之限制：</h3>
          <i>
          未經出租人同意，承租人不得將物業全部或部分轉租、出借、頂讓、或以其他變相方法由他人使用物業。
          </i>
          <br/>
          <i>
          承租人應遵守大廈公契內之條款、出租人與大廈管理公司訂下之條款、住戶規約及相關香港法例之規定，且不得供非法使用，或存放危險物品影響公共安全。
          </i>
          <br/>
          <i>
          承租人如擬在物業上為裝設及加工，並應由承租人自行負擔費用暨自負管理維護之責，且不得損害建築結構及影響其安全。
          </i>
          <br/>
          <i>
          承租人涼晒衣物只能於指定之晒衣架管圍內，如有損壞或丟去，出租人不負賠償責任。承租人未經出租人書面同意不得在該大廈任何地方標貼或懸掛、個人或團體之招牌，或具有宣傳性質之廣告，並不得在騎樓外裝置晒方架、花架、霓紅光管等，承租人倘不依約遵守，出租人得雇人拆除之，一切費用承租人必須負責。
          </i>
        
          <br/>
          <i>
          該大廈任何公共地方，承租人不得佔用、存放傢具、貨品、雜物 等，該大廈之升降機專為利便承租人之用，未得該大廈管理處許可，不得用以載運傢俬、行李或危險品，惡臭等物。承租人不得在該大廈或該物業內養狗、可能騷擾其他承租人安寧之鳥類，或使人感到不安之動物。
        </i>
        <br/>
        <i>
        承租人不得收藏違禁政府法例之物品，舉凡軍械、火葯、磺硝、汽油及揮發性之化工原料，或有爆炸性之危險物品，均不許存放該物業之內外任何地方，倘經發覺，即報有關當局究辦。
        </i>
        <br/>
        <i>
        承租人不得有喧嘩或擾亂鄰居安寧之舉動，倘經別戶投訴，承租人仍宣擾如前，出租人有權限期承租人遷出。
        </i>
        <br/>
        <i>
        承租人倘因疏忽而致毀壞該物業之設備，或損及別戶之傢具衣物者，承租人須負賠責任。
        </i>
        <br/>
        <i>承租人須自投買風災、水險、火險、盜竊、意外保險，承租人如有任何損失，出租人不負任何責任。
        </i>
        <br/>
        <i>承租人不得拒絕出租人派遣之人員，在日間適當時間入屋檢視該物業近況或進行任何修理工程。</i>
        <h3>第五條  物業之修繕及責任：</h3>
        <i>該物業一切門窗、廚房及浴室之設備，如︰水電、門窗、坐廁、水箱及、潔具水喉、水渠等如有損壞，承租人需負責修理或賠償，包括承租人自行裝設之設施，應由承租人自行修繕。
        </i>
        <br/>
        <i>出租人應保持物業可供辦公使用之完好狀態，除因一般設備之維護、保養、消耗品以及承租人或承租人所指定之住用人之重大過失所導致損害之修繕應由承租人自費修繕外，因自然災害或天災地變等不可抗拒情形之修繕費用由出租人負擔。
        </i>
        <br/>
        <i>承租人應以善良管理人之注意義務使用、管理、維護物業，如因承租人之故意、過失、或使用管理維護不當致物業毀損，應負損害賠償之責。
        </i>
        <br/>
        <i>該物業內一切原來設備及間隔，承租人必須徵得出租人同意，方可更改或增減。並須在租賃期滿或租約終止，將該物產內衣竊原有設施以完好狀態交還出租人，如有任何損毀，承租人需負責修繕或賠償。
        </i>
        <h3>第六條  稅費負擔</h3>
        <i>政府之印花稅(釐印費)、登記費(如適用) 及律師費(如適用)，均由承租人與除租人平均負擔；承租人租賃期間內大樓管理費、車位管理費、水電費、電話費、清潔費由承租人負擔，承租人並應遷守大樓住戶規約及相關辦法之規定按時支付或預付相關費用。
        </i>
        <h3>第七條  特別終止事宜 </h3>
         <i>承租人遲付租金，出租人有權截斷水電，終止合約，無需經警署及法庭。出租人得將屋內雜物搬出另行出租，並保留採取法律行動，追討一切損失的權利。
          </i>
          <br/>
          <i>租賃期間內，如該單位經政府收地，重建或清拆，火警，危樓以及一切非人力所為的天災人禍導致承租人不能在該單位居住，本契約即自動終止作廢，承租人需無條件搬出，出租人除將按金無息退回給承租人外，無需任何賠償與承租人。
          </i>
          <br/>
          <i>若該物業因為結構出現問題，或因火災、風暴、水浸、白蟻、地震、地面下陷或天然的災禍，導致該物業不適宜居住時，承租人應有權停止繳付租金；若經過一段合理時間後，出租人仍未能把該物業修繕和恢復原狀，雙方均有權解除租約。
          </i>
          <br/>
          <i>承租人有違反本約第四條或其他違反約定之方法使用物業者。
          </i>
          <br/>
          <h3>第八條  合意終止:</h3>
          <i>本契約租賃期間未滿，如無法定終止原因，出租人不得終止租約。
          </i>
          <br/>
          <i>本契約租賃期間未滿，承租人擬終止房屋租約時，出租人有權扣除一個月按金，承租人如欲退租，須提早一個月用書面通知出租人，否則按原定租約時間計算租金。
          </i>
          <br/>
          <h3>第九條  物業返還：</h3>
          <i>本契約租賃期滿，雙方應另訂新的書面租賃契約，否則視為不再續租。承租人於租賃期滿或終止時，將物業遷讓交還，不得藉詞推諉或主張任何權利；承租人所有任何傢俱雜物等，若有留置不搬者，應視作廢棄物論，任憑出租人處理，承租人絕不異議。承租人未即時遷出返還物業時，出租人另得向承租人請求自終止租約或租賃期滿之翌日起至遷讓完竣日止按房屋日租金貳倍計算之違約金。
          </i>
          <br/>
          <i>承租人於返還物業時依照當時使用之現況清掃乾淨後歸還。
          </i>
          <br/>
          <h3>第十條  遺留物之處理：</h3>
          <i>承租人遷出時，如遺留傢俱雜物不搬者，視為放棄。
          </i>
          <h3>第十一條  送達地址之約定</h3>
          <i>雙方相互間之通知，應以本契約上所載地址為準，其後如有變更應以書面通知他方。若有拒收送達不到或退件情形時，悉以第一次郵寄日期為合法送達日期，或由大廈管理處將文件標貼在易於發現之適當地點，則作為承租人已收受該通告文件。
          </i>
          <h3>第十二條  未盡事宜 </h3>
          <i>本契約為雙方之全部合意，並取代之前任何經雙方直接或由轉述之口頭或書面承諾及協商，其修改應經雙方之同意。
          </i>
          <br/>
          <i>本契約如有未盡事宜，依香港新樓租例、有關法令、習慣及誠實信用原則公平解決之。
          </i>
          <h3>第十三條  其他特約事項</h3>
          <i>
          當合約屆期或中止前兩月，出租人在不干擾原則下，將招租通告貼於該業門前或通告板上， 承租人亦應准許持有出租人書面證明書之人士，在日間合理之時間內進入該物業視察。
          </i>
          <h3>前述各條款均為立租賃契約人同意，恐口無憑，爰立本租賃契約書一式二份，各執一份存執，以昭信守。
          </h3>
          <h3>備注</h3>
         `+this.remarkString+`
          <br/>
          <br/>
          <i>出租人簽署： </i>
          <br/>
          <img src=` +
      this.data.ownerSignUri +
      ` alt="ownersignimage" height="42" width="42">
          <br/>
          <i>承租人簽署：</i>
          <br/>
          <img src=` +
      this.data.tenantSignUri +
      ` alt="ownersignimage" height="42" width="42">
          </body>
        </html>
        `
    );
  }

   renderRemark(){
    this.remarkString = ""
   this.data.remark.map((item,index)=>{
      console.log(item)
      
      this.remarkString = this.remarkString.concat(`<i>`+item+`</i><br/><br/>`);
        console.log(this.remarkString )
    })
    return this.remarkString
    
  }

  async htmlToPdf() {
    this.store.loading = true;
    var dateNow = new Date();
    var dateString =
      this.data.apartmentName +
      "_" +
      dateNow.getFullYear() +
      "_" +
      (dateNow.getMonth() + 1) +
      "_" +
      dateNow.getDate() +
      "_" +
      dateNow.getHours() +
      dateNow.getMinutes() +
      dateNow.getSeconds();
    let options = {
      html:
        `  
            <!DOCTYPE html>
            <html>
              <head>
                <style>
                body {
                    height: 842px;
                    width: 595px;
                    /* to centre page on screen*/
                    margin-left: auto;
                    margin-right: auto;
                }
                </style>
              </head>
              <body>
              <h1 class="last-paragraph">物 業 租 賃 契 約</h1>
              <i>出租人：` +
        this.data.ownerName +
        `</i>
              <br/>
              <i>身分證號碼： ` +
        this.data.ownerId +
        `</i>
              <br/>
              <i>通訊地址: ` +
        this.data.ownerContactAddress +
        `</i>
              <br/>
              <i>連絡電話： ` +
        this.data.ownerPhone +
        `</i>
              <br/>
              <br/>
              <i>承租人： ` +
        this.data.tenantName +
        `</i>
              <br/>
              <i>身分證號碼： ` +
        this.data.tenantId +
        `</i>
              <br/>
              <i>通訊地址: ` +
        this.data.tenantContactAddress +
        `</i>
              <br/>
              <i>連絡電話： ` +
        this.data.tenantPhone +
        `</i>
              <br/>
              <br/>
              <i>出租人與承租人因物業租賃事件，雙方同意簽訂「物業租賃契約」(以下稱“本契約”)並約定條款如下： </i>
              <h3>第一條  物業所在地及使用範圍：</h3>
              <i>承租人向出租人承租` +
        this.data.apartmentAddress +
        `，作為居住之用，不得逾此範圍或改作他用。不得在該物業內賭博及違反香港法例行為，更不可將地址作任何公共社團、劇院、舞院、手工業製品廠或其他商業性質等用途。
              </i>
              <h3>第二條  租賃期間：</h3>
              <i>租期自` +
        this.dateHandler(2) +
        `年` +
        this.dateHandler(1) +
        `月` +
        this.dateHandler(0) +
        `日起至` +
        this.dateHandler(3) +
        `年` +
        this.dateHandler(4) +
        `月` +
        this.dateHandler(5) +
        `日止，共計` +
        this.dateHandler(6) +
        ` 年。
              </i>
              <h3>第三條  租金、按金及給付方式：</h3>
              <i>該物業租金港幣$` +
        this.data.rent.toString() +
        `，(差餉港幣$` +
        this.data.rates.toString() +
        `)另大廈管理費每月港幣 $` +
        this.data.managementFee.toString() +
        `，承租人同意每月一號，將前述訂明之租金及大廈管理費用等，交給出租人。
              </i>
              <br/>
              <i>該物業按金港幣` +
        this.data.deposit.toString() +
        `元整，以作為其履行本契約義務之擔保。承租人如在所訂承租期未滿前退租時，承租人自知中途毀約，自願放棄收回此項按金之權。承租人應於簽訂本契約時給付，承租人於租賃期滿交還該物產後，出租人應於扣除所積欠之債務（包括水電費、大樓管理費、該物業租金、大廈公共管理及任何非自然損壞的損毀費用等費用）後，承租人得憑原收據領回按金(不計利息)。
              </i>
              <h3>第四條  使用物業之限制：</h3>
              <i>
              未經出租人同意，承租人不得將物業全部或部分轉租、出借、頂讓、或以其他變相方法由他人使用物業。
              </i>
              <br/>
              <i>
              承租人應遵守大廈公契內之條款、出租人與大廈管理公司訂下之條款、住戶規約及相關香港法例之規定，且不得供非法使用，或存放危險物品影響公共安全。
              </i>
              <br/>
              <i>
              承租人如擬在物業上為裝設及加工，並應由承租人自行負擔費用暨自負管理維護之責，且不得損害建築結構及影響其安全。
              </i>
              <br/>
              <i>
              承租人涼晒衣物只能於指定之晒衣架管圍內，如有損壞或丟去，出租人不負賠償責任。承租人未經出租人書面同意不得在該大廈任何地方標貼或懸掛、個人或團體之招牌，或具有宣傳性質之廣告，並不得在騎樓外裝置晒方架、花架、霓紅光管等，承租人倘不依約遵守，出租人得雇人拆除之，一切費用承租人必須負責。
              </i>
            
              <br/>
              <i>
              該大廈任何公共地方，承租人不得佔用、存放傢具、貨品、雜物 等，該大廈之升降機專為利便承租人之用，未得該大廈管理處許可，不得用以載運傢俬、行李或危險品，惡臭等物。承租人不得在該大廈或該物業內養狗、可能騷擾其他承租人安寧之鳥類，或使人感到不安之動物。
            </i>
            <br/>
            <i>
            承租人不得收藏違禁政府法例之物品，舉凡軍械、火葯、磺硝、汽油及揮發性之化工原料，或有爆炸性之危險物品，均不許存放該物業之內外任何地方，倘經發覺，即報有關當局究辦。
            </i>
            <br/>
            <i>
            承租人不得有喧嘩或擾亂鄰居安寧之舉動，倘經別戶投訴，承租人仍宣擾如前，出租人有權限期承租人遷出。
            </i>
            <br/>
            <i>
            承租人倘因疏忽而致毀壞該物業之設備，或損及別戶之傢具衣物者，承租人須負賠責任。
            </i>
            <br/>
            <i>承租人須自投買風災、水險、火險、盜竊、意外保險，承租人如有任何損失，出租人不負任何責任。
            </i>
            <br/>
            <i>承租人不得拒絕出租人派遣之人員，在日間適當時間入屋檢視該物業近況或進行任何修理工程。</i>
            <h3>第五條  物業之修繕及責任：</h3>
            <i>該物業一切門窗、廚房及浴室之設備，如︰水電、門窗、坐廁、水箱及、潔具水喉、水渠等如有損壞，承租人需負責修理或賠償，包括承租人自行裝設之設施，應由承租人自行修繕。
            </i>
            <br/>
            <i>出租人應保持物業可供辦公使用之完好狀態，除因一般設備之維護、保養、消耗品以及承租人或承租人所指定之住用人之重大過失所導致損害之修繕應由承租人自費修繕外，因自然災害或天災地變等不可抗拒情形之修繕費用由出租人負擔。
            </i>
            <br/>
            <i>承租人應以善良管理人之注意義務使用、管理、維護物業，如因承租人之故意、過失、或使用管理維護不當致物業毀損，應負損害賠償之責。
            </i>
            <br/>
            <i>該物業內一切原來設備及間隔，承租人必須徵得出租人同意，方可更改或增減。並須在租賃期滿或租約終止，將該物產內衣竊原有設施以完好狀態交還出租人，如有任何損毀，承租人需負責修繕或賠償。
            </i>
            <h3>第六條  稅費負擔</h3>
            <i>政府之印花稅(釐印費)、登記費(如適用) 及律師費(如適用)，均由承租人與除租人平均負擔；承租人租賃期間內大樓管理費、車位管理費、水電費、電話費、清潔費由承租人負擔，承租人並應遷守大樓住戶規約及相關辦法之規定按時支付或預付相關費用。
            </i>
            <h3>第七條  特別終止事宜 </h3>
             <i>承租人遲付租金，出租人有權截斷水電，終止合約，無需經警署及法庭。出租人得將屋內雜物搬出另行出租，並保留採取法律行動，追討一切損失的權利。
              </i>
              <br/>
              <i>租賃期間內，如該單位經政府收地，重建或清拆，火警，危樓以及一切非人力所為的天災人禍導致承租人不能在該單位居住，本契約即自動終止作廢，承租人需無條件搬出，出租人除將按金無息退回給承租人外，無需任何賠償與承租人。
              </i>
              <br/>
              <i>若該物業因為結構出現問題，或因火災、風暴、水浸、白蟻、地震、地面下陷或天然的災禍，導致該物業不適宜居住時，承租人應有權停止繳付租金；若經過一段合理時間後，出租人仍未能把該物業修繕和恢復原狀，雙方均有權解除租約。
              </i>
              <br/>
              <i>承租人有違反本約第四條或其他違反約定之方法使用物業者。
              </i>
              <br/>
              <h3>第八條  合意終止:</h3>
              <i>本契約租賃期間未滿，如無法定終止原因，出租人不得終止租約。
              </i>
              <br/>
              <i>本契約租賃期間未滿，承租人擬終止房屋租約時，出租人有權扣除一個月按金，承租人如欲退租，須提早一個月用書面通知出租人，否則按原定租約時間計算租金。
              </i>
              <br/>
              <h3>第九條  物業返還：</h3>
              <i>本契約租賃期滿，雙方應另訂新的書面租賃契約，否則視為不再續租。承租人於租賃期滿或終止時，將物業遷讓交還，不得藉詞推諉或主張任何權利；承租人所有任何傢俱雜物等，若有留置不搬者，應視作廢棄物論，任憑出租人處理，承租人絕不異議。承租人未即時遷出返還物業時，出租人另得向承租人請求自終止租約或租賃期滿之翌日起至遷讓完竣日止按房屋日租金貳倍計算之違約金。
              </i>
              <br/>
              <i>承租人於返還物業時依照當時使用之現況清掃乾淨後歸還。
              </i>
              <br/>
              <h3>第十條  遺留物之處理：</h3>
              <i>承租人遷出時，如遺留傢俱雜物不搬者，視為放棄。
              </i>
              <h3>第十一條  送達地址之約定</h3>
              <i>雙方相互間之通知，應以本契約上所載地址為準，其後如有變更應以書面通知他方。若有拒收送達不到或退件情形時，悉以第一次郵寄日期為合法送達日期，或由大廈管理處將文件標貼在易於發現之適當地點，則作為承租人已收受該通告文件。
              </i>
              <h3>第十二條  未盡事宜 </h3>
              <i>本契約為雙方之全部合意，並取代之前任何經雙方直接或由轉述之口頭或書面承諾及協商，其修改應經雙方之同意。
              </i>
              <br/>
              <i>本契約如有未盡事宜，依香港新樓租例、有關法令、習慣及誠實信用原則公平解決之。
              </i>
              <h3>第十三條  其他特約事項</h3>
              <i>
              當合約屆期或中止前兩月，出租人在不干擾原則下，將招租通告貼於該業門前或通告板上， 承租人亦應准許持有出租人書面證明書之人士，在日間合理之時間內進入該物業視察。
              </i>
              <h3>前述各條款均為立租賃契約人同意，恐口無憑，爰立本租賃契約書一式二份，各執一份存執，以昭信守。
              </h3>
              <h3>備注</h3>
              `+this.remarkString+`
              <br/>
              <br/>
              
              <i>出租人簽署： </i>
              <br/>
              <img src=` +
        this.data.ownerSignUri +
        ` alt="ownersignimage" height="42" width="42">
              <br/>
              <i>承租人簽署：</i>
              <br/>
              <img src=` +
        this.data.tenantSignUri +
        ` alt="ownersignimage" height="42" width="42">
              </body>
            </html>
            `,
      fileName: dateString,
      directory: "Documents",
      width: 595,
      height: 842,
      base64: true
    };

    let file = await RNHTMLtoPDF.convert(options);
    this.store.loading = false;
    this.refs.toast.show("Export success! Please check your Files");

    // console.log(file.filePath);

    console.log(file.filePath);
  }

  renderSignButton(){
    if(this.data.signed){
       return(
         <View/>
       )
    }else{
      if(this.props.navigation.state.params.showSign){
         return(
          <TouchableHighlight
          style={styles.buttonView}
          onPress={() => {
            this.sign();
          }}
        >
          <Text style={styles.buttonText}>Sign</Text>
        </TouchableHighlight>    
         )
      }else{
        if(this.store.loginUserData.data.member.chara == 'tenant'){
          return(
            <TouchableHighlight
            style={styles.buttonView}
            onPress={() => {
              this.sign();
            }}
          >
            <Text style={styles.buttonText}>Sign</Text>
          </TouchableHighlight>    
          )
        }else{
          return(
            <View/>
          )
        }
      }
    }
  }

  render() {
    console.log(this.data);
    return (
      <View
        style={{
          flex: 1,
        
          backgroundColor: 'white',
        }}
      >
          
        <LoadingView visible={this.store.loading} />
        <BackHeader instance={this} back={true} />
        {/* <Text style={styles.title}>react-native-render-html</Text>
                { this.examplesList }
                { this.currentExample } */}
        <ScrollView style={{ flex: 1 ,  padding: "5%",}}>
          <HTML
            html={this.test("philip")}
            classesStyles={{
              "last-paragraph": {
                textAlign: "center",
                color: "black",
                fontWeight: "800",
                baseFontSize: 20
              }
            }}
          />

         {this.renderSignButton()}

          <TouchableHighlight
            style={styles.buttonView}
            onPress={() => {
              this.htmlToPdf();
            }}
          >
            <Text style={styles.buttonText}>Export</Text>
          </TouchableHighlight>
        </ScrollView>
        <Toast
          ref="toast"
          style={{ backgroundColor: colors.mainColor }}
          position="bottom"
          positionValue={200}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{ color: "white" }}
        />
      </View>
    );
  }
}
const styles = StyleSheet.flatten({
  textView: {
    color: colors.textColor,
    fontFamily: Fonts.ubuntuL,
    fontSize: size.getSize(13)
  },
  buttonText: {
    color: "#fff"
  },
  buttonView: {
    backgroundColor: colors.mainColor,
    marginRight: 30,
    marginLeft: 30,
    marginTop: 30,
    marginBottom: 30,
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10
  },
  buttonText: {
    fontSize: 15,
    fontFamily: Fonts.ubuntu,
    color: "white"
  }
});
