<template>
  <el-dialog v-model="visible" width="70%" :show-close="false" :lock-scroll="false" @close="closeDialog">
    <el-form ref="dataForm" :model="form" :rules="rules" label-position="right" label-width="30%" style="width: 90%">
      <el-row>
        <el-col :span="24" class="entercol">
          <span>基础配置</span>
          <el-divider></el-divider>
        </el-col>
        <el-col :span="12" class="entercol">
          <el-form-item label="执行器:" prop="jobGroup" label-width="30%" class="enterlabel">
            <el-select v-model="form.jobGroup">
              <el-option v-for="item in jobGroupArray" :key="item.id" :label="item.title" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="entercol">
          <el-form-item label="任务描述:" prop="jobDesc" label-width="30%" class="enterlabel">
            <el-input v-model="form.jobDesc" class="enterinput"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="entercol">
          <el-form-item label="负责人:" prop="author" label-width="30%" class="enterlabel">
            <el-input v-model="form.author" class="enterinput"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="entercol">
          <el-form-item label="报警邮件:" prop="alarmEmail" label-width="30%" class="enterlabel">
            <el-input v-model="form.alarmEmail" class="enterinput"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="entercol">
          <span>调度配置</span>
          <el-divider></el-divider>
        </el-col>
        <el-col :span="12" class="entercol">
          <el-form-item label="调度类型:" prop="scheduleType" label-width="30%" class="enterlabel">
            <el-select v-model="form.scheduleType" @change="chooseType">
              <el-option v-for="item in job_schedule_type" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col v-if="showCron" :span="12" class="entercol">
          <el-form-item label="Cron:" prop="scheduleConf" label-width="30%" class="enterlabel">
            <el-input v-model="form.scheduleConf" style="width: 80%" placeholder="cron表达式..."></el-input>
            <el-popover placement="bottom" width="720" trigger="click">
              <cron v-if="showCronBox" v-model="form.scheduleConf"></cron>
              <template #reference>
                <el-button v-if="!showCronBox" icon="el-icon-arrow-up" title="打开" @click="showCronBox = true"></el-button>
                <el-button v-else icon="el-icon-arrow-down" title="关闭"></el-button>
              </template>
            </el-popover>
          </el-form-item>
        </el-col>

        <el-col v-if="showFixRate" :span="12" class="entercol">
          <el-form-item label="固定速度:" prop="scheduleConf" label-width="30%" class="enterlabel">
            <el-input v-model="form.scheduleConf" class="enterinput"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="entercol">
          <span>任务配置</span>
          <el-divider></el-divider>
        </el-col>
        <el-col :span="12" class="entercol">
          <el-form-item label="运行类型:" prop="glueType" label-width="30%" class="enterlabel">
            <el-select v-model="form.glueType" @change="chooseGlueType">
              <el-option v-for="item in job_glue_type" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="entercol">
          <el-form-item label="jobHandler:" prop="executorHandler" label-width="30%" class="enterlabel">
            <el-input v-if="isBean" v-model="form.executorHandler" class="enterinput"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="entercol">
          <el-form-item label="任务参数:" prop="executorParam" label-width="15%" class="enterlabel">
            <el-input v-model="form.executorParam" type="textarea" :rows="2" class="enterinput"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="entercol">
          <span>高级配置</span>
          <el-divider></el-divider>
        </el-col>
        <el-col :span="12" class="entercol">
          <el-form-item label="路由策略:" prop="executorRouteStrategy" label-width="30%" class="enterlabel">
            <el-select v-model="form.executorRouteStrategy">
              <el-option v-for="item in job_executor_route" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="entercol">
          <el-form-item label="子任务ID:" prop="childJobid" label-width="30%" class="enterlabel">
            <el-input v-model="form.childJobid" class="enterinput"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="entercol">
          <el-form-item label="调度过期策略:" prop="misfireStrategy" label-width="30%" class="enterlabel">
            <el-select v-model="form.misfireStrategy" >
              <el-option v-for="item in job_misfire_strategy" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="entercol">
          <el-form-item label="阻塞处理策略:" prop="executorBlockStrategy" label-width="30%" class="enterlabel">
            <el-select v-model="form.executorBlockStrategy">
              <el-option v-for="item in job_block_strategy" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="entercol">
          <el-form-item label="任务超时时间:" prop="executorTimeout" label-width="30%" class="enterlabel">
            <el-input v-model="form.executorTimeout"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="entercol">
          <el-form-item label="失败重试次数:" prop="executorFailRetryCount" label-width="30%" class="enterlabel">
            <el-input v-model="form.executorFailRetryCount" class="enterinput"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog"> 取消 </el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup="JobInfoModule" lang="ts">
import { addXxlJobInfo, getJobgroup, updateXxlJobInfo } from '@/api/xxljob/info';
const { proxy } = getCurrentInstance();


const { job_schedule_type } = toRefs<any>(proxy?.useDict('job_schedule_type'));
const { job_glue_type } = toRefs<any>(proxy?.useDict('job_glue_type'));
const { job_executor_route } = toRefs<any>(proxy?.useDict('job_executor_route'));
const { job_misfire_strategy } = toRefs<any>(proxy?.useDict('job_misfire_strategy'));
const { job_block_strategy } = toRefs<any>(proxy?.useDict('job_block_strategy'));


const visible = ref(false);
const rules = ref({});
const dataForm = ref<ElFormInstance>();
//数据字典？？？？
const jobGroupArray = ref([]);

const showCronBox = ref(false);
const isBean = ref(true);
const showFixRate = ref(false);
const showCron = ref(true);
const infoStatus = ref('');

const form = ref({
  jobGroup: '',
  jobDesc: '',
  author: '',
  alarmEmail: '',
  scheduleType: '',
  scheduleConf: '',
  glueType: '',
  executorHandler: '',
  executorParam: '',
  executorRouteStrategy: '',
  childJobid: '',
  misfireStrategy: '',
  executorBlockStrategy: '',
  executorTimeout: '',
  executorFailRetryCount: ''
});

const closeDialog = () => {
  dataForm.value?.resetFields();
  dataForm.value?.clearValidate();
  visible.value = false;
};

const show = (data, status) => {
  infoStatus.value = status;
  visible.value = true;
  getjobGroup();
  Object.assign(form.value, data);
};

const chooseGlueType = (newVal) => {
  if (newVal == 'BEAN') {
    isBean.value = false;
  }
};

const chooseType = (newVal) => {
  if (newVal == 'CRON') {
    showCron.value = true;
    showFixRate.value = false;
  } else if (newVal == 'FIX_RATE') {
    showCron.value = false;
    showFixRate.value = true;
  } else {
    showCron.value = false;
    showFixRate.value = false;
  }
  form.value.scheduleConf = '';
};

const getjobGroup = async () => {
  const res = await getJobgroup();
  jobGroupArray.value = res.data;
};

const submitForm = async () => {
  await dataForm.value?.validate(async (valid: boolean) => {
    if (valid) {
      let res;
      if (form.value.id) {
        res = await updateXxlJobInfo(form.value);
      } else {
        res = await addXxlJobInfo(form.value);
      }
      if (res.code == 200) {
        proxy?.$modal.msgSuccess('修改成功');
        closeDialog();
      }
    }
  });
};

defineExpose({
  show
});
</script>

<style scoped lang="scss"></style>
