<template>
  <div class="eibs">
    <!-- 左边 -->
    <c-col :span="12" style="padding-right: 20px">
      <c-col :span="24">
        <el-form-item label="Special Payment Conditions for Bank Only" prop="lidgrp.blk.spcrcb">
          <c-fullbox>
            <c-input
              type="textarea"
              maxlength="52000"
              v-model="model.lidgrp.blk.spcrcb"
              :rows="20"
              show-word-limit
              placeholder="请输入仅适用于指定银行的特殊付款条款"
              disabled></c-input>
          </c-fullbox>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <c-ptap-commons
          :cols="65"
          :rows="800"
          :minRows="12"
          :maxRows="12"
          :model="model"
          :disabledButton="true"
          :extCodes="['litamep', 'spcrcbamep']"
          lastModel="spcrcb"
          title="Adding/Deleting Text in Current Amendment">
        </c-ptap-commons>
      </c-col>
    </c-col>
    <!-- 右边 -->
    <c-col :span="12" style="padding-left: 20px">
      <c-col :span="24">
        <el-form-item label="Historic Overview" prop="lidgrp.blk.spcrcbame">
          <c-fullbox>
            <c-input
              disabled
              type="textarea"
              maxlength="52000"
              v-model="model.lidgrp.blk.spcrcbame"
              :rows="20"
              show-word-limit
              placeholder="历史修改信息"></c-input>
          </c-fullbox>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <c-col :span="24" class="">
          <el-form-item label=" " prop="litamep.spcrcbamep.modflg" label-width="180px" style="float: left">
            <c-checkbox
              v-model="model.litamep.spcrcbamep.modflg"
              class="checkbox-left"
              true-label="X"
              false-label=""
              disabled
              @change="onModflgChange"
              >Modify Text to Replace</c-checkbox
            >
          </el-form-item>
        </c-col>
        <c-col :span="24" class="">
          <el-form-item label=" " prop="litamep.spcrcbamep.modmanflg" label-width="180px" style="float: left">
            <c-checkbox
              v-model="model.litamep.spcrcbamep.modmanflg"
              class="checkbox-left"
              true-label="X"
              false-label=""
              disabled
              @change="onModmanflgChange"
              >Modify Text Internally</c-checkbox
            >
          </el-form-item>
        </c-col>
      </c-col>
      <c-col :span="24">
        <el-form-item label-width="180px" style="float: left">
          <c-button disabled type="primary"> Show Diff </c-button>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label-width="180px" style="float: left">
          <c-button type="primary" @click="onAddClick" disabled> Add </c-button>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label-width="180px" style="float: left">
          <c-button type="primary" @click="onDeleteClick" disabled> Delete </c-button>
        </el-form-item>
      </c-col>
    </c-col>
  </div>
</template>
<script>
import Api from "~/service/Api";
import CodeTable from "~/config/CodeTable";
import event from "../event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  data() {
    return {
      isSpcrcbDisabled: true,
      isUsrblkDisabled: false,
      originalSpcrcb: "",
    };
  },
  methods: {
    onAddClick() {
      if (this.model.litamep.spcrcbamep.usrblk != null && this.model.litamep.spcrcbamep.usrblk != "") {
        this.model.lidgrp.blk.spcrcb =
          this.model.lidgrp.blk.spcrcb + "\n" + this.model.litamep.spcrcbamep.usrblk + "\n";
        this.model.litamep.spcrcbamep.usrblk = "";
      }
    },
    onDeleteClick() {
      if (this.model.lidgrp.blk.spcrcb != null && this.model.lidgrp.blk.spcrcb != "") {
        let spcrcb = this.model.lidgrp.blk.spcrcb;
        let usrblk = this.model.litamep.spcrcbamep.usrblk + "\n";
        this.model.lidgrp.blk.spcrcb = spcrcb.replaceAll(usrblk, "");
        this.model.litamep.spcrcbamep.usrblk = "";
      }
    },
    onModflgChange() {
      if (this.model.litamep.spcrcbamep.modflg == "X") {
        this.isSpcrcbDisabled = false;
        this.isUsrblkDisabled = true;
        this.model.litamep.spcrcbamep.usrblk = "";
        this.model.lidgrp.blk.spcrcb = this.originalSpcrcb;
      } else {
        this.isSpcrcbDisabled = true;
        this.isUsrblkDisabled = false;
      }
    },
    onModmanflgChange() {
      if (this.model.litamep.spcrcbamep.modmanflg == "X") {
        this.isSpcrcbDisabled = false;
        this.isUsrblkDisabled = true;
        this.model.litamep.spcrcbamep.usrblk = "";
      } else {
        this.isSpcrcbDisabled = true;
        this.isUsrblkDisabled = false;
      }
    },
  },
};
</script>
<style>
.marginLable {
  padding-left: 160px;
}
</style>