<script lang="ts" setup>
import { ref } from 'vue';
import { Drawer, Tabs } from 'ant-design-vue';
import type { EnergyAccountApi } from '#/api/energy/account';
import { getProjectAccountList, getFlowPage } from '#/api/energy/account';
import { FLOW_TYPE_OPTIONS } from '../data';

const visible = ref(false);
const account = ref<EnergyAccountApi.Account>();
const projectAccounts = ref<EnergyAccountApi.ProjectAccount[]>([]);
const flows = ref<EnergyAccountApi.Flow[]>([]);
const activeTab = ref('project');

function open(data: EnergyAccountApi.Account) {
  account.value = data;
  visible.value = true;
  loadProjectAccounts();
  loadFlows();
}

async function loadProjectAccounts() {
  if (!account.value?.id) return;
  projectAccounts.value = await getProjectAccountList(account.value.id);
}

async function loadFlows() {
  if (!account.value?.id) return;
  const result = await getFlowPage({ pageNo: 1, pageSize: 50, accountId: account.value.id } as any);
  flows.value = result?.list || [];
}

// Project account columns for a-table
const projectColumns = [
  { title: '项目名称', dataIndex: 'projectName', width: 150 },
  { title: '合同编号', dataIndex: 'contractCode', width: 120 },
  { title: '项目余额', dataIndex: 'balance', width: 100, align: 'right' as const },
  { title: '已划账', dataIndex: 'accumulatedRecharge', width: 100, align: 'right' as const },
  { title: '已消费', dataIndex: 'accumulatedConsume', width: 100, align: 'right' as const },
];

// Flow columns for a-table
const flowColumns = [
  { title: '时间', dataIndex: 'createTime', width: 180 },
  { title: '流水类型', dataIndex: 'flowType', width: 80, customRender: ({ text }: any) => FLOW_TYPE_OPTIONS.find(o => o.value === text)?.label || text },
  { title: '变动金额', dataIndex: 'amount', width: 100, align: 'right' as const },
  { title: '变动前余额', dataIndex: 'balanceBefore', width: 100, align: 'right' as const },
  { title: '变动后余额', dataIndex: 'balanceAfter', width: 100, align: 'right' as const },
  { title: '关联单据号', dataIndex: 'bizCode', width: 120 },
  { title: '备注', dataIndex: 'remark', width: 150 },
];

defineExpose({ open });
</script>

<template>
  <Drawer v-model:open="visible" :title="account?.customerName + ' - 账户详情'" width="720">
    <!-- Balance card -->
    <div class="mb-4 rounded-lg p-6 text-white" style="background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%)">
      <div class="text-sm opacity-80">当前余额</div>
      <div class="text-3xl font-bold">¥{{ account?.balance?.toFixed(2) }}</div>
      <div class="mt-2 flex gap-4 text-sm opacity-80">
        <span>累计充值 ¥{{ account?.accumulatedRecharge?.toFixed(2) }}</span>
        <span>累计消费 ¥{{ account?.accumulatedConsume?.toFixed(2) }}</span>
      </div>
    </div>

    <Tabs v-model:activeKey="activeTab">
      <Tabs.TabPane key="project" tab="项目账户">
        <a-table :data-source="projectAccounts" :columns="projectColumns" :pagination="false" size="small" row-key="id" />
      </Tabs.TabPane>
      <Tabs.TabPane key="flow" tab="账户流水">
        <a-table :data-source="flows" :columns="flowColumns" :pagination="false" size="small" row-key="id" :scroll="{ y: 400 }" />
      </Tabs.TabPane>
    </Tabs>
  </Drawer>
</template>
