<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 colspan="3" class="red">工作场所存在高温，对身体有损害，请注意防护</td>
            <!-- <td>1</td>
            <td>1</td> -->
          </tr>
          <tr>
            <td rowspan="2">{{ getLabels(props.obj.hazardousfactors) }}</td>
            <td class="blue">健康危害</td>
            <td class="blue">物理特征</td>
          </tr>
          <tr>
            <td class="fontpe"><el-input v-model="fromObj.healthHazards" type="textarea" clearable></el-input></td>
            <td class="fontpe"><el-input v-model="fromObj.physicalProperty" type="textarea" clearable></el-input></td>
          </tr>
          <tr>
            <td rowspan="4">
              注意 {{ getLabels(props.obj.hazardousfactors) }}<br />
              <div class="imgBox">
                <div class="addBtn" id="addBtn" @click="changeImg('1')" v-if="props.isEdit">更新图片</div>
                <br />
                <div class="imglist">
                  <img v-for="(it, ind) in imgList" :key="ind" :src="getImgUrl(`zygzkimg/${it}`)" alt="" />
                </div>
              </div>
            </td>
            <td colspan="2" class="blue">应急处理</td>
          </tr>
          <tr>
            <td colspan="2" class="fontpe"><el-input v-model="fromObj.emergencyTreatment" type="textarea"
                clearable></el-input></td>
          </tr>
          <tr>
            <td colspan="2" class="blue">防护措施</td>
          </tr>
          <tr>
            <td colspan="2" class="fontpe">
              <el-input v-model="fromObj.protectiveMeasures" type="textarea" clearable></el-input>
              <br />
              <div class="imgBox">
                <div class="addBtn" id="addBtn" @click="changeImg('2')" v-if="props.isEdit">更新图片</div>
                <br />
                <div class="imglist">
                  <img v-for="(it, ind) in imgList2" :key="ind" :src="getImgUrl(`zygzkimg/${it}`)" alt="" />
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <br />
      <br />
      <table v-if="false">
        <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="require(`@/assets/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">责任人</td>
            <td class="fontpe">
              <el-input v-model="fromObj.personname" 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>
          <tr>
            <td class="green">责任人电话</td>
            <td class="fontpe">
              <el-input v-model="fromObj.phone" 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="isType === '1' ? imgList : imgList2" />
  </div>
</template>
<script setup>
import { getImgUrl } from "@/utils/tools.js"
import GzkImg from "./ZYgzkImg.vue"
import { ref, onMounted, getCurrentInstance } 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)
const gzkShow2 = ref(false)
import { getApi, postApi } from "@/api/tobAcco_api.js"
const { proxy } = getCurrentInstance()
const { D_TB_ZYJK_WHYS } = proxy.$dict("D_TB_ZYJK_WHYS")
const props = defineProps({
  obj: {
    default: {},
    tyte: Object
  },
  type: {
    default: "",
    tyte: String
  },
  showCount: {
    type: Boolean,
    default: false
  },
  cardtype: "",
  isEdit: false,
  ditData: Object
})
const imgList = ref([])
const imgList2 = ref([])
const isType = ref("1")
const getLabels = keys => {
  if (!keys) return
  let res = []
  keys.forEach(key => {
    D_TB_ZYJK_WHYS.value.forEach(item => {
      if (item.value == key) {
        res.push(item.label)
      }
    })
  })

  return res.toString()
}
onMounted(() => {
  if (props.obj) {
    getfromobj()
  }
})
function getfromobj() {
  fromObj.value.orgname = props.obj.orgname
  getApi({ occupationalhazardId: props.obj.id }, "/mosty-jcgl/occupationalSiteInform/detail").then(res => {
    if (res) {
      fromObj.value = res
      if (res.img) {
        imgList.value = res.img.split(",")
      }
      if (res.protectiveImg) {
        imgList2.value = res.protectiveImg.split(",")
      }
    }
  })
}

// 下载告知卡
function onloadqdImg() {
  Html2canvasImg("gzk", "《" + fromObj.value.riskname + "》风险告知卡")
}
// 关闭告知卡图片选择
const closeGzkImg = val => {
  gzkShow.value = false

  if (isType.value === "1") imgList.value = val
  if (isType.value === "2") imgList2.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 (imgList.value) {
    fromObj.value.img = imgList.value.toString()
  }
  if (imgList2.value) {
    fromObj.value.protectiveImg = imgList2.value.toString()
  }
  if (fromObj.value.id) {
    postApi(fromObj.value, "/mosty-jcgl/occupationalSiteInform/update").then(() => {
      ElMessage.success("保存成功")
    })
    getfromobj()
  } else {
    fromObj.value.occupationalhazardId = props.obj.id
    postApi(fromObj.value, "/mosty-jcgl/occupationalSiteInform/add").then(() => {
      ElMessage.success("保存成功")
    })
    getfromobj()
  }

  return
  // 验证手机号
  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 = (type = "1") => {
  // getfromobj()
  gzkShow.value = true
  isType.value = type
}
</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: 0 30px;
}

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

.yellow {
  background-color: yellow;
}

.red {
  background-color: #e80016;
  color: #fff;
}

.blue {
  background-color: #1f2387;
  color: #fff;
}

.fontpe {
  background-color: #d0ddf9;
}

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

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

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