import type { DropMenu, TableActionType } from '@eciol/ant-ui';
import { useI18n } from '@eciol/locale';

import { getOuterPaymentNum, getPaymentOrders } from '@/api';

import { PaymentOrderStatus } from './constants';

interface usePaymentOrderOptions {
  setTableData: TableActionType['setTableData'];
}

export const usePaymentOrder = ({ setTableData }: usePaymentOrderOptions) => {
  const { t } = useI18n();
  const receivableList = ref<DropMenu[]>([
    {
      text: t('partnerPortal.paymentOrders.receivable'),
      disabled: true,
      event: 'title1',
    },
  ]);

  const receivedList = ref<DropMenu[]>([
    {
      text: t('partnerPortal.paymentOrders.received'),
      disabled: true,
      event: 'title2',
    },
  ]);

  const dropMenuList = ref<DropMenu[]>([]);

  const paymentOrderTime = ref('');

  const handleMenuEvent = (menu) => {
    paymentOrderTime.value = menu.text;
    GetPaymentOrders({ paymentID: menu.event });
  };

  useRequest(getOuterPaymentNum, {
    manual: false,
    onSuccess(data = []) {
      const _receivableList =
        data
          ?.filter((item) => [PaymentOrderStatus.RECEIVABLE].includes(item.status))
          ?.map((item) => ({
            text: item.billNo,
            event: item.payappleId,
          })) ?? [];
      const _receivedList =
        data
          ?.filter((item) => [PaymentOrderStatus.RECEIVED].includes(item.status))
          ?.map((item) => ({
            text: item.billNo,
            event: item.payappleId,
          })) ?? [];
      receivedList.value = [...receivedList.value, ..._receivedList];
      receivableList.value = [...receivableList.value, ..._receivableList];
      dropMenuList.value = [...receivableList.value, ...receivedList.value];
      data?.[0]?.payappleId && GetPaymentOrders({ paymentID: data[0].payappleId });
      paymentOrderTime.value = data?.[0]?.billNo;
    },
  });

  const {
    loading,
    data: paymentInformation,
    run: GetPaymentOrders,
  } = useRequest(getPaymentOrders, {
    initialData: {},
    onSuccess(data) {
      setTableData(data.body ?? []);
    },
  });

  const paymentInfo = computed(() => {
    return paymentInformation.value?.header ?? {};
  });

  return {
    dropMenuList,
    paymentOrderTime,
    paymentInformation,
    loading,
    handleMenuEvent,
    paymentInfo,
  };
};