<template>
  <el-dialog :title="title" v-model="show" width="500px" append-to-body>
    <el-form ref="roleRef" :model="form" :rules="rule" label-width="100px">
      <el-form-item label="任务标题" prop="roleName">
        <el-input v-model="form.roleName" placeholder="请输入任务标题" />
      </el-form-item>
      <el-form-item label="任务类型" prop="roleSort">
        <el-select placeholder="请选择任务类型">
          <el-option
            v-for="dict in task_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="执行周期">
        <el-select placeholder="请选择执行周期">
          <el-option
            v-for="dict in task_period_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
	    <el-form-item label="执行日期">
		    <el-date-picker
				    type="daterange"
				    range-separator="至"
				    start-placeholder="请选择开始日期"
				    end-placeholder="请选择结束日期"
		    />
	    </el-form-item>
      <el-form-item label="任务内容">
        <el-input
          type="textarea"
          :autosize="{
            minRows: 2,
          }"
          placeholder="请输入任务内容"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
const title = ref("");
const show = ref(false);
const form = ref({});
const rule = ref({});
const { proxy } = getCurrentInstance();

const { task_period_type, task_type } = proxy.useDict(
  "task_period_type",
  "task_type",
);

/** 提交按钮 */
function submitForm() {
  proxy.$refs["roleRef"].validate((valid) => {
    if (valid) {
      if (form.value.roleId != undefined) {
        form.value.menuIds = getMenuAllCheckedKeys();
        updateRole(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        form.value.menuIds = getMenuAllCheckedKeys();
        addRole(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 取消按钮 */
function cancel() {
  show.value = false;
  reset();
}

/** 重置新增的表单以及其他数据  */
function reset() {
  form.value = {
    roleId: undefined,
    roleName: undefined,
    roleKey: undefined,
    roleSort: 0,
    status: "0",
    menuIds: [],
    deptIds: [],
    menuCheckStrictly: true,
    deptCheckStrictly: true,
    remark: undefined,
  };
  proxy.resetForm("roleRef");
}

function open(param) {
  title.value = param.title;
  show.value = true;
}

defineExpose({ open });
</script>
<style scoped lang="scss"></style>
