<template>
  <div class="box_gbig">
    <div class="box_title">
      <span>{{ props.title }}</span>
      <div class="btnBox">
        <el-button type="primary" @click="CloseEvent">
          <el-icon>
            <Back />
          </el-icon>
          <span>返回</span>
        </el-button>
      </div>
    </div>
    <div class="xz_btn">
      <el-button type="primary" @click="onloadImg">
        <el-icon>
          <Download />
        </el-icon>
        <span>下载</span>
      </el-button>
    </div>
    <div class="box_img" v-if="showimg">
      <div class="box_bg" id="htmlPdfcan">
        <div class="tobox one">
          <img :src="getImgUrl('system/logo.png')" style="height: 27px; margin-right: 7px" />
          <span style="margin-right: 10px">安全生产</span>
          <span class="sxs"></span>
          <span style="margin-left: 5px">培训合格证书</span>
        </div>
        <div class="tobox two">
          <el-image v-if="userPortrait" style="width: 100px; height: 100px" :src="userPortrait" :zoom-rate="1.2"
            :max-scale="7" :min-scale="0.2" :preview-src-list="srcList" :initial-index="1" fit="cover" />
          <div v-else style="width: 100px; height: 100px">
            <MOSTY.Upload v-model="fileList" :limit="1" :isImg="true" @handleChange="handleChange" />
          </div>
          <div>{{ fromobj.obj.tcperson }}同志：</div>
        </div>
        <div class="tobox thr">
          <span>自{{ fromobj.obj.starTime[0] }}年{{ fromobj.obj.starTime[1] }}月{{
            fromobj.obj.starTime[2]
          }}日至 {{ fromobj.obj.endTime[0] }}年{{
              fromobj.obj.endTime[1]
            }}月{{ fromobj.obj.endTime[2] }}日{{
              fromobj.obj.place ? "在" + fromobj.obj.place : ""
            }}参加“{{
              fromobj.obj.planName ? fromobj.obj.planName : "安全教育培训"
            }}",考核合格，准予结业!</span>
        </div>
        <div class="tobox for">
          <div>证书编号：{{ fromobj.obj.tcno }}</div>
          <el-image style="width: 100px; height: 100px" :src="qrcodepxImg(fromobj.obj.id, 'aqzs', '')" :zoom-rate="1.2"
            :max-scale="7" :min-scale="0.2" :initial-index="1" fit="cover" />
        </div>
        <div class="tobox fiv">
          <div>{{ fromobj.obj.tcawardunit }}</div>
          <div style="text-align: center;">
            {{ fromobj.obj.tcbegindates[0] }}年{{
              fromobj.obj.tcbegindates[1]
            }}月{{ fromobj.obj.tcbegindates[2] }}日
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
// 引入
import {
  watch,
  onMounted,
  defineProps,
  ref,
  getCurrentInstance,
  reactive
} from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { qrcodepxImg } from "@/utils/tools";
import * as MOSTY from "@/components/MyComponents/index";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { Html2canvasImg } from "@/utils/html2pdf.js";
// import * as html2pdf from 'html2pdf.js'
const router = useRouter();
const userPortrait = ref("");
const srcList = ref([]);
const fileList = ref([]);
const pxobj = ref({
  // place: '',
  // planName: '',
});
const { proxy } = getCurrentInstance();
// 数据
const showimg = ref(false);
const fromobj = reactive({
  obj: {},
  time: []
});
const srcLists = ref([]);
const props = defineProps({
  title: String,
  rowId: String,
  obj: {
    type: Object,
    default: () => { }
  }
});

const emits = defineEmits(["close"]);

const fromObj = ref({});
const CloseEvent = () => {
  emits("close");
};
function handleChange(data) {
  const { id } = fromobj.obj;
  uploadPortrait(id, data[0].data);
}
function getxq(id) {
  getApi({ id }, "/mosty-jcgl/tcertificate/getById").then((res) => {
    fromobj.obj = res;
    let time = res.jsjytime.split("至");
    fromobj.obj.starTime = time[0].split("-");
    fromobj.obj.endTime = time[1].split("-");
    fromobj.obj.tcbegindates = fromobj.obj.tcbegindate.split("-");
    if (fromobj.obj.picturePath) {
      _getUserPortrait(fromobj.obj.picturePath);
    }
    getApi({ id: fromobj.obj.pxfaid }, "/mosty-jcgl/training/getInfoJh").then(
      (res) => {
        if (res) {
          fromobj.obj.place = res.place;
          fromobj.obj.planName = res.planName;
        }

      }
    );
    showimg.value = true;
  });
}
const _getUserPortrait = (picturePath) => {
  getApi({}, `/mosty-base/minio/file/download/${picturePath}`).then((res) => {
    if (res) userPortrait.value = res.url;
    srcList.value.push(res.url);
  });
};
//上传用户头像
const uploadPortrait = (certificateid, picturePath) => {
  postApi(
    { certificateid, picturePath },
    "/mosty-jcgl/tcertificate/upPicture"
  ).then((res) => {
    ElMessage.success("成功");
    props.detail.picturePath = fileList.value;
  });
};
function onloadImg() {
  Html2canvasImg("htmlPdfcan", "安全生产培训合格证书");
}
onMounted(() => {
  if (props.rowId) {
    getxq(props.rowId);
  }
});
</script>

<style lang="scss" scoped>
.btnBox {
  margin-top: 10px;
  margin-right: 10px;
}

.box_gbig {
  width: 100%;
  height: 84vh;

  .xz_btn {
    margin: 20px;
  }

  .box_title {
    height: 50px;
    border-bottom: 1px dashed #bbb1b1;
    width: 100%;
    display: flex;
    justify-content: space-between;

    >span {
      font-size: 18px;
      color: #000;
      line-height: 51px;
    }
  }

  .box_img {
    margin-top: -46px;
    height: 700px;
    width: 100%;

    .box_bg {
      height: 700px;
      width: 900px;
      margin: auto;
      padding-top: 150px;
      text-align: center;
      background: url("~@/assets/images/zsbg.png") no-repeat center;

      .tobox {
        margin: 20px;
        display: flex;
        justify-content: center;
        margin: auto;
        font-family: "仿宋", monospace;
        text-align: center;
        color: #000;
      }

      .one {
        font-weight: 800;
        font-size: 26px;
        display: flex;
        align-items: center;
      }

      .two {
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: 15%;
      }

      .thr {
        width: 600px;
        font-size: 20px;
        text-indent: 2em;
        line-height: 30px;
        text-align: start;
        white-space: normal;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: 15%;
      }

      .for {
        width: 300px;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        display: block;
        white-space: normal;
        margin-left: 15%;
        margin-top: 42px;
      }

      .fiv {
        font-size: 20px;
        line-height: 30px;
        text-align: start;
        display: block;
        float: right;
        margin-right: 15%;
        white-space: normal;
      }
    }
  }
}

.sxs {
  content: "";
  position: absolute;
  left: 49.5%;
  transform: translateX(-50%);
  width: 1px;
  height: 30px;
  background: #6a6666;
}

::v-deep .el-upload--picture-card {
  width: 100px !important;
  height: 100px !important;
}

::v-deep .el-upload--picture-card i {
  margin-top: 33px !important;
  font-size: 28px;
  color: #8c939d;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 100px !important;
  height: 100px !important;
}

::v-deep .upload-demo {
  height: 100px !important;
  overflow: hidden !important;
  text-align: left;
}
</style>