<!--全部履约详情-->
<template>
  <div class="content-contract">
    <el-row class="row-box">
      <el-col :span="12">
        <span id="protectedItems">委托单位：{{ contractDetail.wtfmc }}</span>
      </el-col>
      <el-col :span="12">
        <span>合同编号：{{ contractDetail.htbh }}</span>
      </el-col>
    </el-row>
    <el-row class="row-box">
      <div class="txt-title">
        <span v-if="contractDetail.refundLetterVO.zt == '92000100'||contractDetail.refundLetterVO.zt == '92000201'">履约说明函正文(待生成)：</span>
        <span v-if="contractDetail.refundLetterVO.zt == '92000200'||contractDetail.refundLetterVO.zt == '92000500'">履约说明函正文(待盖章)：</span>
        <span v-if="contractDetail.refundLetterVO.zt == '92000300'">履约说明函正文：</span>
        <span v-if="contractDetail.refundLetterVO.zt == '92000400'">履约说明函正文(已接收)：</span>
      </div>
      <div class="border_box">
        <div id="txtData" :class="{'txt-data':isPrint}">
          <div class="txt-content" v-html="tzzw"></div>
          <div id="marginRefundDetail2"></div>
          <div id="marginRefundDetail3" v-show="isPrint">
            <img :src="base64Img" alt="">
          </div>
        </div>
      </div>
      <el-form :inline="true" :model="receiveForm" class="receive_form">
        <el-row>
            <el-form-item label="是否接收:" prop="sfjs" v-if="type == 2">
              <el-radio v-model="receiveForm.sfjs" :disabled="type!=2" :label="1">是</el-radio>
              <el-radio v-model="receiveForm.sfjs" :disabled="type!=2" :label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="是否接收:" prop="sfjs" v-else>
              <el-radio v-model="contractDetail.refundLetterVO.sfjs" :disabled="type!=2" :label="1">是</el-radio>
              <el-radio v-model="contractDetail.refundLetterVO.sfjs" :disabled="type!=2" :label="0">否</el-radio>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="接收意见:" prop="jsyj" style="width:100%" v-if="type==2">
              <el-input
                v-model="receiveForm.jsyj"
                type="textarea"
                :rows="3"
                :disabled="type!=2"
                placeholder="接收意见"
                class="input-textarea"
              ></el-input>
            </el-form-item>
            <el-form-item label="接收意见:" prop="jsyj" style="width:100%" v-else>
              <el-input
                v-model="contractDetail.refundLetterVO.jsyj"
                type="textarea"
                :rows="3"
                :disabled="type!=2"
                placeholder="接收意见"
                class="input-textarea"
              ></el-input>
            </el-form-item>
        </el-row>
        <el-row v-if="type == 2">
            <el-form-item label="接收人:" prop="jsr">
              <el-input
                v-model="receiveForm.jsr"
                disabled
                clearable
                placeholder="请输入接收人"
                class="input-w-220"
              ></el-input>
            </el-form-item>
            <el-form-item label="接收时间:" prop="jsrq">
              <el-date-picker
                size="small"
                :disabled="type!=2"
                v-model="receiveForm.jsrq"
                value-format="yyyy-MM-dd"
                type="date"
                clearable
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
        </el-row>
        <el-row v-else>
            <el-form-item label="接收人:" prop="jsr">
              <el-input
                v-model="contractDetail.refundLetterVO.jsr"
                disabled
                clearable
                placeholder="请输入接收人"
                class="input-w-220"
              ></el-input>
            </el-form-item>
            <el-form-item label="接收时间:" prop="jsrq">
              <el-date-picker
                size="small"
                :disabled="type!=2"
                v-model="contractDetail.refundLetterVO.jsrq"
                value-format="yyyy-MM-dd"
                type="date"
                clearable
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
        </el-row>
      </el-form>
      <div class="txt-footer">
        <el-button
          type="primary"
          class="iconfont iconbaocun"
          size="small"
          @click="handleClickSet(4)"
          v-if="type == 2"
          >{{receiveForm.sfjs == 1? '接收':'驳回'}}</el-button
        >
        <el-button
          type="primary"
          class="iconfont icondaochu11"
          size="small"
          @click="exportTable"
          :disabled="contractDetail.refundLetterVO.zt == '92000100'"
          v-if="type == 4"
          >打印</el-button
        >
        <el-button
          type="primary"
          class="iconfont iconfanhui"
          size="small"
          @click="handleClickBack"
          v-if="type >= 1"
          >返回</el-button
        >
      </div>
    </el-row>
  </div>
</template>

<script>
import { editRefundLetter } 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: "PartialPerformanceDetail",
  components: {
    KindEditor,
    sealDialog,
  },
  data() {
    return {
      contractDetail: JSON.parse(this.$route.query.data),
      tzzw: "",
      gz: "",
      showType: true,
      dialogVisible: false,
      nowDate: this.getNowDate(),
      receiveForm:{
        sfjs: 1,
        jsr: "",
        jsyj: "",
        jsrq: "",
      },
      isPrint:false,  //打印缩放
      base64Img: "",  
    };
  },
  computed: {
    type() {
      return this.$route.query.type;
    },
  },
  created() {
    console.log(this.type);
    console.log(this.contractDetail);
    this.tzzw = this.$route.query.tzzw;
    this.gz = this.$route.query.gz;
    this.receiveForm.jsrq = new Date()
    this.receiveForm.jsr = sessionStorage.getItem("userName")
    if (this.$route.query.gz) {
      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: {
    handleClickBack() {
      this.$router.go(-1)
    },
    onContentChange(val) {
      this.tzzw = val;
    },
    handleClickSet(type) {
      // type: 1：修改生成前的数据，2：生成，3：盖章 4,接收
      let data = {
        ...this.contractDetail.refundLetterVO,
        sfjs: this.receiveForm.sfjs,
        jsyj: this.receiveForm.jsyj,
        jsr: this.receiveForm.jsr,
        jsrq: typeof this.receiveForm.jsrq == 'string'?this.receiveForm.jsrq:this.nowDate,
      };
      editRefundLetter(data, type)
        .then((res) => {
          if (res.infoCode == 200) {
            this.$message.success("保存成功");
            this.$router.push({name:'PartialPerformance'});
          }
        })
        .catch();
    },
    // 盖章
    signature() {
      this.$confirm("是否确认盖章？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$refs.sealDialog.getData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消盖章",
          });
        });
    },
    sealTodo(sealData) {
      console.log(sealData, "sealData");
      this.gz = `newSeal${sealData}`;
      this.handleClickSet(3);
    },
    //打印
    exportTable() {
      // setTimeout(function () {
      //   htmlToPdf.downloadPDF(
      //     document.querySelector("#txtData"),
      //     "履约说明函.pdf",
      //     1,
      //   );
      // }, 100);
      this.isPrint = true
      setTimeout(() => {
        this.$print(document.getElementById("txtData"));
        this.isPrint = false
      });
    },
    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 {
  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 45px 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;
    }
  }
  /deep/ .receive_form{
    padding: 15px 0;
    .input-textarea{
      width: 1000px;
    }
  }
}
#txtData {
  position: relative;
  width: 100%;
}
.txt-data{
  width: 89% !important;
}
#marginRefundDetail2 {
  position: absolute;
  bottom: 180px;
  right: 220px;
}
#marginRefundDetail3 {
  position: absolute;
  bottom: -50px;
  right: 45px;
}
</style>
