<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">布控详情</span>
      <div>
        <el-button
          size="small"
          type="primary"
          @click="autoClick"
          v-if="typetext == 'auto'"
          >审核</el-button
        >
        <el-button
          size="small"
          @click="autoClick"
          type="primary"
          v-if="typetext == 'approval'"
          >审批</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>

    <el-dialog v-model="dialogVisible" title="审核" width="500px">
      <FormMessage v-model="listQuery" :formList="formData" ref="elform">
        <!-- 自定义原因字段渲染 -->
        <template #bkshBtgyy>
          <el-form-item
            label="原因"
            prop="bkshBtgyy"
            v-if="listQuery.sftg === '0'"
          >
            <el-input
              type="textarea"
              v-model="listQuery.bkshBtgyy"
              placeholder="请输入不通过原因"
            />
          </el-form-item>
          <div v-else></div>
        </template>
      </FormMessage>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleClose"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, getCurrentInstance, watch } 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";
import { info } from "sass";
import FormMessage from "@/components/aboutTable/FormMessage.vue";

const { proxy } = getCurrentInstance();
const { D_BZ_SF } = proxy.$dict("D_BZ_SF"); //获取字典数据

const listQuery = ref({}); //表单

const dialogForm = ref(false);

const router = useRouter();
const dialogVisible = ref(false);
// 获取子组件引用
const controlInfoRef = ref(null);
const controlAreaRef = ref(null);
const approvalInfoRef = ref(null);
const infoData = ref({});
const typetext = ref("");

const formData = ref([
  {
    label: "是否通过",
    prop: "sftg",
    type: "radio",
    options: D_BZ_SF
  },
  {
    label: "",
    prop: "bkshBtgyy",
    type: "slot"
  }
]);
// 初始化数据
const init = async (type, row) => {
  listQuery.value = {
    ...listQuery.value, // 保留原有值
    ...row,
    sftg: "0" // 设置新值
  };
  typetext.value = type;
  dialogForm.value = true;
  await nextTick(); // 等待子组件挂载
  controlInfoRef.value?.setFormData?.(row); // 回显布控信息
  controlAreaRef.value?.setFormData?.(row); // 回显布控范围
  approvalInfoRef.value?.setFormData?.(row); // 回显审批信息
};

const autoClick = () => {
  dialogVisible.value = true;
};

// 提交审核/审批
const handleClose = async () => {
  try {
    const data = {
      id: listQuery.value.id, // 主键id (required)
      sftg: listQuery.value.sftg // 是否通过 (required)
    };

    // 如果不通过，添加原因
    if (data.sftg !== "1") {
      data.bkshBtgyy = listQuery.value.bkshBtgyy; // 不通过原因
    }

    // 根据 typetext.value 决定调用哪个接口
    const apiUrl =
      typetext.value === "auto"
        ? "/mosty-gsxt/tbGsxtBk/toExamine" // 审核接口
        : "/mosty-gsxt/tbGsxtBk/audits"; // 审批接口

    // 调用接口
    const res = await qcckPost(data, apiUrl);
    if (res) {
      ElMessage.success(typetext.value === "auto" ? "审核成功" : "审批成功");
      dialogVisible.value = false;
      router.push({ name: "myControl" });
    } else {
      ElMessage.error(
        res.message || (typetext.value === "auto" ? "审核失败" : "审批失败")
      );
    }
  } catch (error) {
    console.error(typetext.value === "auto" ? "审核出错:" : "审批出错:", error);
    ElMessage.error("请求过程中发生错误");
  }
};

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>
