<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box" >
      <span class="title">{{ title }}重点人管理</span>
      <div>
        <el-button
          type="primary"
          size="small"
          :loading="loading"
          @click="submit"
          v-if="title.value !== '详情'"
          >保存</el-button
        >
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="form_cnt">
      <FormMessage
        v-model="listQuery"
        :formList="formData"
        ref="elform"
        :rules="rules"
      >
      </FormMessage>
    </div>
  </div>
</template>

<script setup>
import MyTable from "@/components/aboutTable/MyTable.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import * as rule from "@/utils/rules.js";
import {
  ref,
  defineExpose,
  reactive,
  onMounted,
  defineEmits,
  getCurrentInstance,
  nextTick
} from "vue";
import { selectUserDeptPage } from "@/api/user-manage";
const emit = defineEmits(["updateDate"]);

const props = defineProps({
  dic: Object
});
const { proxy } = getCurrentInstance();

const { D_GS_RQFJ_LX } = proxy.$dict("D_GS_RQFJ_LX"); //获取字典数据
const tagDialog = ref();
const dialogForm = ref(false); //弹窗
const formData = ref([
  { label: "发掘类型", prop: "fjLx", type: "select", options: D_GS_RQFJ_LX },
  { label: "发掘文本", prop: "fjWb", type: "textarea", width: "100%" }
]);
const listQuery = ref({}); //表单
const loading = ref(false);
const elform = ref();
const title = ref("");
const editpeo = ref();

// 初始化数据
const init = (type, row) => {
  dialogForm.value = true;
  title.value = type == "add" ? "新增" : type == "info" ? "详情" : "编辑";
  // 初始化表单数据，并根据详情页设置禁用状态
  formData.value = [
    {
      label: "发掘类型",
      prop: "fjLx",
      type: "select",
      options: D_GS_RQFJ_LX,
      disabled: title.value === "详情"
    },
    {
      label: "发掘文本",
      prop: "fjWb",
      type: "textarea",
      width: "100%",
      disabled: title.value === "详情"
    }
  ];
  if (row) getDataById(row.id);
};
// 根据id查询详情
const getDataById = (id) => {
  qcckGet({}, "/mosty-gsxt/tbGsxtRqfjNr/" + id).then((res) => {
    listQuery.value = res;
  });
};

// 提交
const submit = () => {
  elform.value.submit((data) => {
    let url =
      title.value == "新增"
        ? "/mosty-gsxt/tbGsxtRqfjNr/save"
        : "/mosty-gsxt/tbGsxtRqfjNr/update";
    let params = { ...data };

    qcckPost(params, url)
      .then((res) => {
        proxy.$message({ type: "success", message: title.value + "成功" });
        emit("onSearch");
        close();
      })
      .catch(() => {});
  });
};

// 接收父组件传入的数据并回显
const setFormData = (data) => {
  listQuery.value = {
    ...data // 假设 data 包含所有需要的字段
  };
};
// 关闭
const close = () => {
  listQuery.value = {};
  dialogForm.value = false;
  loading.value = false;
};

// 2. 暴露获取数据的方法
const getFormData = () => {
  // 可以在这里添加验证逻辑
  return {
    formData: listQuery.value
  };
};
defineExpose({ init, setFormData });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  color: #0072ff;
  background: rgba(0, 114, 255, 0.3);
}
.boxlist {
  width: 99%;
  height: 225px;
  margin-top: 10px;
  overflow: hidden;
}
</style>
