<template>
  <div class="eibs-tab" ref="ptab">
		<c-row>
      <c-col :span="24">
				<c-col :span="24" style="margin-bottom: 10px;">
					<c-checkbox
						true-label="X"
						false-label= ""
						v-model="model.nitp.gidtxtmodflg"
						:disabled="isInDisplay || model.nitamep.prtflg == '' "
						class="checkbox-left"
						style="margin-right: 20px;"
					>修改保函文本</c-checkbox>
					<c-button
						:disabled="model.nitp.gidtxtmodflg == ''"
						size="mini"
						type="primary"
						@click="handleReset"
					>
						重置文本
					</c-button>
          <text-diff :leftText="qrcodeLeftText" :rightText="qrcodeRightText"/>
				</c-col>
        <c-col :span="24">
          <c-col :span="24">
            <el-form-item prop="nidgrp.blk.gidtxt">
              <c-xml-format-editor
                v-model="model.nidgrp.blk.gidtxt"
                :disabled="model.nitp.gidtxtmodflg == '' || isInDisplay"
								:isReset="isReset"
								:chs="model.oldnidgrp.rec.giduil!='EN'"
								:gtxgidtxtMark="codes.gtxgidtxtMark"
                placeholder="请输入保函文本可变因素"
								@input="handleInput"
                :heightStr="heightStr"
								:isShowScale="true"
              ></c-xml-format-editor>
            </el-form-item>
          </c-col>
        </c-col>
        <c-col :span="24" style="margin-top: 20px 0 10px;">
			    <div v-if="model.nidgrp.rec.hndtyp=='OA'" style="">反担保保函附加条款：</div>
		    </c-col>

		    <c-col :span="24">
          
            <el-form-item
              v-if="model.nidgrp.rec.hndtyp=='OA'"
              prop="nitp.indirectswiadd"
            >
              <c-xml-format-editor
							line=10
							v-model="model.nitp.indirectswiadd"
							:disabled="model.nitp.gidtxtmodflg == '' || isInDisplay"
							placeholder="请输入"
							:heightStr="heightStr"
							:isShowScale="true"
						></c-xml-format-editor>
            </el-form-item>        
        </c-col>
        <c-col :span="24" style="padding: 8px 0;font-size: 16px;margin-top: 5px;">
          修改之前的保函文本
        </c-col>
        <c-col :span="24">
          <el-form-item label-width="130px">
            <c-xml-format-editor :chs="false" :heightStr="heightStr" disabled type="textarea" rows="8" v-model="codes.gtxgidtxtMark" maxlength="65" show-word-limit placeholder="请输入修改之前的保函文本" :isShowScale="true"></c-xml-format-editor>
          </el-form-item>
        </c-col>
        <c-col :span="24" style="padding: 8px 0;font-size: 16px;margin-top: 5px;">
          迄今为止的修订
        </c-col>
        <c-col :span="24">
          <el-form-item label-width="130px">
            <c-xml-format-editor :chs="false" :heightStr="heightStr" disabled type="textarea" rows="8" v-model="model.oldnidgrp.blk.gidtxtame" maxlength="65" show-word-limit placeholder="请输入迄今为止的修订"></c-xml-format-editor>
          </el-form-item>
        </c-col>
      </c-col>
    </c-row>
  </div>
</template>
<script>
import event from "../event";
import commonDepend from "~/mixin/commonDepend";
import TextDiff from "~/components/business/TextDiff"

export default {
  components: {TextDiff },
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event, commonDepend],
  data() {
    return {
      isReset: false,
      heightStr:'400px',
      qrcodeLeftText: '',
      qrcodeRightText: '',
		};
	},
  methods: {
		handleReset () {
      if(!this.model.nidgrp.rec.gidtxtmodflg){
        if(this.model.nidgrp.blk.modifySet){
          this.model.nidgrp.blk.modifySet = this.model.nidgrp.blk.modifySet.filter(key=>key!='gidtxt')
        }
        this.$emit('changeTxt')
      }else{
        this.isReset = true
      }
		},
		handleInput () {
			this.isReset = false
    },
    resizeFunction(){
     let height = this.$refs.ptab.offsetHeight
     height = height - 35 -45 - 80
     if(height < 400){
       height = 400 
     }
      this.heightStr = height + "px"
    },
    qrcodeText(){
      let qrcodeDes1 = '查询码:';
      let qrcodeDes2 = '<br/>（请妥善保管查询码）<br/><br/>';
      if('EN'== this.model.oldnidgrp.rec.giduil){
        qrcodeDes1 = 'Query Code:';
        qrcodeDes2 = '<br/>(Please safekeep the Query Code)<br/><br/>';
      }
      if('Y'== this.model.oldnidgrp.rec.cxmflg){
        this.qrcodeLeftText = qrcodeDes1 + this.model.oldnidgrp.rec.quycod+ qrcodeDes2 + this.model.oldnidgrp.blk.gidtxt;
      }else{
        this.qrcodeLeftText = this.model.oldnidgrp.blk.gidtxt;
      }
      if('Y'== this.model.nidgrp.rec.cxmflg){
        this.qrcodeRightText = qrcodeDes1 + this.model.nidgrp.rec.quycod+ qrcodeDes2 + this.model.nidgrp.blk.gidtxt;
      }else{
        this.qrcodeRightText = this.model.nidgrp.blk.gidtxt;
      }
    },
  },
  watch:{
		'model.nidgrp.rec.cxmflg'(newVal) {
			this.qrcodeText();
		},
		'model.nidgrp.blk.gidtxt'(newVal2) {
			this.qrcodeText();
		},
	},
  mounted(){
    this.$ob = new ResizeObserver(()=>{
      this.resizeFunction()
    })
    this.$ob.observe(this.$refs.ptab)
    this.resizeFunction()
  },
  beforeDestroy(){
    this.$ob.disconnect();
  },
  created () {},
};
</script>
<style scoped lang="less">
::v-deep .el-form-item__content {
	margin-left: 0!important;
}
</style>