<!-- 语义审核 语义关联审核 -->
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isAudit ? '批量审核' : '审核'"
    :width="500"
    center
    align-center
    :close-on-click-modal="false"
    @closed="closed"
    destroy-on-close
  >
    <el-form :model="formData" ref="formRef" label-width="100px" :rules="formRules" class="mt20">
      <el-form-item v-if="isAudit">
        <el-icon color="red" size="24" class="mr10"><Warning /></el-icon>
        <div class="f18 fw500">请确认批量审核结果？</div>
      </el-form-item>
      <el-form-item v-else>
        <div class="f18 fw500">您正在审核{{ props.defaultPrompt }}“{{ title }}”</div>
      </el-form-item>
      <el-form-item label="结果" prop="auditStatus">
        <el-radio-group v-model="formData.auditStatus">
          <el-radio :value="AuditStatusEnum.APPROVED" border>通过{{ isAudit }}</el-radio>
          <el-radio :value="AuditStatusEnum.REJECTED" border>不通过</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="说明" prop="refuseReason">
        <el-input v-model="formData.refuseReason" type="textarea" rows="4" :maxlength="200"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" class="ml30" v-throttle="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, nextTick, reactive } from "vue";
import { FormInstance, FormRules, ElMessage } from "element-plus";
//* 接收注入
//props
const props = defineProps({
  defaultPrompt: {
    type: String,
    default: () => "语义类型"
  }
});
console.log("props", props);
const dialogVisible = ref(false);
//* data
//* ref
const title = ref<string>("");
const isAudit = ref(false);
const formRef = ref<FormInstance>();
const openPromise = ref<any>({});
const formData = reactive<FormData>(getFormDefaultValue());

interface FormData {
  [key: string]: any;
}
//* 方法

// 校验规则
let formRules: FormRules = {
  auditStatus: [
    {
      required: true,
      message: "请选择结果",
      trigger: "change"
    }
  ],
  refuseReason: [{ required: false, message: "退回原因不能为空", trigger: "blur" }]
};
enum AuditStatusEnum {
  APPROVED = 1, // 审核通过
  REJECTED = 2 // 审核不通过
}

function getFormDefaultValue() {
  return {
    articleIds: [] as number[],
    auditStatus: undefined, //  AuditStatusEnum.REJECTED,
    refuseReason: undefined
  };
}

function closed() {
  formData.value = getFormDefaultValue();
  nextTick(formRef.value?.clearValidate);
}
// 取消
function handleCancel() {
  dialogVisible.value = false;
}
//提交
function handleSubmit() {
  formRef.value?.validate(async valid => {
    if (!valid) return;
    // await xxx(formData.value);
    ElMessage.success("操作成功");
    openPromise.value.resolve();
    dialogVisible.value = false;
  });
}

function open(params?: FormData) {
  console.log("open-params", params);
  isAudit.value = !params?.semanticsName;
  title.value = params?.semanticsName;
  // config.value = Object.assign(config.value, otherConfig);
  // formData.value.articleIds = params.articleIds;
  dialogVisible.value = true;
  return new Promise(resolve => {
    openPromise.value.resolve = resolve;
  });
}
defineExpose({
  open
});
</script>
<style lang="scss" scoped></style>
