<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="props.formData.title" @closeDialog="closeDialog">
      <template #content>
        <MOSTY.Assort :title="'风险单元基本信息'" />
        <el-form ref="ruleFormRef" label-width="160px" inline="true" :model="formData" :rules="rules" :disabled="true">
          <el-form-item label="风险单元名称:">
            <el-input v-model="formData.reportUnit" placeholder="" style="width: 260px;" />
          </el-form-item>
          <el-form-item label="一级单元类型:">
            <el-input v-model="formData.reportName" placeholder="" style="width: 260px;" />
          </el-form-item>
          <el-form-item label="二级单元类型:">
            <el-input v-model="formData.reporter" placeholder="" style="width: 260px;" />
          </el-form-item>
          <el-form-item label="风险等级:">
            <el-select v-model="formData.riskLevel" placeholder="" style="width: 260px;">
              <el-option v-for="item in D_BZ_FXDJS_XY" :key="item" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <MOSTY.Assort :title="'管控措施跟踪'" />
        <el-form ref="ruleFormRef2" label-width="160px" inline="true" :model="formData" :rules="rules2" :disabled="true">
          <el-form-item label="管控措施清单:">
            <el-input v-model="formData.controlMeasures" placeholder="" style="width: 260px;" />
          </el-form-item>
          <el-form-item label="责任部门:">
            <el-input v-model="formData.responsibleDept" placeholder="" style="width: 260px;" />
          </el-form-item>
          <el-form-item label="计划次数:">
            <el-input v-model="formData.implementationStatus" placeholder="" style="width: 260px;" />
          </el-form-item>
          <el-form-item label="实际次数:">
            <el-input v-model="formData.incompleteCount" placeholder="" style="width: 260px;" />
          </el-form-item>
          <el-form-item label="未完成次数:">
            <el-input v-model="formData.incompleteCount" placeholder="" style="width: 260px;" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="black">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          关闭
        </el-button>
      </template>
    </MOSTY.FromPage>
  </div>
</template>

<script setup>
import {
  ref,
  getCurrentInstance,
  onMounted,
  defineEmits,
  reactive,
  watch
} 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, D_BZ_FXDJS_XY } = proxy.$dict("D_TB_AQBS_LX", "D_BZ_SYZT", "D_BZ_FXDJS_XY")
const saveloading = ref(false)
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({})
  },
  type: {
    default: "",
    type: String
  }
})
const emit = defineEmits(["changePage", "createPage", "close"])

// 使用空对象初始化
const formData = reactive({})
// 获取详情数据
const getmain = async (id) => {
  if (!id) return

  try {
    // 根据实际 API 调整
    const res = await getApi(`/mosty-jcgl/sitelogo/getTbSitelogoOne?id=${id}`)
    if (res) {
      // Object.assign(formData, res.data)
      console.log('详情数据加载成功:', formData)
    }
  } catch (error) {
    console.error('获取详情失败:', error)

  }
}

onMounted(() => {
  console.log('组件挂载，初始化数据:', props.formData)
  Object.assign(formData, props.formData)
  // 如果需要根据 ID 获取详情
  if (props.formData.userid) {
    getmain(props.formData.userid)
  }
})
watch(() => props.formData, (newVal) => {
  if (newVal) {
    Object.assign(formData, newVal)
    console.log('props.formData变化:', newVal)
    if (newVal.userid) {
      getmain(newVal.userid)
    }
  }
})


const black = () => {
  emit("close")
}

function closeDialog () {
  ruleFormRef.value?.clearValidate()
  ruleFormRef2.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;
}



::v-deep .el-form {
  margin: 5px 10px;
  padding: 10px;

}

: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>
