<template>
  <el-dialog title='责任书查看' :width="widthdialog" v-model="props.modelValue" :before-close="handleClose">
    <!-- 培训计划新增或修改 -->
    <!-- <div class="config" v-if="ruleForm">
          {{ruleForm.qdnr}}
        </div> -->

    <div class="imgBox" id="htmlPdfcan" v-if='ruleForm'>
      <div style="
              color: black;
              text-align: center;
              font-size: 35px;
              font-weight: 700;
            ">
        {{ ruleForm.zrsmc }}
      </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; text-indent: 2em;">
        {{ ruleForm.qdnr }}
      </div>
      <div style="
              color: black;
              font-size: 16px;
              float: right;
              margin-top: 30px;
              margin-right: 20px;
            ">
        签订时间：{{ ruleForm.qdsj }}
      </div>
      <div style="color: black;margin-top: 20px;">签订人：{{ ruleForm.ryxm }}</div>
      <div>
        <div class="info-title" v-if="ldimage">领导签字:</div>
        <el-image :src="ldimage" fit="scale-down" :preview-src-list="ldimage" />
        <div class="info-title" v-if="qdimage">签订人签字:</div>
        <el-image :src="qdimage" fit="scale-down" :preview-src-list="qdimage" />
      </div>
      <div class="yiqianding" v-if="ruleForm.qdzt == '1'">
        <img :src="getImgUrl('indexImages/yqd.png')" style='width:120px;height:120px;'>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose" type="primary">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { ref, onMounted, defineProps, defineEmits, reactive, watch } from "vue";
import { getItem } from "@/utils/storage";
import { getFileUrl, getFile } from "@/utils/getFile.js";
import { getApi } from "@/api/tobAcco_api.js";
//新增保存按钮截流
const ldimage = ref('')
const qdimage = ref('')

const widthdialog = ref("1000px");

const emits = defineEmits(["update:modelValue", "close"]);
//表单数据
const ruleForm = ref({});
const timelist = ref([]);
const props = defineProps({
  rowdata: {
    type: Object,
    default: {}
  },
  modelValue: {
    type: Boolean,
    default: true
  },
  xqId: {
    type: String,
    default: ""
  }
});
watch(
  () => props.modelValue,
  () => {
    zrsxqdata(props.xqId);
  }, { deep: true }
);
//获取责任书详情
async function zrsxqdata(id) {
  getApi({ id }, '/mosty-jcgl/zrs/getZrsInfo').then(async (res) => {
    if (res) {
      getzeslc(props.xqId);
      ruleForm.value = res;
      ruleForm.value.fqxgsmc = getItem("deptId").ssdwmc
      ruleForm.value.fqsgsid = getItem("deptId").ssdwid
      if (res.ldfilepath) {
        ldimage.value = await getFileUrl(res.ldfilepath);
      }
      if (res.filepath) {
        qdimage.value = await getFileUrl(res.filepath);
      }
    }
  })
}
//获取责任书进度
function getzeslc(id) {
  getApi({ id }, "/mosty-jcgl/zrs/getZrsStep").then((res) => {
    timelist.value = res;
    var ind = res.findIndex((i) => i.state == "N");
    timelist.value.forEach((item, index) => {
      if (ind == -1) {
        item.show = true;
      } else if (index > ind) {
        item.show = false;
      } else {
        item.show = true;
      }
    });
  });
}

// 关闭
const handleClose = () => {
  emits("update:modelValue", false);
  emits("close");
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px;
  height: 74vh !important;
  overflow-y: scroll !important;
}

.imgBox {
  position: relative;
  margin-top: 10px;
  width: 80%;
  height: 74vh !important;
  overflow-y: scroll !important;
  margin: auto;
}

.yiqianding {
  position: absolute;
  right: 4%;
  top: 0%;
  width: 140px;
}
</style>
