<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="props.formData.title" @closeDialog="closeDialog">
      <template #content>
        <!-- 安全风险单元名称 -->
        <MOSTY.Assort :title="'安全风险单元名称'" />
        <el-form ref="ruleFormRef" label-width="160px" :model="fromData" :rules="rules" :disabled="true">
          <el-form-item label="类别:" prop="category">
            <el-input v-model="fromData.category" placeholder="请输入类别" style="width: 337px" clearable></el-input>
          </el-form-item>
          <el-form-item label="单位/部位/人员:" prop="unitPartPerson">
            <el-input v-model="fromData.unitPartPerson" placeholder="请输入单位/部位/人员" style="width: 337px"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="设备设施/场所/活动类型:" prop="facilityType">
            <el-input v-model="fromData.facilityType" placeholder="请输入设备设施/场所/活动类型" style="width: 337px"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="一级单元:" prop="firstLevelUnit">
            <el-input v-model="fromData.firstLevelUnit" placeholder="请输入一级单元" style="width: 337px" clearable></el-input>
          </el-form-item>
          <el-form-item label="二级风险单元:" prop="secondLevelUnit">
            <el-input v-model="fromData.secondLevelUnit" placeholder="请输入二级风险单元" style="width: 337px"
              clearable></el-input>
          </el-form-item>
        </el-form>

        <!-- 固有风险识别与评估 -->
        <MOSTY.Assort :title="'固有风险识别与评估'" />
        <el-form :disabled="true" ref="ruleFormRef2" label-width="160px" :model="fromData">
          <el-form-item label="风险严重程度(S):" prop="inherentSeverity">
            <el-input v-model="fromData.inherentSeverity" placeholder="请输入风险严重程度" style="width: 337px"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="风险等级:" prop="inherentRiskLevel">
            <el-select v-model="fromData.inherentRiskLevel" placeholder="请选择风险等级" style="width: 337px" clearable>
              <el-option label="重大风险" value="重大风险"></el-option>
              <el-option label="较大风险" value="较大风险"></el-option>
              <el-option label="一般风险" value="一般风险"></el-option>
              <el-option label="低风险" value="低风险"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="风险描述:" prop="inherentRiskDesc">
            <div style="width: 100%;">
              <el-input v-model="fromData.inherentRiskDesc" type="textarea" :rows="3" placeholder="请输入风险描述"
                style="width: 337px" clearable></el-input>
            </div>
          </el-form-item>
          <el-form-item label="可能产生的后果:" prop="inherentConsequence">
            <el-input v-model="fromData.inherentConsequence" type="textarea" :rows="3" placeholder="请输入可能产生的后果"
              style="width: 337px" clearable></el-input>
          </el-form-item>
        </el-form>
        <!-- 现状风险识别与评估 -->
        <MOSTY.Assort :title="'现状风险识别与评估'" />
        <el-form :disabled="true" class="mosty-from-wrap" ref="ruleFormRef3" label-width="160px" :model="fromData"
          :inline="true">
          <el-form-item label="可能性(L):" prop="possibility">
            <el-select v-model="fromData.possibility" placeholder="请选择可能性" style="width: 337px" clearable>
              <el-option label="5-很大" value="5"></el-option>
              <el-option label="4-大" value="4"></el-option>
              <el-option label="3-较大" value="3"></el-option>
              <el-option label="2-一般" value="2"></el-option>
              <el-option label="1-较小" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="风险严重程度(S):" prop="currentSeverity">
            <el-select v-model="fromData.currentSeverity" placeholder="请选择风险严重程度" style="width: 337px" clearable>
              <el-option label="5-特别重大" value="5"></el-option>
              <el-option label="4-重大" value="4"></el-option>
              <el-option label="3-较大" value="3"></el-option>
              <el-option label="2-一般" value="2"></el-option>
              <el-option label="1-较小" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="风险值(R):" prop="riskValue">
            <el-input v-model="fromData.riskValue" placeholder="请输入风险值" style="width: 337px" clearable></el-input>
          </el-form-item>
          <el-form-item label="现有风险等级:" prop="currentRiskLevel">
            <el-select v-model="fromData.currentRiskLevel" placeholder="请选择现有风险等级" style="width: 337px" clearable>
              <el-option label="重大风险" value="重大风险"></el-option>
              <el-option label="较大风险" value="较大风险"></el-option>
              <el-option label="一般风险" value="一般风险"></el-option>
              <el-option label="低风险" value="低风险"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="现有控制措施:" prop="currentControlMeasures">
            <el-input v-model="fromData.currentControlMeasures" type="textarea" :rows="3" placeholder="请输入现有控制措施"
              style="width: 337px" clearable></el-input>
          </el-form-item>
          <el-form-item label="可能存在的风险隐患:" prop="riskHiddenDanger">
            <el-input v-model="fromData.riskHiddenDanger" type="textarea" :rows="3" placeholder="请输入可能存在的风险隐患"
              style="width: 337px" clearable></el-input>
          </el-form-item>

        </el-form>

        <!-- 风险分级管控措施策划 -->
        <MOSTY.Assort :title="'风险分级管控措施策划'" />
        <el-form :disabled="true" class="mosty-from-wrap" ref="ruleFormRef4" label-width="160px" :model="fromData"
          :inline="true">

          <el-form-item label="风险管控等级:" prop="controlLevel">
            <el-select v-model="fromData.controlLevel" placeholder="请选择风险管控等级" style="width: 337px" clearable>
              <el-option label="公司级" value="公司级"></el-option>
              <el-option label="部门级" value="部门级"></el-option>
              <el-option label="车间级" value="车间级"></el-option>
              <el-option label="班组级" value="班组级"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计划完成时间:" prop="planCompleteTime">
            <el-date-picker v-model="fromData.planCompleteTime" type="date" placeholder="请选择计划完成时间" style="width: 337px"
              clearable />
          </el-form-item>
          <el-form-item label="是否保持原措施:" prop="keepOriginalMeasures">
            <el-radio-group v-model="fromData.keepOriginalMeasures">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="新增措施类型:" prop="newMeasureType">
            <el-input v-model="fromData.newMeasureType" placeholder="请输入新增措施类型" style="width: 337px"
              clearable></el-input>
          </el-form-item>
          <el-form-item label="新增措施内容:" prop="newMeasureContent">
            <el-input v-model="fromData.newMeasureContent" type="textarea" :rows="3" placeholder="请输入新增措施内容"
              style="width: 337px" clearable></el-input>
          </el-form-item>
          <el-form-item label="风险动态监测情况:" prop="riskMonitoring">
            <el-input v-model="fromData.riskMonitoring" type="textarea" :rows="3" placeholder="请输入风险动态监测情况"
              style="width: 337px" clearable></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button type="primary" @click="submit(ruleFormRef)" v-loading='saveloading'
          v-if="props.formData.saveBtnShow">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          保存
        </el-button>
        <el-button @click="black">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          关闭
        </el-button>
      </template>
    </MOSTY.FromPage>
  </div>
</template>
<script setup>
import {
  ref,
  getCurrentInstance,
  onMounted
} from "vue"
import * as MOSTY from "@/components/MyComponents/index"
import { ElMessage } from "element-plus"
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js"
const { proxy } = getCurrentInstance()
const {
  D_TB_AQBS_LX,
  D_BZ_SYZT
} = proxy.$dict("D_TB_AQBS_LX", "D_BZ_SYZT")
const rules = {
  sitename: [{
    required: true,
    message: "请选择场所名称",
    trigger: "blur"
  }],
}
const saveloading = ref(false)
const props = defineProps({
  formData: {
    type: Object,
    default: {}
  },
  type: {
    default: "",
    type: String
  }
})
const emit = defineEmits("changePage", 'createPage')
const ruleFormRef = ref()
const fromData = ref({
  state: "01"
})

onMounted(() => {
  if (props.formData.id) {
    getmain(props.formData.id)
  }
})
// 保存
const submit = async (ruleFormRef) => {
  saveloading.value = true
  if (!ruleFormRef) return
  await ruleFormRef.validate((valid) => {
    if (valid) {
      ruleFormRef2.value.validate((valid) => {
        if (valid) {
          fromData.value.file = fromData.value.file ? fromData.value.file.toString() : null
          if (fromData.value) {
            if (!fromData.value.id) {
              postApi(fromData.value, "/mosty-jcgl/sitelogo/addTbSitelogoOne")
                .then((res) => {
                  ElMessage.success("新增成功")
                  emit("createPage", res)
                }).finally(() => {
                  saveloading.value = false
                })
            } else {
              postApi(fromData.value, "/mosty-jcgl/sitelogo/updateTbSitelogoOne")
                .then((res) => {
                  ElMessage.success("修改成功")
                  emit("changePage")
                }).finally(() => {
                  saveloading.value = false
                })
            }

          }
        } else {

          ElMessage.error("请输入必填项!")
          saveloading.value = false
        }
      })
    } else {

      ElMessage.error("请输入必填项!")
      saveloading.value = false
    }
  })
}

//获取详情
function getmain (id) {
  if (id) {
    getApi({ id: id }, "/mosty-jcgl/sitelogo/queryTbSitelogoById").then((res) => {
      if (res) {
        res.responsibleusername = res.responsibleusername ? res.responsibleusername.replace(/（null）/g, "") : ""
        fromData.value = res
        fromData.value.saveBtnShow = props.formData.saveBtnShow
        getlcxq(fromData.value.buildingid)
        initCsJzwLcBW(res)
        // if (props.formData.type == "cs") {
        //   getjzwlist(res.siteid)
        // } else if (props.formData.type == "lc") {
        //   getbwdata(res.floorid)
        // } else if (["aqbs"].includes(addtype.value)) {
        //   getcsData()

        // }

        if (res.partid) {
          getApi({ id: res.partid }, "/mosty-jcgl/part/queryScenePartById").then(res => {
            if (res) {
              fromData.value.partname = res.partname ? res.partname : res.qtmc
            }
          })
        }

      }
    })
  }
}


const black = () => {
  // if (props.formData.saveBtnShow) {
  //   proxy.$modal.confirm("离开会丢失页面中修改的内容，确认离开吗？")
  //     .then(() => {
  //       ruleFormRef.value.clearValidate()
  //       emit("changePage")
  //     })
  //     .catch(() => {
  //       // catch error
  //     })
  // } else {
  //   // 关闭上一次的表单校验
  //   ruleFormRef.value.clearValidate()

  // }
  emit("close")
}

function closeDialog () {
  // 关闭上一次的表单校验
  ruleFormRef.value.clearValidate()
  emit("changePage")
}


</script>

<style lang="scss" scoped>
.table-lable {
  margin: 10px;
  color: var(--el-color-primary);
}

::v-deep ::-webkit-scrollbar {
  display: none !important;
}

::v-deep .el-pagination {
  justify-content: center !important;
}

:deep(.mosty-from-wrap) {
  margin: 5px 10px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

::v-deep .el-form {
  margin: 5px 10px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

:deep(.el-form-item) {
  margin-right: 1cap;
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}


::v-deep .el-upload-list {
  width: 50%;
}

::v-deep .el-form-item__content {
  margin-left: 0px !important;
}
</style>
