<template>
  <div>
    <div class="btns">
      <span v-if="props.isEdit" @click="save">保存告知卡</span>
      <span v-if="!props.isEdit" @click="onloadqdImg">下载告知卡</span>
    </div>
    <div class="table" id="gzk">
      <div class="fxgzk">风险告知卡</div>
      <div class="orgname">企业名称：{{ fromObj.orgname }}</div>
      <table>
        <tbody>
          <tr>
            <td class="yellow">风险点名称</td>
            <td class="fontpe">
              <el-input v-model="fromObj.riskname" clearable :disabled="!props.isEdit"></el-input>
            </td>
            <td class="red" rowspan="3">主要危险因数描述</td>
            <td class="fontpe" rowspan="3">
              <el-input v-model="fromObj.wxys" type="textarea" clearable :disabled="!props.isEdit"></el-input>
            </td>
          </tr>
          <tr>
            <td class="yellow">风险编号</td>
            <td class="fontpe">
              <el-input v-model="fromObj.risknum" clearable :disabled="!props.isEdit"></el-input>
            </td>
          </tr>
          <tr>
            <td class="yellow">风险等级</td>
            <td class="fontpe">
              <el-input v-model="fromObj.risklevel" clearable :disabled="!props.isEdit"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2" class="fontpe">
              <div class="imgBox">
                <div class="addBtn" id="addBtn" @click="changeImg" v-if="props.isEdit">更新图片</div>
                <div class="imglist">
                  <img v-for="(it, ind) in imgList" :key="ind" :src="getImgUrl(`gzkimg/${it}`)" alt="">
                </div>
              </div>
            </td>
            <td class="red">主要风险控制措施</td>
            <td class="fontpe">
              <el-input v-model="fromObj.kzcs" type="textarea" clearable :disabled="!props.isEdit"></el-input>
            </td>
          </tr>
          <tr>
            <td class="green">责任部门</td>
            <td class="fontpe">
              <el-input v-model="fromObj.deptname" clearable :disabled="!props.isEdit"></el-input>
            </td>
            <td class="red">主要事件类型</td>
            <td class="fontpe">
              <el-input v-model="fromObj.sglx" clearable :disabled="!props.isEdit"></el-input>
            </td>
          </tr>
          <tr>
            <td class="green" rowspan="2">责任人</td>
            <td class="fontpe" rowspan="2">
              <el-input v-model="fromObj.personname" type="textarea" autosize clearable :disabled="!props.isEdit"></el-input>
            </td>
            <td class="red" rowspan="2">应急处置措施</td>
            <td class="fontpe" rowspan="2">
              <el-input v-model="fromObj.czcs" type="textarea" clearable :disabled="!props.isEdit"></el-input>
            </td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>
  <div v-if="gzkShow" class="dialog-box">
    <GzkImg @close="closeGzkImg" :gzkShow="gzkShow" :imgList="imgList" />
  </div>
</template>
<script setup>
import GzkImg from './gzkImg.vue'
import { getImgUrl } from "@/utils/tools.js"
import { ref, onMounted, watchEffect } from "vue"
import { ElMessage } from "element-plus";
import { Html2canvasImg } from "@/utils/html2pdf.js";
const emits = defineEmits(["handleChange", 'searchChange']);
const fromObj = ref({})
const gzkShow = ref(false)
import { getApi, postApi } from "@/api/tobAcco_api.js";
const props = defineProps({
  obj: {
    default: {},
    tyte: Object
  },
  type: {
    default: '',
    tyte: String
  },
  showCount: {
    type: Boolean,
    default: false
  },
  cardtype: '',
  isEdit: false
});
const imgList = ref([])

watchEffect(() => {
  if (props.obj) {
    getfromobj()
  }
})
onMounted(() => {

})
function getfromobj() {
  getApi({ ywid: props.obj.id, cardtype: props.cardtype }, "/mosty-jcgl/noticeCard/getCard").then((res) => {
    if (res) {
      fromObj.value = res
      if (res.img) {
        imgList.value = res.img.split(',')
      }
    } else {
      fromObj.value.riskname = props.obj.name
      fromObj.value.person = props.obj.responsibilityperson
      fromObj.value.personname = props.obj.responsibilitypersonname
      fromObj.value.deptid = props.obj.responsibilitydeptid
      fromObj.value.deptname = props.obj.responsibilitydeptname
      fromObj.value.orgcode = props.obj.orgcode
      fromObj.value.orgname = props.obj.orgname
      fromObj.value.phone = props.obj.aqphone
      fromObj.value.ywid = props.obj.id
      fromObj.value.cardtype = props.cardtype
    }
  })
}

// 下载告知卡
function onloadqdImg() {
  Html2canvasImg("gzk", "《" + fromObj.value.riskname + "》风险告知卡")
}
// 关闭告知卡图片选择
const closeGzkImg = (val) => {
  gzkShow.value = false
  imgList.value = val
}
// 验证手机号
const phoneRule = (phone) => {
  if (!phone) return true;
  const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
  if (!reg.test(phone)) {
    ElMessage.error("请输入正确的责任人电话")
    return false
  }
  return true
};
// 保存数据
const save = () => {
  // 验证手机号
  if (!phoneRule(fromObj.value.phone)) return;
  if (imgList.value) {
    fromObj.value.img = imgList.value.toString()
  }
  postApi(fromObj.value, "/mosty-jcgl/noticeCard/saveCard").then(() => {
    ElMessage.success("保存成功");
  })
}
// 更新图片
const changeImg = () => {
  gzkShow.value = true
}
</script>

<style lang="scss" scoped>
.imgBox {

  .addBtn {
    text-align: right;
    margin-right: 10px;
    text-decoration: underline;
    color: var(--el-color-primary);
    cursor: pointer;
  }

  .imglist {
    display: flex;
    align-items: center;
    justify-content: space-around;

    >img {
      width: 85px;
      height: 100px;
      margin-left: 10px;
    }
  }
}

.btns {
  width: 80%;
  text-align: right;
  height: 60px;
  line-height: 60px;
  cursor: pointer;

  >span {
    text-decoration: underline;
    color: var(--el-color-primary);
    display: inline-block;
    width: 100px;
  }
}

.fxgzk {
  width: 100%;
  height: 40px;
  margin: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #000;
}

.orgname {
  height: 35px;
  line-height: 35px;
  color: #000;
}

::v-deep .el-input__inner {
  background: #d0ddf9;
  border: #d0ddf9;
}

::v-deep .el-textarea__inner {
  background: #d0ddf9 !important;
  border: #d0ddf9 !important;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background: #d0ddf9 !important;
  border: #d0ddf9 !important;
}

::v-deep .el-input.is-disabled .el-input__inner {
  background: #d0ddf9 !important;
  border: #d0ddf9 !important;
}

::v-deep .el-input__inner:hover {
  background: #d0ddf9;
  border: #d0ddf9;
}

.el-textarea__inner:hover {
  background: #d0ddf9;
  border: #d0ddf9;
}

.table {
  min-height: 40vh;
  width: 828px;
  margin: auto;
  padding: 30px;
}


table {
  width: 100%;
  border-collapse: collapse;
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

.fontpe {
  background-color: #d0ddf9;
}

.green {
  background-color: #79a774;
}

th,
td {
  border: 1px solid #0e0d0d;
  padding: 8px;
  text-align: center;
  color: #000 !important;
  box-sizing: border-box;
}

th {
  background-color: #f2f2f2;
}
</style>
