<template>
  <div>
    <div class="card content-box">
      <div class="name">{{ supertype }}</div>
      <el-divider />
      <div class="user_box">
        <div class="user_left">
          <el-form ref="formRef" :model="numberValidateForm" label-width="auto" class="demo-ruleForm">
            <div class="elform">
              <el-form-item label="岗位名称：" prop="postName" :rules="[{ required: true, message: '请输入岗位名称' }]">
                <el-input
                  v-model.number="numberValidateForm.postName"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入岗位名称"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item label="岗位编码：">
                <el-input
                  v-model.number="numberValidateForm.postCode"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入岗位编码"
                  autocomplete="off"
                />
              </el-form-item>
            </div>
            <div class="elform">
              <el-form-item label="显示排序：" prop="postSort" :rules="[{ required: true, message: '请输入显示排序' }]">
                <el-input
                  v-model.number="numberValidateForm.postSort"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入显示排序"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item label="备注：">
                <el-input
                  v-model.number="numberValidateForm.remark"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入备注"
                  autocomplete="off"
                />
              </el-form-item>
            </div>

            <div class="elform">
              <el-form-item label="岗位状态：">
                <el-radio-group v-model="numberValidateForm.status">
                  <el-radio value="0">正常</el-radio>
                  <el-radio value="1">停用</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <el-divider />
            <el-form-item class="bottom">
              <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
              <el-button @click="resetForm(formRef)">关闭</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { platformpostadd, platformpostedit, platformshupostedit } from "@/api/home/Multisite";
import { FormInstance } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const formRef = ref<FormInstance>();
const supertype = ref(route.query.type);

const numberValidateForm = reactive({
  id: route.query.id,
  parentId: "",
  postName: "",
  postCode: "",
  postSort: "",
  remark: "",
  status: "0"
});

// const submitForm = (formEl: FormInstance | undefined) => {
//   if (!formEl) return;
//   formEl.validate(async valid => {
//     if (valid) {
//       if (route.query.type == "岗位新增") {
//         const { data } = await platformpostadd(numberValidateForm);
//         console.log(data);
//       } else {
//         const { data } = await platformpostedit(numberValidateForm);
//         console.log(data);
//       }
//       router.back();
//     } else {
//       console.log("error submit!");
//       return false;
//     }
//   });
// };

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;

  try {
    const valid = await formEl.validate();

    if (valid) {
      let responseData;

      if (route.query.type === "岗位新增") {
        responseData = await platformpostadd(numberValidateForm);
      } else {
        responseData = await platformpostedit(numberValidateForm);
      }

      console.log(responseData.data);
      router.back(); // Navigate back after success
    } else {
      console.log("Validation failed!");
    }
  } catch (error) {
    console.error("Submission error:", error);
  }
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  router.push("/post/index");
};
const yonghueditdata = ref();
const getghuedit = async () => {
  const { data } = await platformshupostedit(route.query.id);
  yonghueditdata.value = data;
  console.log(yonghueditdata.value);
  numberValidateForm.postName = yonghueditdata.value.post.postName;
  numberValidateForm.postCode = yonghueditdata.value.post.postCode;
  numberValidateForm.postSort = yonghueditdata.value.post.postSort;
  numberValidateForm.remark = yonghueditdata.value.post.remark;
  numberValidateForm.status = yonghueditdata.value.post.status;
};
onMounted(() => {
  if (route.query.type == "岗位编辑") {
    getghuedit();
  }
});
</script>
<style scoped lang="scss">
@import "./addition.scss";
</style>
