<template>
  <div>
    <div class="bigBox">
      <MOSTY.FromPage :title="'承诺书查看'" @closeDialog="CloseEvent">
        <template #content>
          <div class="wichz">
            <div class="imgBox" id="htmlPdfcan">
              <div style="
              color: black;
              text-align: center;
              font-size: 25px;
              font-weight: 700;
            ">
                {{ data.cnsmc }}
              </div>
              <div style="
              width: 100%;
              height: 1px;
              border-top: solid #397d01 1.5px;
              margin-top: 5px;
              margin-bottom: 15px;
            ">
              </div>
              <!-- <div style="color: black; font-size: 16px; line-height: 30px">
                {{ data.cnsnr }}
              </div> -->
              <div style="color:initial;" v-html="data.cnsnr"></div>
              <div style="
              color: black;
              font-size: 16px;
              float: right;
              margin-top: 30px;
              margin-right: 20px;
            " v-if="data.status == '2'">
                签订时间：{{ data.qdrxx.qdsj }}
              </div>
              <div v-if="data.status == '2'" style="color: black;margin-top: 20px;">签订人：{{ data.qdrxx.ryXm }}</div>
              <div class="yiqianding" v-if="data.Isqd">
                <img :src="getImgUrl('indexImages/yqd.png')">
              </div>
              <div>
                <el-image style="width: 100px; height: 100px" :src="qzImg" :zoom-rate="1.2" :max-scale="7"
                  :min-scale="0.2" :preview-src-list="[qzImg]" :initial-index="4" fit="scale-down" />
              </div>
            </div>
          </div>

        </template>
        <template #footer>

          <el-button type="primary" @click="save">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>导出</span>
          </el-button>
          <el-button type="primary" @click="CloseEvent">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </template>
      </MOSTY.FromPage>

    </div>
  </div>
</template>

<script setup>
// 引入
import { getImgUrl } from "@/utils/tools.js"
import * as MOSTY from "@/components/MyComponents/index";
import { reactive, onMounted, ref, defineProps } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import { getFileUrl, getFile } from "@/utils/getFile.js";
import { Html2canvasImg } from '@/utils/html2pdf.js';
const emits = defineEmits(["close"]);
const qzImg = ref(null)
const props = defineProps({
  cnsId: String,
  ryid: String
});
// 数据
const data = ref({
  cnsmc: "",
  cnsnr: "",
  qdrxx: {
    qdsj: ""
  }
});
// 分页
const listQuery = reactive({
  cnsId: "",
  ryid: ""
});

//关闭
const CloseEvent = () => {
  emits("close");
};
//获取列表数据
function getDataList() {
  listQuery.cnsId = props.cnsId;
  listQuery.ryid = props.ryid;
  let params = listQuery;
  getApi(params, "/mosty-jcgl/cns/getQdqkInfo").then(async (res) => {
    if (res) {
      data.value = res;
      if (data.value.qdrxx.qdsj) {
        data.value.qdsj = data.value.qdrxx.qdsj;
        data.value.Isqd = true
        qzImg.value = await getFileUrl(res.qdrxx.filePath);
      }
      if (!data.value.qdrxx.qdsj) {
        data.value.qdrxx.qdsj = "";
        data.value.Isqd = false
      }


      // qzImg
    }
  });
}

const save = () => {
  Html2canvasImg("htmlPdfcan", "承诺书")
};
onMounted(() => {
  getDataList();
});
</script>

<style lang="scss" scoped>
::v-deep .el-image-viewer__img {
  background-color: #fff !important;
}

.wichz {
  width: 100%;
  display: flex;
  justify-content: center;
}

.imgBox {
  position: relative;
  width: 750px;
  margin: 10 auto;
}

.yiqianding {
  position: absolute;
  right: 9%;
  top: 0%;
  width: 140px;
}

.bigBox {
  display: block;

}

.el-form {
  display: block !important;

  .el-form-item {
    width: 600px;
    margin: 0 auto;
    margin-top: 10px;
  }
}
</style>
