import { ElForm, FormRules } from "element-plus";
import { reactive, ref, watch } from "vue";
import { AuditProps } from "../types";

type Config = {
  failStatus: string;
  successStatus: string;
  callback: () => void;
};

export function useAudit(
  props: AuditProps,
  { failStatus, successStatus, callback }: Config
) {
  const formRef = ref<InstanceType<typeof ElForm>>(null);

  let status = "";
  const remark = props.detail ? props.detail.remark : "";

  if (props.detail) {
    const _status = Number(props.detail.status);

    if (_status !== Number(successStatus) && _status !== Number(failStatus))
      status = successStatus;
    else status = String(_status);
  }

  const formData = reactive({
    status,
    remark
  });

  const rules = reactive<FormRules>({
    status: [{ required: true, trigger: "change", message: "请选择审核状态" }],
    remark: [{ required: false, trigger: "change", message: "请选择审核状态" }]
  });

  function handleAudit() {
    formRef.value.validate(isValid => {
      if (isValid) callback();
    });
  }

  watch(
    () => formData,
    () => {
      console.log(formData.status === failStatus);
      rules.remark[0].required = formData.status === failStatus;
    },
    {
      deep: true
    }
  );

  return {
    rules,
    formRef,
    formData,
    handleAudit
  };
}