<template>
  <div class="content-main">
    <div v-if="!daochuFlag">
      <header>
        <h1 class="header">退还保证金通知单</h1>
      </header>
      <el-row>结算部:</el-row>
      <el-form
        :model="dform"
        label-position="right"
        label-width="8em"
        ref="dform"
        :rules="rules"
      >
        <el-row style="width: 1200px; margin: 0 auto">
          <el-row style="margin: 10px 10px 20px 30px">
            <el-input
              v-model="dform.jsdw"
              placeholder="退款单位,系统带出"
              disabled
              clearable
              class="w220"
              :title="dform.jsdw"
            ></el-input
            >签订的
            <el-input v-model="dform.htbh" disabled class="w170"></el-input
            >合约已履约完成,共计
            <el-input v-model="dform.sl" disabled class="w170"></el-input>,单价
            <el-input v-model="dform.je" disabled class="w170"></el-input>元/吨,
          </el-row>
          <el-row style="margin: 10px 10px 20px 0">
            请扣除该合同手续费
            <el-input
              class="w170"
              v-model="dform.sxf"
              disabled
              clearable
            ></el-input
            >元,退还剩余保证金
            <el-input
              class="w170"
              v-model="dform.bzj"
              disabled
              clearable
            ></el-input
            >元。{{ dform.bz ? "(" + dform.bz + ")" : "" }}
          </el-row>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="交易部经办人">
              <el-input v-model="dform.jyjbr" class="w90" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经办时间">
              <el-input v-model="dform.jyjbsj" class="w90" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 交易部 -->
        <el-row>
          <el-row class="lineTop"></el-row>
          <el-form-item label="交易部审核结果">
            <el-radio-group v-model="dform.jyfz" disabled>
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="0">驳回</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-row>
            <el-form-item label="交易部审核意见">
              <el-input
                type="textarea"
                v-model="dform.jyfzyj"
                class="w90"
                disabled
              ></el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="交易部负责人">
                <el-input v-model="dform.jyfzr" class="w90" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="交易审核时间">
                <el-input
                  v-model="dform.jyfzsj"
                  class="w90"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
        <!-- 财务部 -->
        <el-row>
          <el-row class="lineTop"></el-row>
          <el-form-item label="财务审批结果" prop="jycw">
            <el-radio-group v-model="dform.jycw" :disabled="isView">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="0">驳回</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-row>
            <el-form-item label="财务审批意见" prop="jycwyj">
              <el-input
                type="textarea"
                v-model="dform.jycwyj"
                class="w90"
                :disabled="isView"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="财务审批人">
                <el-input v-model="dform.jycwr" class="w90" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="财务审批时间">
                <el-input
                  v-model="dform.jycwsj"
                  class="w90"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
        <!-- //结算部 -->
        <el-row
          v-if="
            $route.query.type == 1 &&
            [ztOptions[4].value, ztOptions[5].value].indexOf(dform.tkzt) > -1
          "
        >
          <el-row class="lineTop"></el-row>
          <el-form-item label="结算审核结果">
            <el-radio-group v-model="dform.jyjs" disabled>
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="0">驳回</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-row>
            <el-form-item label="结算审核意见">
              <el-input
                type="textarea"
                v-model="dform.jyjsyj"
                class="w90"
                disabled
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="结算部负责人">
                <el-input v-model="dform.jyjsr" class="w90" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结算审核时间">
                <el-input
                  v-model="dform.jyjssj"
                  class="w90"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
        <!-- 副总裁 -->
        <el-row
          v-if="
            $route.query.type == 1 &&
            [ztOptions[5].value].indexOf(dform.tkzt) > -1
          "
        >
          <el-row class="lineTop"></el-row>
          <el-form-item label="副总裁签批结果">
            <el-radio-group v-model="dform.jyzc" disabled>
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="0">驳回</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-row>
            <el-form-item label="副总裁签批意见">
              <el-input
                type="textarea"
                v-model="dform.jyzcyj"
                class="w90"
                disabled
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="分管财务副总裁">
                <el-input v-model="dform.jyzcr" class="w90" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签批时间">
                <el-input
                  v-model="dform.jyzcsj"
                  class="w90"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
      </el-form>
    </div>
    <div v-else id="transactionHandling">
      <el-row style="text-align: center">
        <span class="title">退还保证金通知单</span>
      </el-row>
      <el-row style="margin-top: 10px">结算部:</el-row>
      <div style="text-indent: 2em; margin-top: 20px">
        <span class="borderClass" style="border-bottom: 1px solid">{{
          dform.jsdw
        }}</span
        >签订的<span class="borderClass" style="border-bottom: 1px solid">{{
          dform.htbh
        }}</span
        >合约已履约完成,共计<span
          class="borderClass"
          style="border-bottom: 1px solid"
          >{{ dform.sl }}</span
        >,单价<span class="borderClass" style="border-bottom: 1px solid">{{
          dform.je
        }}</span
        >元/吨,请扣除该合同手续费<span
          class="borderClass"
          style="border-bottom: 1px solid"
          >{{ dform.sxf }}</span
        >元,退还剩余保证金<span
          class="borderClass"
          style="border-bottom: 1px solid"
          >{{ dform.bzj }}</span
        >元。{{ dform.bz ? "(" + dform.bz + ")" : "" }}
      </div>
      <div class="qzClss" style="margin-top: 50px">
        <el-row>
          <el-col :span="12">
            交易部经办人:<span>{{ dform.jyjbr }}</span>
          </el-col>
          <el-col :span="12">
            交易部负责人:<span>{{ dform.jyfzr }}</span>
          </el-col>
        </el-row>
        <el-row style="text-align: center">
          <el-col :span="24">
            财务审批:<span>{{ dform.jycwr }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            结算部负责人审核:<span>{{ dform.jyjsr }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            分管财务副总裁签批:<span>{{ dform.jyzcr }}</span>
          </el-col>
          <el-col :span="12">
            日期:<span>{{ dform.jyjbsj.substring(0, 10) }}</span>
          </el-col>
        </el-row>
        <!-- <el-row style="text-align: right; margin-top: 50px">
          
        </el-row> -->
      </div>
    </div>
    <footer>
      <el-button
        type="primary"
        class="iconfont icontijiao"
        v-if="!isView"
        @click="handleSubmit"
        >提交</el-button
      >
      <el-button
        type="primary"
        class="iconfont icondaochu11"
        v-if="daochuFlag"
        @click="daochuFunction"
        >导出</el-button
      >
      <el-button
        type="primary"
        class="iconfont iconfanhui"
        @click="$router.go(-1)"
        >返回</el-button
      >
    </footer>
  </div>
</template>
<script>
import {
  confirmMarginRefundBusiness,
  getMarginRefundDetail,
} from "@/api/transaction/ensureManage/index.js";
import { dateTimeFormat } from "@/utils/index";
import { status } from "@/utils/statusList";
import htmlToPdf from "@/utils/htmlToPdf";
export default {
  data() {
    return {
      dform: {
        remark: `结算部
      XXXX签订的XXX合同已履约完成，共计XXX吨，单价XXX元/吨，请扣除合同手续费sss元，剩余保证金ssss元。`,
        sxf: "",
        bzj: "",
      },
      isView: false,
      daochuFlag: false,
      dwmc: "",
      wthbm: "",
      ztOptions: [
        status.djyjb,
        status.djysh,
        status.dcwsp,
        status.djssh,
        status.dcwqp,
        status.cgtk,
      ],
      rules: {
        jycw: [
          { required: true, message: "请选择审核结果", trigger: "change" },
        ],
        jycwyj: [
          { required: true, message: "请选择审核意见", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    let { state, tkbm, dwmc, type, wthbm } = this.$route.query;
    this.dwmc = dwmc;
    this.isView = state == "show" || type == 1 || type == 3;
    this.daochuFlag = type == 3;
    this.dform.tkbm = tkbm;
    this.wthbm = wthbm;
    this.getDetail();
  },
  methods: {
    daochuFunction() {
      // 获取要复制的元素
      let src_ul = document.getElementById("transactionHandling");
      // console.log(src_ul);
      // // 复制 true深度克隆，可以克隆结构和内容
      // let copy_ul = src_ul.cloneNode(true);
      // console.log(copy_ul);
      // copy_ul.style.margin = "40";
      htmlToPdf.downloadPDF(src_ul, "退还保证金通知单.pdf");
    },
    handleSubmit() {
      // alert("111");
      this.$refs["dform"].validate((valid) => {
        if (valid) {
          this.dform.tkfl = 0;
          if (this.dform.jycw == 1) {
            this.dform.url = `/transaction/ensureManage/transactionSettlement/detail`;
            this.dform.itemQuery = JSON.stringify({
              type: "2",
              idKey: "tkbm",
            });
            this.dform.itemUrlHaveDone = `/transaction/ensureManage/transactionFinance/detail`;
            this.dform.itemQueryHaveDone = JSON.stringify({
              type: "1",
              idKey: "tzbm",
            });
            this.dform.tkzt = this.ztOptions[3].value;
            this.dform.tkztmc = this.ztOptions[3].name;
          } else {
            this.dform.url = `/transaction/ensureManage/transactionHandling/detail`;
            this.dform.itemQuery = JSON.stringify({
              type: "2",
              idKey: "tkbm",
            });
            this.dform.itemUrlHaveDone = `/transaction/ensureManage/transactionFinance/detail`;
            this.dform.itemQueryHaveDone = JSON.stringify({
              type: "1",
              idKey: "tzbm",
            });
            this.dform.tkzt = this.ztOptions[0].value;
            this.dform.tkztmc = this.ztOptions[0].name;
          }

          //   this.dform.url = `/transaction/ensureManage/marginRefundFinancialDetail`;
          //   this.dform.itemQuery = JSON.stringify({
          //     type: "2",
          //     idKey: "tkbm",
          //     backUrl: "marginRefundFinancialList"
          //   });
          //   this.dform.itemQueryHaveDone = JSON.stringify({
          //     type: "1",
          //     idKey: "tkbm",
          //     backUrl: "marginRefundFinancialList"
          //   });

          confirmMarginRefundBusiness(this.dform).then((res) => {
            if (res.infoCode == 200) {
              this.$message.success("提交成功!");
              this.$router.go(-1);
            }
          });
        }
      });
    },
    async getDetail() {
      let res = await getMarginRefundDetail({ tkbm: this.dform.tkbm });
      if (res.infoCode == 200) {
        this.dform = res.data;
        if (!this.isView) {
          this.dform.jycwsj = dateTimeFormat(new Date());
          this.dform.jycwr = sessionStorage.userName;
          //   this.dform.dwmc = this.dwmc;
          // this.dform.wthbm = this.wthbm;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#transactionHandling .title {
  font-size: 40px;
  font-family: "SimHei" !important;
  // font-weight: bold;
}
#transactionHandling {
  padding: 70px 120px 40px 120px;
  line-height: 1.5em;
  letter-spacing: 0.1em;
}
#transactionHandling,
#transactionHandling div,
#transactionHandling span {
  font-family: "FangSong" !important;
  font-size: 30px;
}

#transactionHandling .qzClss {
  line-height: 2.25em !important;
}

#transactionHandling .borderClass {
  border-bottom: 1px solid #000;
  padding: 0 1em;
}
.header {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
.w90 {
  width: 90% !important;
}
.w95 {
  width: 95%;
}
.el-form {
  overflow: hidden;
}
footer {
  text-align: center;
  margin: 20px;
}
.lineTop {
  margin: 10px 0 20px 0;
  border-top: 1px solid;
}
.w220 {
  width: 300px;
}
</style>
