<script lang="ts" setup>
import { ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';

import { Button, Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';
import MonthPayment from './components/MonthlyPayment.vue'
import StatisticsReconciliation from '#/views/finance/reconciliation/components/statistics.vue';

import { formOptions } from './config/search';
import { gridOptions } from './config/table';
import {getMonthlyPaymentListApi} from "#/views/finance/monthly-payment/api";

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

const statistics = ref();

const [MonthlyPaymentModal, MonthlyPaymentModalApi] = useVbenModal({
  connectedComponent: MonthPayment,
});

const infoModal = (id, modalType) => {
  MonthlyPaymentModalApi.setData({
    // 表单值
    id,
    modalType,
    gridApi,
  });
  MonthlyPaymentModalApi.open();
};
const initTableAjax = () => {
  gridApi.setGridOptions({
    proxyConfig: {
      ajax: {
        // 请求后端接口方法
        query: async ({ page }, formValues) => {
          return await getMonthlyPaymentListApi({
            page: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          }).then((res) => {
            statistics.value = null;
            statistics.value = [
              {
                title: '总待付',
                value: res.count,
                icon: 'mdi:cash-multiple',
                color: 'text-blue-600',
                unit: '¥',
              },
            ];
            return res.list;
          });
        },
      },
    },
  });
};

initTableAjax();
</script>

<template>
  <Page auto-content-height title="资金流水记录">
    <MonthlyPaymentModal />
    <StatisticsReconciliation v-if="statistics" :statistics="statistics" />
    <Grid>
      <template #toolbar-buttons>
        <TableAction :actions="[
            {
              label: '结算订单',
              type: 'primary',
              // icon: 'ant-design:plus-outlined',
              // auth: ['超级诊所', 'sys:user:save'],
              onClick: infoModal.bind(null, null, 2),
            },
        ]" :drop-down-actions="[]">
          <template #more>
            <Button style="margin-left: 16px">
              批量操作
              <Icon icon="ant-design:down-outlined" />
            </Button>
          </template>
        </TableAction>
      </template>
      <template #status="{ row }">
        <div class="mt-3">
          <Tag v-if="row.status === 0" color="purple">待结算</Tag>
          <Tag v-else-if="row.status === 1" color="green">已结算</Tag>
          <div v-else-if="row.status === 2">
            <Tag color="orange">作废（已取消）</Tag>
            <p class="mt-3" style="color: red;">{{ row.invalidated_reason }}</p>
          </div>
        </div>
      </template>
      <template #toolbar-tools></template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '作废',
              type: 'link',
              icon: 'uil:edit',
              size: 'small',
              // auth: ['order', 'sys:role:detail'],
              onClick: infoModal.bind(null, row.id, 1),
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
<style scoped lang="scss">
.custom-list {
  list-style-type: none;
  padding-left: 0;
}

.custom-list-item {
  background-color: rgba(64, 158, 255, 0.04);
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 8px 12px;
  font-size: 14px;
  transition: background-color 0.3s;

  &:hover {
    background-color: rgba(64, 158, 255, 0.1);
  }

  &::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #409eff;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
  }
}
</style>
