<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 DetailModal from '#/views/business/order/product-order/components/detail.vue';
import StatisticsReconciliation from '#/views/finance/reconciliation/components/statistics.vue';

import { formOptions } from './config/search';
import { gridOptions } from './config/table';

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

const statistics = ref();

const [OrderDetailModal, OrderDetailModalApi] = useVbenModal({
  connectedComponent: DetailModal,
});

const infoModal = (id) => {
  OrderDetailModalApi.setData({
    // 表单值
    id,
  });
  OrderDetailModalApi.open();
};
</script>

<template>
  <Page auto-content-height title="资金流水记录">
    <OrderDetailModal />
    <StatisticsReconciliation v-if="statistics" :statistics="statistics" />
    <Grid>
      <template #toolbar-actions>
        <TableAction :actions="[]" :drop-down-actions="[]">
          <template #more>
            <Button style="margin-left: 16px">
              批量操作
              <Icon icon="ant-design:down-outlined" />
            </Button>
          </template>
        </TableAction>
      </template>
      <template #order-type="{ row }">
        <div class="mt-3">
          <Tag v-if="row.order_type === 1" color="purple">产品订单</Tag>
          <Tag v-else-if="row.order_type === 2" color="green">挂号订单</Tag>
          <Tag v-else-if="row.order_type === 3" color="blue">问诊订单</Tag>
        </div>
      </template>
      <template #type="{ row }">
        <div class="mt-3">
          <Tag v-if="row.type === 'refund'" color="purple">出账</Tag>
          <Tag v-else-if="row.type === 'enter'" color="green">入账</Tag>
          <Tag v-else-if="row.type === 'withdraw'" color="orange">提现</Tag>
          <Tag v-else-if="row.type === 'charge'" color="red">代付手续费</Tag>
        </div>
      </template>
      <template #toolbar-tools></template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '详情',
              type: 'link',
              icon: 'marketeq:eye',
              size: 'small',
              // auth: ['order', 'sys:role:detail'],
              onClick: infoModal.bind(null, row.order_id),
            },
          ]"
        />
      </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>
