<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">发起布控</span>
      <div>
        <el-button size="small" @click="submit">保存</el-button>

        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="cntinfo">
      <div class="title-item">布控信息</div>
      <ControlInfo ref="controlInfoRef" />
      <div class="title-item">布控范围</div>
      <ControlArea ref="controlAreaRef" />
      <div class="title-item">审批信息</div>
      <ApprovalInfo ref="approvalInfoRef" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import ControlInfo from "./ui/controlInfo.vue";
import ControlArea from "./ui/controlArea.vue";
import ApprovalInfo from "./ui/approvalInfo.vue";
import { qcckPost } from "@/api/qcckApi.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const dialogForm = ref(false);

const router = useRouter();
const listQuery = ref({});

// 获取子组件引用
const controlInfoRef = ref(null);
const controlAreaRef = ref(null);
const approvalInfoRef = ref(null);

// 初始化数据
const init = async (type, row) => {
  dialogForm.value = true;
  await nextTick(); // 等待子组件挂载
  // 根据type和row初始化表单数据
  // 如果是编辑模式，将数据传递给子组件
  if (type === "edit" && row) {
    controlInfoRef.value?.setFormData?.(row); // 回显布控信息
    controlAreaRef.value?.setFormData?.(row); // 回显布控范围
    approvalInfoRef.value?.setFormData?.(row); // 回显审批信息
  } else {
    // 如果是新增模式，清空表单（可选）
    controlInfoRef.value?.resetForm?.();
    controlAreaRef.value?.resetForm?.();
    approvalInfoRef.value?.resetForm?.();
  }
};

const cleanObj = (obj) => {
  if (!obj) return {};
  return Object.fromEntries(
    Object.entries(obj).filter(([_, v]) => v !== null && v !== undefined)
  );
};
const submit = async () => {
  try {
  
    // 1. 分别获取各子组件数据
    const controlInfoData = controlInfoRef.value?.getFormData?.();
    const controlAreaData = controlAreaRef.value?.getFormData?.();
    const approvalInfoData = approvalInfoRef.value?.getFormData?.();
    // 2. 合并数据
    const formData = {
      ...cleanObj(controlInfoData?.formData),
      ...cleanObj(controlAreaData?.formData),
      ...cleanObj(approvalInfoData?.formData)
    };
    // 根据是否有 id 判断是新增还是编辑
    const url = formData.id
      ? "/mosty-gsxt/tbGsxtBk/update" // 编辑接口
      : "/mosty-gsxt/tbGsxtBk/save"; // 新增接口
    // 提交数据
    await qcckPost(formData, url);
    ElMessage.success(formData.id ? "编辑成功" : "新增成功");
    close();
    // 触发父组件方法
    if (window.parent.updateList) {
      window.parent.getList(); // 调用父组件方法
    }
    router.push("@/views/backOfficeSystem/IntelligentControl/myControl/index");
    // qcckPost(formData, "/mosty-gsxt/tbGsxtBk/save").then((res) => {
    //   router.push(
    //     "@/views/backOfficeSystem/IntelligentControl/myControl/index"
    //   );
    // });
  } catch (error) {
    console.error("提交失败:", error);
    ElMessage.error(error.message || "提交失败");
  }
};
const close = () => {
  dialogForm.value = false;
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
.dialog {
  padding: 20px;

  .cntinfo {
    color: #000;
    height: calc(100% - 70px);
    overflow: hidden;
    overflow-y: auto;
    .title-item {
      font-size: 20px;

      font-weight: 700;
      margin-bottom: 20px;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: 2px;
        left: 0;
        width: 78px;
        height: 4px;
        background: linear-gradient(
          90deg,
          #3597f9c4 0%,
          rgba(53, 150, 249, 0) 100%
        );
        border-radius: 4px 4px 4px 4px;
      }
    }
  }
}
</style>
