<template>
  <div class="inline">
    <a-button :type="info.style" @click="customClick()" class="m-2">
      <Icon :icon="info.icon" v-if="info.icon" />
      {{ t(info.name ?? info.label) }}
    </a-button>
    <TableCustomModal
      @register="registerModal"
      @confirm="
        () => {
          handleConfirm('confirm');
        }
      "
      @cancel="
        () => {
          handleConfirm('cancel');
        }
      "
      @open="
        () => {
          handleConfirm('open');
        }
      "
      @close="
        () => {
          handleConfirm('close');
        }
      "
    />
  </div>
</template>
<script lang="ts" setup>
  import { useI18n } from '/@/hooks/web/useI18n';
  import { executeCurFormEvent } from '/@/utils/event/data';
  import { Icon } from '/@/components/Icon';
  import { useModal } from '/@/components/Modal';
  import { CustomButtonModalType } from '/@/enums/userEnum';
  import TableCustomModal from './TableCustomModal.vue';
  import { useUserStore } from '/@/store/modules/user';
  import { defHttp } from '/@/utils/http/axios';
  import { regTestProps, requestProps } from '/@/components/Form/src/types/form';
  import { message, Modal, ModalFuncProps } from 'ant-design-vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  const userStore = useUserStore();
  import { createVNode, inject, ref, unref } from 'vue';
  import { ExecuteType } from '/@/enums/desktop';
  const { t } = useI18n();

  const props = defineProps({
    info: {
      type: Object,
      default: () => {
        return {
          code: '',
          name: '按钮',
          style: 'primary',
          event: [],
          modal: null,
          type: CustomButtonModalType.Modal,
        };
      },
    },
  });
  const [registerModal, { openModal }] = useModal();
  const isCamelCase = inject<boolean>('isCamelCase', false);
  const refreshFieldObj = inject('refreshFieldObj', ref<any>({}));
  function customClick() {
    let obj = {
      formApi,
    };
    const sightEvent = [
      {
        operateType: ExecuteType.JS,
        operateConfig: { js: `formActionType.openModal(curRowData)` },
      },
    ];
    executeCurFormEvent(sightEvent, {}, isCamelCase, obj);
  }
  const customOpenModal = (record) => {
    openModal(true, { isUpdate: true, record, modal: props.info.modal });
  };
  function handleConfirm(type) {
    let obj = {
      formApi,
    };
    executeCurFormEvent(
      [
        {
          operateType: ExecuteType.JS,
          operateConfig: { js: props.info.modal[type] },
        },
      ],
      {},
      isCamelCase,
      obj,
    );
  }

  const showMessage = (content: string) => {
    message.info(content);
  };
  const showModal = async (modal: ModalFuncProps) => {
    Modal.confirm({
      title: modal.title,
      icon: createVNode(ExclamationCircleOutlined),
      content: createVNode('div', { style: 'color:red;' }, modal.content),
      onOk: modal.onOk,
      onCancel: modal.onCancel,
      ...modal,
    });
  };
  const httpRequest = async (request: requestProps) => {
    if (request.requestType.toLowerCase() === 'get') {
      return defHttp[request.requestType](
        {
          url: request.requestUrl,
          params: request.params,
          ...request,
        },
        {
          errorMessageMode: request.errorMessageMode || 'none',
          ...request,
        },
      );
    } else {
      return defHttp[request.requestType](
        {
          url: request.requestUrl,
          data: request.params,
          ...request,
        },
        {
          errorMessageMode: request.errorMessageMode || 'none',
          ...request,
        },
      );
    }
  };
  const refreshAPI = (field: string) => {
    if (!field) return;

    if (!Object.keys(unref(refreshFieldObj)).includes(field)) {
      unref(refreshFieldObj)[field] = 0;
    }
    unref(refreshFieldObj)[field]++;
  };
  const changeStyle = () => {};
  const getUserInfo = (info: string) => {
    if (info === 'roleId') {
      return userStore.getUserInfo.roles.length && userStore.getUserInfo.roles[0].id;
    }
    return userStore.getUserInfo[info];
  };
  const regTest = async (regular: regTestProps) => {
    const regExpression = regular.regExpression;
    const testRes = regExpression.test(regular.testValue);
    testRes ? message.success(regular.successMessage) : message.error(regular.errorMessage);
  };

  const formApi = {
    showModal,
    regTest,
    httpRequest,
    refreshAPI,
    changeStyle,
    showMessage,
    getUserInfo,
    openModal: customOpenModal,
  };
</script>
<style lang="less" scoped></style>
