<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="jobName" :rules="[{ required: true, message: '请输入任务名称：' }]">
                <el-input
                  v-model.number="numberValidateForm.jobName"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入任务名称："
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item label="任务分组：">
                <el-select v-model="numberValidateForm.jobGroup" placeholder="请选择分组" size="large" style="width: 300px">
                  <el-option v-for="item in groupingdata" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </div>
            <div class="elform">
              <el-form-item
                label="调用目标字符串："
                prop="invokeTarget"
                :rules="[{ required: true, message: '请输入调用目标字符串' }]"
              >
                <el-input
                  v-model="numberValidateForm.invokeTarget"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入调用目标字符串"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item label="cron表达式：" prop="cronExpression" :rules="[{ required: true, message: '请输入cron表达式' }]">
                <el-input
                  v-model="numberValidateForm.cronExpression"
                  style="width: 300px"
                  size="large"
                  type="text"
                  placeholder="请输入cron表达式"
                  autocomplete="off"
                  @blur="onron"
                />
              </el-form-item>
            </div>

            <div class="elform">
              <el-form-item label="执行策略：">
                <el-radio-group v-model="numberValidateForm.misfirePolicy">
                  <el-radio value="0">立即执行</el-radio>
                  <el-radio value="1">执行一次</el-radio>
                  <el-radio value="3">放弃执行</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="elform">
              <el-form-item label="并发执行：">
                <el-radio-group v-model="numberValidateForm.concurrent">
                  <el-radio value="0">允许</el-radio>
                  <el-radio value="1">禁止</el-radio>
                </el-radio-group>
              </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>
            <div class="elform">
              <el-form-item label="备注：">
                <el-input
                  v-model.number="numberValidateForm.remark"
                  style="width: 600px"
                  size="large"
                  type="text"
                  placeholder="请输入备注"
                  autocomplete="off"
                />
              </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 { monitorjobadd, monitorjobedit, jobeditupdate, checkCronExpressionIsValid } from "@/api/home/Multisite";
import { ElMessage, 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,
  jobName: "",
  jobGroup: "",
  invokeTarget: "",
  cronExpression: "",
  concurrent: "0",
  misfirePolicy: "0",
  status: "0",
  remark: ""
});
const groupingdata = ref([
  {
    value: "",
    label: "全部"
  },
  {
    value: "DEFAULT",
    label: "默认"
  },
  {
    value: "SYSTEM",
    label: "系统"
  }
]);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;

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

    if (valid) {
      if (!ExpressionIsValid.value) {
        ElMessage.error("表达式不正确");
        return false;
      }

      let responseData;

      if (route.query.type === "任务新增") {
        responseData = await monitorjobadd(numberValidateForm);
      } else {
        responseData = await monitorjobedit(numberValidateForm);
      }

      console.log(responseData.data);
      ElMessage.success("操作成功"); // Provide success feedback
      router.back(); // Navigate back after success
    } else {
      console.log("Validation failed!");
    }
  } catch (error) {
    console.error("Submission error:", error);
    ElMessage.error("提交失败，请重试！"); // Optional error feedback
  }
};
const ExpressionIsValid = ref();

const onron = async () => {
  let obj = {
    cronExpression: numberValidateForm.cronExpression
  };
  const data = await checkCronExpressionIsValid(obj);
  // 这里可以使用正则表达式或其他逻辑验证cron表达式
  ExpressionIsValid.value = data;
  if (!data) {
    ElMessage.error("表达式不正确");
    return;
  }
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  router.push("/monitor/job");
};
const yonghueditdata = ref();
const getghuedit = async () => {
  const { data } = await jobeditupdate(route.query.id);
  yonghueditdata.value = data;
  console.log(yonghueditdata.value);
  numberValidateForm.jobName = yonghueditdata.value.job.jobName;
  numberValidateForm.jobGroup = yonghueditdata.value.job.jobGroup;
  numberValidateForm.invokeTarget = yonghueditdata.value.job.invokeTarget;
  numberValidateForm.cronExpression = yonghueditdata.value.job.cronExpression;
  numberValidateForm.status = yonghueditdata.value.job.status;
  numberValidateForm.misfirePolicy = yonghueditdata.value.job.misfirePolicy;
  numberValidateForm.concurrent = yonghueditdata.value.job.concurrent;
  numberValidateForm.remark = yonghueditdata.value.job.remark;
  onron();
};
onMounted(() => {
  if (route.query.type == "任务编辑") {
    getghuedit();
  }
});
</script>
<style scoped lang="scss">
@import "./add.scss";
</style>
