// 表单的确认和取消
import { onActivated, onDeactivated, ref, watch } from 'vue';
import { useCloned } from '@vueuse/core';
import { useMessageBoxTip, useMessageBox } from './messageBox';

export function useFormConfirm({
  defaultForm = undefined,
  submit = {
    do: () => {}
  },
  cancel = {
    do: () => {}
  },
  reset = {
    do: () => {}
  }
}) {
  if (!submit.title) submit.title = '提交';
  if (!submit.msg) submit.msg = '确认是否提交？';
  if (!cancel.title) cancel.title = '取消';
  if (!cancel.msg) cancel.msg = '是否放弃已编辑的内容？';

  //表单内容
  let formObj = ref(defaultForm ? defaultForm : {});
  // let formObjClone = useCloned(formObj, { manual: true });
  //表单组件引用
  const formRef = ref(null);

  // 表单编辑状态
  const edit = ref(false);
  let isReset = false;
  const active = ref(true);

  // 若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用
  onActivated(() => {
    active.value = true;
  });
  // 若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用
  onDeactivated(() => {
    active.value = false;
  });

  // 当表单被取消激活后，清空表单数据
  watch(active, (nValue) => {
    if (!nValue) {
      clear();
    }
  });

  // 表单被修改过, 更新编辑状态
  watch(
    formObj,
    (nv, ov) => {
      if (!isReset && nv != ov) {
        // formObjClone = useCloned(formObj, { manual: true });
      }
      if (!isReset && nv === ov) {
        edit.value = true;
      }
      isReset = false;
    },
    { deep: true, immediate: false }
  );

  // 重置表单
  const _reset = function () {
    edit.value = false;
    isReset = true;
    // formObj.value = useCloned(formObjClone.cloned, {
    //   manual: true
    // }).cloned.value;
    formRef.value.clearValidate();
  };

  // 清空表单
  const clear = function () {
    edit.value = false;
    isReset = true;
    formRef.value.resetFields();
  };

  // 提交成功后
  const submited = function () {
    edit.value = false;
    // formObjClone = useCloned(formObj, { manual: true });
  };

  // 提交表单
  const onSubmit = function () {
    formRef.value.validate((valid) => {
      if (valid) {
        useMessageBoxTip({
          confirmMsg: submit.msg,
          confirmTitle: submit.title,
          onConfirm: async () => {
            await submit.do();
            submited();
            return;
          }
        });
      }
    });
  };

  // 取消提交
  const onCancel = function () {
    if (edit.value) {
      // 弹出确认框
      useMessageBox({
        confirmMsg: cancel.msg,
        confirmTitle: cancel.title,
        onConfirm: () => {
          clear();
          return cancel.do();
        }
      });
    } else {
      cancel.do();
    }
  };

  // 重置表单
  const onReset = function (tips) {
    if (edit.value) {
      if (tips) {
        // 弹出确认框
        useMessageBox({
          confirmMsg: '是否重置表单内容？',
          confirmTitle: '重置表单',
          onConfirm: () => {
            _reset();
            return reset.do();
          }
        });
      } else {
        _reset();
        reset.do();
      }
    } else {
      reset.do();
    }
  };

  return { formObj, formRef, edit, active, onSubmit, onCancel, onReset };
}