<template>
  <div class="bigBox">
    <MOSTY.FromPage :title="props.formData.title" @closeDialog="closeDialog">
      <template #content>
        <el-form ref="ruleFormRef" label-width="160px" :model="fromData" :rules="rules" :disabled="true">
          <!-- 报告单位 -->
          <el-form-item label="报告单位:" prop="reportUnit">
            <el-input v-model="formData.reportUnit" placeholder="请输入报告单位" style="width: 100%;" />
          </el-form-item>

          <!-- 报告名称 -->
          <el-form-item label="报告名称:" prop="reportName">
            <el-input v-model="formData.reportName" placeholder="请输入报告名称" style="width: 100%;" />
          </el-form-item>

          <!-- 报告人员 -->
          <el-form-item label="报告人员:" prop="reporter">
            <el-input v-model="formData.reporter" placeholder="请输入报告人员" style="width: 100%;" />
          </el-form-item>

          <!-- 报告时间 -->
          <el-form-item label="报告时间:" prop="reportTime">
            <el-date-picker v-model="formData.reportTime" type="datetime" placeholder="请选择报告时间" style="width: 100%;" />
          </el-form-item>

          <!-- 二级风险单元 -->
          <el-form-item label="二级风险单元:" prop="secondLevelUnit">
            <el-input v-model="formData.secondLevelUnit" placeholder="请输入二级风险单元" style="width: 100%;" />
          </el-form-item>

          <!-- 升降级的原因 -->
          <el-form-item label="升降级的原因:" prop="upgradeReason">
            <el-input v-model="formData.upgradeReason" placeholder="请输入升降级的原因" type="textarea" maxlength="500"
              style="width: 100%;" :rows="4" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button type="primary" @click="submit(ruleFormRef)" v-loading='saveloading'>
          <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 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({

})
// 修改验证规则
const rules = {
  reportUnit: [{
    required: true,
    message: "请输入报告单位",
    trigger: "blur"
  }],
  reportName: [{
    required: true,
    message: "请输入报告名称",
    trigger: "blur"
  }],
  reporter: [{
    required: true,
    message: "请输入报告人员",
    trigger: "blur"
  }],
  reportTime: [{
    required: true,
    message: "请选择报告时间",
    trigger: "change"
  }],
  secondLevelUnit: [{
    required: true,
    message: "请输入二级风险单元",
    trigger: "blur"
  }],
  upgradeReason: [{
    required: true,
    message: "请输入升降级的原因",
    trigger: "blur"
  }]
}

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
    }
  })
}
const black = () => {

  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;
}



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