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

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

import { FloatButton, FloatButtonGroup, message, Popover, 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 SettlementDetailDrawer from './components/settlement-detail-drawer.vue';
import Statistics from './components/statistics.vue';
import { accountChangeSearchOptions } from './config/account-change-search';
import { accountChangeGridOptions } from './config/account-change-table';
import { formOptions } from './config/search';
import { formOptions3 } from './config/settlement-log-search';
import { formOptions2 } from './config/settlement-search';
import { gridOptions2, gridOptions3 } from './config/settlement-table';
import { gridOptions } from './config/table';

const router = useRouter();

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

const [Grid2] = useVbenVxeGrid({
  formOptions: formOptions2,
  gridOptions: gridOptions2,
});

const settlementDetailDrawerRef =
  ref<InstanceType<typeof SettlementDetailDrawer>>();

const [Grid3] = useVbenVxeGrid({
  formOptions: formOptions3,
  gridOptions: gridOptions3,
});

const [Grid4] = useVbenVxeGrid({
  formOptions: accountChangeSearchOptions,
  gridOptions: accountChangeGridOptions,
});

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

function showSettlementDetail(row: Record<string, any>) {
  settlementDetailDrawerRef.value?.open(row);
}

function openOrderDetail(row: Record<string, any>) {
  const orderType = Number(row.order_type || 0);
  const orderId = Number(row.order_id || 0);
  const orderNo = String(row.order_no || '');

  if (orderType === 1 && orderId > 0) {
    OrderDetailModalApi.setData({ id: orderId });
    OrderDetailModalApi.open();
    return;
  }

  if (orderType === 2 && orderNo) {
    router.push({ path: '/business/register/list', query: { order_no: orderNo } });
    return;
  }

  message.info('暂不支持查看该类型订单详情');
}

const chartTabs = [
  { label: '提现记录', value: 'trends' },
  { label: '结算记录', value: 'visits' },
  { label: '结算明细', value: 'visitsItems' },
  { label: '资金变动记录', value: 'accountChange' },
];

const isShow = ref(true);

function updateShowStatus() {
  isShow.value = !isShow.value;
}
</script>

<template>
  <Page
    auto-content-height
    description="提现前请确认好您的打款账户"
    title="提现管理"
  >
    <OrderDetailModal />
    <Statistics v-show="isShow" :grid-api="GridApi" />
    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #trends>
        <div style="min-height: 500px;">
          <Grid>
            <template #toolbar-buttons></template>
            <template #toolbar-tools></template>
            <template #user_id="{ row }">
              <span v-if="row.user_type === 1">{{ row.store.name }}</span>
              <span v-else-if="row.user_type === 2">萧康平台</span>
              <span v-else-if="row.user_type === 3">{{ row.supplier.name }}</span>
            </template>
            <template #check_status="{ row }">
              <Tag v-if="row.check_status === 1" color="blue">待审核</Tag>
              <Tag v-else-if="row.check_status === 2" color="green">审核成功</Tag>
              <Tag v-else-if="row.check_status === 3" color="red">拒绝</Tag>
            </template>
            <template #check_result="{ row }">
              <Tag v-if="row.check_status === 2" color="green">{{ row.check_result }}</Tag>
              <Tag v-else-if="row.check_status === 3" color="red">{{ row.check_result }}</Tag>
            </template>
            <template #dakuan_status="{ row }">
              <span v-if="row.dakuan_status === -1">打款失败</span>
              <span v-else-if="row.dakuan_status === 0">处理中</span>
              <span v-else-if="row.dakuan_status === 1">打款成功</span>
            </template>
            <template #check_id="{ row }">
              <span>{{ row.check_admin?.username || row.check_admin?.nick_name || '暂无' }}</span>
            </template>
            <template #action="{ row }">
              <TableAction :actions="[]" :drop-down-actions="[]" />
            </template>
          </Grid>
        </div>
      </template>
      <template #visits>
        <div style="min-height: 500px;">
          <Grid3>
            <template #toolbar-buttons></template>
            <template #toolbar-tools></template>
            <template #action="{ row }">
              <TableAction
                :actions="[
                  {
                    label: '查看明细',
                    type: 'link',
                    size: 'small',
                    onClick: showSettlementDetail.bind(null, row),
                  },
                  {
                    label: '订单详情',
                    type: 'link',
                    size: 'small',
                    onClick: openOrderDetail.bind(null, row),
                  },
                ]"
                :drop-down-actions="[]"
              />
            </template>
          </Grid3>
          <SettlementDetailDrawer ref="settlementDetailDrawerRef" />
        </div>
      </template>
      <template #visitsItems>
        <div style="min-height: 500px;">
          <Grid2>
            <template #toolbar-buttons></template>
            <template #toolbar-tools></template>
            <template #user_id="{ row }">
              <span v-if="row.user_type === 1">{{ row.store.name }}</span>
              <span v-else-if="row.user_type === 2">萧康平台</span>
              <span v-else-if="row.user_type === 3">{{ row.supplier.name }}</span>
            </template>
            <template #action="{ row }">
              <TableAction :actions="[]" :drop-down-actions="[]" />
            </template>
          </Grid2>
        </div>
      </template>
      <template #accountChange>
        <div style="min-height: 500px;">
          <Grid4>
            <template #toolbar-buttons></template>
            <template #toolbar-tools></template>
            <template #action="{ row }">
              <TableAction
                :actions="[
                  {
                    label: '订单详情',
                    type: 'link',
                    size: 'small',
                    ifShow: !!row.order_id,
                    onClick: openOrderDetail.bind(null, row),
                  },
                ]"
                :drop-down-actions="[]"
              />
            </template>
          </Grid4>
        </div>
      </template>
    </AnalysisChartsTabs>
    <FloatButtonGroup :style="{ right: '24px', bottom: '84px' }" shape="circle">
      <Popover placement="left" title="显示余额卡片">
        <template #content>
          <p>点击展开卡片信息，再次点击收起</p>
        </template>
        <FloatButton
          :badge="{ dot: true }"
          :type="isShow === true ? 'primary' : 'dashed'"
          shape="circle"
          @click="updateShowStatus"
        >
          <template #icon>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M21.5 16.052V7.948a4.14 4.14 0 0 0-1.236-2.945a4.25 4.25 0 0 0-2.985-1.22H6.72a4.25 4.25 0 0 0-2.985 1.22A4.14 4.14 0 0 0 2.5 7.948v8.104c0 1.105.445 2.164 1.236 2.945a4.25 4.25 0 0 0 2.985 1.22H17.28c1.12 0 2.193-.44 2.985-1.22a4.14 4.14 0 0 0 1.236-2.945"/><path d="M8.552 12.14a2.054 2.054 0 1 0 0-4.108a2.054 2.054 0 0 0 0 4.108m3.081 3.828c0-.812-.324-1.59-.902-2.165a3.09 3.09 0 0 0-4.358 0a3.05 3.05 0 0 0-.902 2.165m9.097-7.049h3.594M14.568 12h1.54m-1.54 3.081h3.594"/></g></svg>
          </template>
        </FloatButton>
      </Popover>
    </FloatButtonGroup>
  </Page>
</template>
