<!--未履约保证金(未履约)-->
<template>
  <div class="content-contract">
    <el-row class="row-box">
      <el-col :span="12">
        <span>客户：{{ contractDetail.cjfmc }}</span>
      </el-col>
      <el-col :span="12">
        <span>履约截止日期：{{ contractDetail.lyjzrq }}</span>
      </el-col>
    </el-row>
    <el-row class="row-box">
      <el-table
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          prop="htbh"
          label="合同号"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="pzmc"
          label="品种"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="htlx"
          label="类型"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ ["采购", "销售"][scope.row.htlx] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="cjsl"
          label="合同数量(吨)"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              String(scope.row.cjsl).indexOf(".") > -1
                ? Number(scope.row.cjsl).toFixed(3)
                : scope.row.cjsl
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="履约数量(吨)"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
              <el-form-item prop="lysl" v-if="type == 2">
                <el-input
                  v-model="ruleForm.lysl"
                  clearable
                  placeholder="请输入履约数量"
                  :disabled="scope.row.zt != '92000100' && scope.row.zt != '92000201'"
                  class="input-w-220"
                ></el-input>
              </el-form-item>
              <span v-else>
                {{
                  String(scope.row.lysl).indexOf(".") > -1
                    ? Number(scope.row.lysl).toFixed(3)
                    : scope.row.lysl
                }}
              </span>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="wysl"
          label="违约数量(吨)"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="type == 2">
              <!-- {{scope.row.cjsl - ruleForm.lysl?scope.row.cjsl - ruleForm.lysl:scope.row.cjsl}} -->
              {{
                String(scope.row.cjsl - ruleForm.lysl?scope.row.cjsl - ruleForm.lysl:scope.row.cjsl).indexOf(".") > -1
                  ? Number(scope.row.cjsl - ruleForm.lysl?scope.row.cjsl - ruleForm.lysl:scope.row.cjsl).toFixed(3)
                  : (scope.row.cjsl - ruleForm.lysl?scope.row.cjsl - ruleForm.lysl:scope.row.cjsl)
              }}
            </span>
            <span v-else>
              {{
                String(scope.row.wysl).indexOf(".") > -1
                  ? Number(scope.row.wysl).toFixed(3)
                  : scope.row.wysl
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="jydj"
          label="交易单价(元/吨)"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              String(scope.row.jydj).indexOf(".") > -1
                ? Number(scope.row.jydj).toFixed(2)
                : scope.row.jydj
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="jyje"
          label="交易金额(元)"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              String(scope.row.jyje).indexOf(".") > -1
                ? Number(scope.row.jyje).toFixed(2)
                : scope.row.jyje
            }}
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="row-box">
      <div class="txt-title">
        <span id="protectedItems">履约说明函正文：</span>
      </div>
      <kind-editor
        v-if="type == 2"
        id="tzzwmdetailText"
        :min-height="350"
        width="100%"
        :readonly="false"
        :content="tzzw"
        pluginsPath="/static/kindeditor/plugins/"
        :loadStyleMode="true"
        @on-content-change="onContentChange($event)"
      ></kind-editor>
      <div class="border_box" v-else>
        <div id="txtData">
          <div class="txt-content" v-html="tzzw"></div>
          <div id="marginRefundDetail2"></div>
        </div>
      </div>
      <div class="border_box" v-show="false">
        <div id="txtData2">
          <div class="txt-content" v-html="tzzw"></div>
          <div id="marginRefundDetail3">
            <img :src="base64Img" alt="">
          </div>
        </div>
      </div>
      <div class="txt-footer">
        <el-button
          type="primary"
          class="iconfont iconbaocun"
          size="small"
          @click="handleClickSave('ruleForm')"
          v-if="type == 2"
          >保存</el-button
        >
        <el-button
          type="primary"
          class="iconfont iconshengchenghuizong"
          size="small"
          @click="handleClickAdd('ruleForm')"
          v-if="type == 2"
          >生成</el-button
        >
        <el-button
          type="primary"
          class="iconfont icongaizhang"
          size="small"
          @click="signature"
          v-if="type == 3"
          >盖章</el-button
        >
        <el-button
          type="primary"
          class="iconfont iconbohui"
          size="small"
          @click="stampTurnDownInfo"
          v-if="type == 3"
          >驳回</el-button
        >
        <el-button
          type="primary"
          class="iconfont icondaochu11"
          size="small"
          @click="exportTable"
          v-if="type == 4"
          >打印</el-button
        >
        <el-button
          type="primary"
          class="iconfont iconfanhui"
          size="small"
          @click="$router.go(-1)"
          >返回</el-button
        >
      </div>
    </el-row>
    <sealDialog
      ref="sealDialog"
      sealId="marginRefundDetail2"
      @sealTodo="sealTodo"
    ></sealDialog>
    <el-dialog title="生成" :visible.sync="dialogVisible" width="1250px" :close-on-click-modal="false">
      <div class="txt-content" v-html="tzzw"></div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="iconfont iconbaocun"
          size="small"
          @click="handleClickSet(2)"
          >确认</el-button
        >
        <el-button
          type="primary"
          class="iconfont iconfanhui"
          size="small"
          @click="dialogVisible = false"
          >取消</el-button
          >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { editRefundLetter,editRefundNotice } from "@/api/transaction/refundDeposit";
import KindEditor from "@/components/common/kindeditor";
import sealDialog from "@/components/sealDialog/index.vue";
import htmlToPdf from "@/utils/htmlToPdf";
export default {
  name: "nonPerformanceLetterDetail",
  components: {
    KindEditor,
    sealDialog,
  },
  data() {
    return {
      contractDetail: JSON.parse(this.$route.query.data),
      tableData: [],
      tzzw: "",
      gz: "",
      showType: true,
      dialogVisible: false,
      nowDate: this.getNowDate(),
      base64Img: "",
      rules: {
        lysl: [
          { required: true, message: '请输入履约数量', trigger: 'blur' }
        ],
      },
      ruleForm:{
        lysl:"",
      },
    };
  },
  computed: {
    type() {
      return this.$route.query.type;
    },
    wysl() {
      return this.contractDetail.cjsl - this.ruleForm.lysl;
    },
  },
  watch: {
    ruleForm: {
      deep: true,
      handler: function () {
        this.tzzw = `<blockquote style=\"margin:0 0 0 40px;border:none;padding:0px;\">\n\t<p style=\"text-align:center;\">\n\t\t<span style=\"font-family:SimSun;\"><strong><span style=\"display:none;\"></span><span style=\"font-size:24px;font-family:SimSun;\">${this.contractDetail.cjfmc}至合同截止日实际入库进度</span><span style=\"display:none;\"></span></strong></span> \n\t</p>\n<br />\n</blockquote>\n<span style=\"font-family:FangSong_GB2312;font-size:18px;\"></span><span style=\"font-family:FangSong_GB2312;font-size:18px;\">中国天津粮油批发交易市场：</span><br />\n<br />\n<p>\n\t<span style=\"font-size:18px;font-family:FangSong_GB2312;\"><span style=\"font-family:FangSong_GB2312;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${this.contractDetail.cjfmc}</span>于${this.contractDetail.cjrq?this.contractDetail.cjrq.substr(0,4):'xxxx'}年${this.contractDetail.cjrq?this.contractDetail.cjrq.substr(5,2):'xx'}月${this.contractDetail.cjrq?this.contractDetail.cjrq.substr(8,2):'xx'}日在中国天津粮油批发交易市场交易平台与我公司签订采购合同，合同编号：${this.contractDetail.htbh}，交易品种：${this.contractDetail.pzmc}，合同数量：${this.contractDetail.cjsl?(String(this.contractDetail.cjsl).indexOf(".") > -1? Number(this.contractDetail.cjsl).toFixed(3):this.contractDetail.cjsl):'xxx'} 吨，交易单价：${this.contractDetail.jydj?this.contractDetail.jydj:'xxx'} 元/吨，交易金额：${this.contractDetail.jyje?this.contractDetail.jyje:'xxx'}元，合同履约截止日期为${this.contractDetail.lyjzrq?this.contractDetail.lyjzrq.substr(0,4):'xxxx'}年${this.contractDetail.lyjzrq?this.contractDetail.lyjzrq.substr(5,2):'xx'}月${this.contractDetail.lyjzrq?this.contractDetail.lyjzrq.substr(8,2):'xx'}日。<br />\n</span> \n\t</p>\n\t<p>\n\t\t<span style=\"font-size:18px;font-family:FangSong_GB2312;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style=\"display:none;\"></span><span style=\"font-family:FangSong_GB2312;font-size:18px;text-align:right;text-wrap:wrap;\">${this.contractDetail.cjfmc}</span>实际入库 ${this.ruleForm.lysl!==''?(String(this.ruleForm.lysl).indexOf(".") > -1? Number(this.ruleForm.lysl).toFixed(3):this.ruleForm.lysl):'xxx'} 吨，剩余 ${String(this.wysl).indexOf(".") > -1? Number(this.wysl).toFixed(3):this.wysl} 吨未入库。<span style=\"font-family:FangSong_GB2312;font-size:18px;text-align:right;text-wrap:wrap;\">${this.contractDetail.cjfmc}</span>未能按照合同纳定及时履约。</span><br />\n</span> \n</p>\n<p>\n\t<br />\n</p>\n<p>\n\t<br />\n</p>\n<p>\n\t<br />\n</p>\n<p style=\"text-align:right;\">\n\t<span style=\"font-size:18px;font-family:FangSong_GB2312;\">${this.contractDetail.cckmc?this.contractDetail.cckmc:'承储企业'}</span> \n</p>\n<p style=\"text-align:right;\">\n\t<span style=\"font-size:18px;font-family:FangSong_GB2312;\">日期：${this.nowDate}</span> \n</p>`
      },
    },
  },
  created() {
    console.log(this.type);
    console.log(this.contractDetail);
    this.tableData.push(JSON.parse(this.$route.query.data));
    this.gz = this.$route.query.gz;
    this.ruleForm.lysl = this.$route.query.lysl;
    if (this.type == 2) {
      if (this.$route.query.tzzw == "") {
        this.tzzw = `<blockquote style=\"margin:0 0 0 40px;border:none;padding:0px;\">\n\t<p style=\"text-align:center;\">\n\t\t<span style=\"font-family:SimSun;\"><strong><span style=\"display:none;\"></span><span style=\"font-size:24px;font-family:SimSun;\">${this.contractDetail.cjfmc}至合同截止日实际入库进度</span><span style=\"display:none;\"></span></strong></span> \n\t</p>\n<br />\n</blockquote>\n<span style=\"font-family:FangSong_GB2312;font-size:18px;\"></span><span style=\"font-family:FangSong_GB2312;font-size:18px;\">中国天津粮油批发交易市场：</span><br />\n<br />\n<p>\n\t<span style=\"font-size:18px;font-family:FangSong_GB2312;\"><span style=\"font-family:FangSong_GB2312;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${this.contractDetail.cjfmc}</span>于${this.contractDetail.cjrq?this.contractDetail.cjrq.substr(0,4):'xxxx'}年${this.contractDetail.cjrq?this.contractDetail.cjrq.substr(5,2):'xx'}月${this.contractDetail.cjrq?this.contractDetail.cjrq.substr(8,2):'xx'}日在中国天津粮油批发交易市场交易平台与我公司签订采购合同，合同编号：${this.contractDetail.htbh}，交易品种：${this.contractDetail.pzmc}，合同数量：${this.contractDetail.cjsl?(String(this.contractDetail.cjsl).indexOf(".") > -1? Number(this.contractDetail.cjsl).toFixed(3):this.contractDetail.cjsl):'xxx'} 吨，交易单价：${this.contractDetail.jydj?this.contractDetail.jydj:'xxx'} 元/吨，交易金额：${this.contractDetail.jyje?this.contractDetail.jyje:'xxx'}元，合同履约截止日期为${this.contractDetail.lyjzrq?this.contractDetail.lyjzrq.substr(0,4):'xxxx'}年${this.contractDetail.lyjzrq?this.contractDetail.lyjzrq.substr(5,2):'xx'}月${this.contractDetail.lyjzrq?this.contractDetail.lyjzrq.substr(8,2):'xx'}日。<br />\n</span> \n\t</p>\n\t<p>\n\t\t<span style=\"font-size:18px;font-family:FangSong_GB2312;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style=\"display:none;\"></span><span style=\"font-family:FangSong_GB2312;font-size:18px;text-align:right;text-wrap:wrap;\">${this.contractDetail.cjfmc}</span>实际入库 ${this.ruleForm.lysl!==''?(String(this.ruleForm.lysl).indexOf(".") > -1? Number(this.ruleForm.lysl).toFixed(3):this.ruleForm.lysl):'xxx'} 吨，剩余 ${String(this.wysl).indexOf(".") > -1? Number(this.wysl).toFixed(3):this.wysl} 吨未入库。<span style=\"font-family:FangSong_GB2312;font-size:18px;text-align:right;text-wrap:wrap;\">${this.contractDetail.cjfmc}</span>未能按照合同纳定及时履约。</span><br />\n</span> \n</p>\n<p>\n\t<br />\n</p>\n<p>\n\t<br />\n</p>\n<p>\n\t<br />\n</p>\n<p style=\"text-align:right;\">\n\t<span style=\"font-size:18px;font-family:FangSong_GB2312;\">${this.contractDetail.cckmc?this.contractDetail.cckmc:'承储企业'}</span> \n</p>\n<p style=\"text-align:right;\">\n\t<span style=\"font-size:18px;font-family:FangSong_GB2312;\">日期：${this.nowDate}</span> \n</p>`

      }else{
        this.tzzw = this.$route.query.tzzw
      }
    }else{
      this.tzzw = this.$route.query.tzzw
    }
    if (this.$route.query.gz && this.type != 2) {
      if (this.$route.query.gz.indexOf("newSeal") == -1) {
        this.$nextTick(() => {
          this.$ShowSeal("marginRefundDetail2", 1);
          this.$SetSealData(this.$route.query.gz, 0, "lingdao", 1);
        });
      } else {
        this.$nextTick(() => {
          this.$signatureOnload(
            "marginRefundDetail2",
            this.$route.query.gz.substring(7)
          );
        this.base64Img = 'data:image/png;base64,'+this.$route.query.gz.substring(7);
        });
      }
    }
  },
  methods: {
    handleClickSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleClickSet(1)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleClickAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible = true;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    stampTurnDownInfo() {
      this.$confirm("是否确认驳回？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.handleClickSet(5);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消驳回",
          });
        });
    },
    onContentChange(val) {
      this.tzzw = val;
    },
    async handleClickSet(type) {
      // type: 1：修改生成前的数据，2：生成，3：盖章  4:接收  5：盖章驳回
      let data = {
        ...this.contractDetail,
        lysl: this.ruleForm.lysl,
        wysl: this.wysl,
      };
      let data2 = {
        ...this.contractDetail.refundLetterVO,
        tzzw: this.tzzw,
        gz: this.gz,
      };
      if (this.contractDetail.zt == "92000100" || this.contractDetail.zt == "92000201") {
        await editRefundNotice(data, 1)
          .then((res) => {

          })
          .catch();
      }
      await editRefundLetter(data2, type)
        .then((res) => {
          if (res.infoCode == 200) {
            this.$message.success("保存成功");
            this.$router.push("nonPerformanceLetter");
          }
        })
        .catch();
    },
    // 盖章
    signature() {
      this.$confirm("是否确认盖章？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$refs.sealDialog.getData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消盖章",
          });
        });
    },
    sealTodo(sealData) {
      this.gz = `newSeal${sealData}`;
      this.handleClickSet(3);
    },
    //打印
    exportTable() {
      this.$print(document.getElementById("txtData2"));
    },
    getNowDate() {
      let nowdays = new Date();
      let year = nowdays.getFullYear();
      let month = nowdays.getMonth() + 1;
      let date = nowdays.getDate();
      return year + "年" + month + "月" + date + "日"; //今天
    },
  },
};
</script>

<style lang="scss" scoped>
.content-contract {
  background: #ffffff;
  overflow: auto;
  width: 100%;
  .row-box {
    width: 1300px;
    padding: 15px 30px;
    font-size: 16px;
  }
  .border_box {
    border: 1px solid #aaaaaa;
  }
  /deep/ .txt-content {
    box-sizing: border-box;
    width: 100%;
    padding: 45px 50px 60px;
    .pars {
      padding-bottom: 40px;
    }
    .pars-date {
      display: flex;
      flex-flow: column nowrap;
      width: 300px;
      float: right;
    }
  }
  .txt-footer {
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    padding: 30px 0;
    /deep/ .el-button + .el-button {
      margin-left: 25px;
    }
  }
}
#txtData {
  position: relative;
  width: 100%;
}
#txtData2 {
  position: relative;
  width: 89%;
}
#marginRefundDetail2 {
  position: absolute;
  bottom: 160px;
  right: 240px;
}
#marginRefundDetail3 {
  position: absolute;
  bottom: -50px;
  right: 50px;
}
</style>
