<template>
  <div class="agent-commission-container">
    <ArtTableFullScreen>
      <div class="agent-commission-page" id="table-full-screen">
        <!-- 搜索栏 -->
        <ArtSearchBar
          v-model:filter="searchForm"
          :items="searchFormItems"
          :gutter="16"
          :el-col-span="6"
          :show-expand="false"
          @reset="handleReset"
          @search="handleSearch"
        ></ArtSearchBar>

        <ElCard shadow="never" class="art-table-card">
          <!-- 表格头部 -->
          <ArtTableHeader
            :columnList="columnOptions"
            v-model:columns="columnChecks"
            @refresh="handleRefresh"
          />

          <!-- 表格 -->
          <ArtTable
            ref="tableRef"
            row-key="shop_id"
            :loading="loading"
            :data="summaryList"
            :currentPage="pagination.page"
            :pageSize="pagination.pageSize"
            :total="pagination.total"
            :marginTop="10"
            :actions="getActions"
            :actionsWidth="120"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <template #default>
              <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
            </template>
          </ArtTable>
        </ElCard>
      </div>
    </ArtTableFullScreen>

    <!-- 详情抽屉 -->
    <ElDrawer
      v-model="detailDrawerVisible"
      :title="`${currentShop?.shop_name || ''} - 佣金详情`"
      size="60%"
      destroy-on-close
    >
      <ElTabs v-model="activeTab" class="detail-tabs">
        <!-- 佣金明细 Tab -->
        <ElTabPane label="佣金明细" name="commission">
          <ArtTable
            ref="commissionTableRef"
            row-key="id"
            :loading="commissionLoading"
            :data="commissionRecords"
            :currentPage="commissionPagination.page"
            :pageSize="commissionPagination.pageSize"
            :total="commissionPagination.total"
            :marginTop="0"
            :height="450"
            @size-change="handleCommissionSizeChange"
            @current-change="handleCommissionCurrentChange"
          >
            <template #default>
              <ElTableColumn label="佣金金额" prop="amount" width="120">
                <template #default="scope">
                  <span style="font-weight: 500; color: var(--el-color-success)">
                    {{ formatMoney(scope.row.amount) }}
                  </span>
                </template>
              </ElTableColumn>
              <ElTableColumn label="入账后余额" prop="balance_after" width="120">
                <template #default="scope">
                  {{ formatMoney(scope.row.balance_after) }}
                </template>
              </ElTableColumn>
              <ElTableColumn label="佣金来源" prop="commission_source" width="120">
                <template #default="scope">
                  <ElTag
                    :type="
                      CommissionSourceMap[
                        scope.row.commission_source as keyof typeof CommissionSourceMap
                      ]?.type || 'info'
                    "
                  >
                    {{
                      CommissionSourceMap[
                        scope.row.commission_source as keyof typeof CommissionSourceMap
                      ]?.label || scope.row.commission_source
                    }}
                  </ElTag>
                </template>
              </ElTableColumn>
              <ElTableColumn label="状态" prop="status_name" width="100">
                <template #default="scope">
                  <ElTag
                    :type="
                      CommissionStatusMap[scope.row.status as keyof typeof CommissionStatusMap]
                        ?.type || 'info'
                    "
                  >
                    {{
                      scope.row.status_name ||
                      CommissionStatusMap[scope.row.status as keyof typeof CommissionStatusMap]
                        ?.label ||
                      '-'
                    }}
                  </ElTag>
                </template>
              </ElTableColumn>
              <ElTableColumn label="订单号" prop="order_no" min-width="180" show-overflow-tooltip />
              <ElTableColumn
                label="卖家店铺"
                prop="seller_shop_name"
                min-width="150"
                show-overflow-tooltip
              />
              <ElTableColumn label="ICCID" prop="iccid" min-width="150" show-overflow-tooltip />
              <ElTableColumn
                label="设备号"
                prop="virtual_no"
                min-width="150"
                show-overflow-tooltip
              />
              <ElTableColumn label="入账时间" prop="created_at" width="180">
                <template #default="scope">
                  {{ formatDateTime(scope.row.created_at) }}
                </template>
              </ElTableColumn>
              <ElTableColumn label="操作" width="150" fixed="right">
                <template #default="scope">
                  <div v-if="scope.row.status === 99" style="display: flex; gap: 8px">
                    <ArtButtonTable
                      text="入账"
                      iconColor="#67C23A"
                      @click="handleResolveCommission(scope.row, 'release')"
                    />
                    <ArtButtonTable
                      text="作废"
                      iconColor="#F56C6C"
                      @click="handleResolveCommission(scope.row, 'invalidate')"
                    />
                  </div>
                  <span v-else>-</span>
                </template>
              </ElTableColumn>
            </template>
          </ArtTable>
        </ElTabPane>

        <!-- 提现记录 Tab -->
        <ElTabPane label="提现记录" name="withdrawal">
          <ArtTable
            ref="withdrawalTableRef"
            row-key="id"
            :loading="withdrawalLoading"
            :data="withdrawalRecords"
            :currentPage="withdrawalPagination.page"
            :pageSize="withdrawalPagination.pageSize"
            :total="withdrawalPagination.total"
            :marginTop="10"
            :height="500"
            @size-change="handleWithdrawalSizeChange"
            @current-change="handleWithdrawalCurrentChange"
          >
            <template #default>
              <ElTableColumn
                label="提现单号"
                prop="withdrawal_no"
                min-width="180"
                show-overflow-tooltip
              />
              <ElTableColumn label="提现金额" prop="amount" width="120">
                <template #default="scope">
                  <span style="font-weight: 500; color: var(--el-color-danger)">
                    {{ formatMoney(scope.row.amount) }}
                  </span>
                </template>
              </ElTableColumn>
              <ElTableColumn label="实际到账" prop="actual_amount" width="120">
                <template #default="scope">
                  {{ formatMoney(scope.row.actual_amount) }}
                </template>
              </ElTableColumn>
              <ElTableColumn label="手续费" prop="fee" width="100">
                <template #default="scope">
                  {{ formatMoney(scope.row.fee) }}
                </template>
              </ElTableColumn>
              <ElTableColumn label="提现方式" prop="withdrawal_method" width="100">
                <template #default="scope">
                  {{
                    WithdrawalMethodMap[
                      scope.row.withdrawal_method as keyof typeof WithdrawalMethodMap
                    ]?.label || scope.row.withdrawal_method
                  }}
                </template>
              </ElTableColumn>
              <ElTableColumn label="状态" prop="status" width="100">
                <template #default="scope">
                  <ElTag
                    :type="
                      WithdrawalStatusMap[scope.row.status as keyof typeof WithdrawalStatusMap]
                        ?.type || 'info'
                    "
                  >
                    {{
                      WithdrawalStatusMap[scope.row.status as keyof typeof WithdrawalStatusMap]
                        ?.label || scope.row.status
                    }}
                  </ElTag>
                </template>
              </ElTableColumn>
              <ElTableColumn label="申请时间" prop="created_at" width="180">
                <template #default="scope">
                  {{ formatDateTime(scope.row.created_at) }}
                </template>
              </ElTableColumn>
              <ElTableColumn label="处理时间" prop="processed_at" width="180">
                <template #default="scope">
                  {{ formatDateTime(scope.row.processed_at) }}
                </template>
              </ElTableColumn>
            </template>
          </ArtTable>
        </ElTabPane>

        <!-- 预充值钱包流水 Tab -->
        <ElTabPane label="预充值钱包流水" name="mainWallet">
          <ElForm :model="mainWalletSearchForm" class="main-wallet-filter" label-position="top">
            <div class="main-wallet-filter__grid">
              <ElFormItem label="交易类型">
                <ElSelect
                  v-model="mainWalletSearchForm.transaction_type"
                  clearable
                  placeholder="全部类型"
                >
                  <ElOption label="充值入账" :value="MainWalletTransactionType.RECHARGE" />
                  <ElOption label="套餐扣款" :value="MainWalletTransactionType.DEDUCT" />
                  <ElOption label="退款" :value="MainWalletTransactionType.REFUND" />
                </ElSelect>
              </ElFormItem>
              <ElFormItem label="交易日期">
                <ElDatePicker
                  v-model="mainWalletSearchForm.date_range"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="YYYY-MM-DD"
                  unlink-panels
                />
              </ElFormItem>
              <ElFormItem label="资产标识">
                <ElInput
                  v-model="mainWalletSearchForm.asset_identifier"
                  clearable
                  maxlength="100"
                  placeholder="请输入ICCID或设备虚拟号"
                  @keyup.enter="handleMainWalletSearch"
                />
              </ElFormItem>
              <ElFormItem class="main-wallet-filter__actions">
                <ElButton type="primary" @click="handleMainWalletSearch">搜索</ElButton>
                <ElButton @click="handleMainWalletReset">重置</ElButton>
              </ElFormItem>
            </div>
          </ElForm>
          <ArtTable
            ref="mainWalletTableRef"
            row-key="id"
            :loading="mainWalletLoading"
            :data="mainWalletRecords"
            :currentPage="mainWalletPagination.page"
            :pageSize="mainWalletPagination.pageSize"
            :total="mainWalletPagination.total"
            :marginTop="10"
            :height="500"
            @size-change="handleMainWalletSizeChange"
            @current-change="handleMainWalletCurrentChange"
          >
            <template #default>
              <ElTableColumn label="交易类型" prop="transaction_type" width="120">
                <template #default="scope">
                  <ElTag
                    :type="
                      scope.row.transaction_type === 'recharge'
                        ? 'success'
                        : scope.row.transaction_type === 'deduct'
                          ? 'warning'
                          : 'info'
                    "
                  >
                    {{
                      scope.row.transaction_type === 'recharge'
                        ? '充值入账'
                        : scope.row.transaction_type === 'deduct'
                          ? '套餐扣款'
                          : scope.row.transaction_type === 'refund'
                            ? '退款'
                            : scope.row.transaction_type
                    }}
                  </ElTag>
                </template>
              </ElTableColumn>
              <ElTableColumn label="交易金额" prop="amount" width="120">
                <template #default="scope">
                  <span
                    :style="{
                      fontWeight: 500,
                      color:
                        scope.row.amount > 0 ? 'var(--el-color-success)' : 'var(--el-color-danger)'
                    }"
                  >
                    {{ scope.row.amount > 0 ? '+' : '' }}{{ formatMoney(scope.row.amount) }}
                  </span>
                </template>
              </ElTableColumn>
              <ElTableColumn label="交易前余额" prop="balance_before" width="130">
                <template #default="scope">
                  {{ formatMoney(scope.row.balance_before) }}
                </template>
              </ElTableColumn>
              <ElTableColumn label="交易后余额" prop="balance_after" width="130">
                <template #default="scope">
                  {{ formatMoney(scope.row.balance_after) }}
                </template>
              </ElTableColumn>
              <ElTableColumn
                label="资产标识"
                prop="asset_identifier"
                min-width="160"
                show-overflow-tooltip
              >
                <template #default="scope">
                  <span
                    v-if="scope.row.asset_identifier"
                    class="asset-identifier-link"
                    @click.stop="handleAssetIdentifierClick(scope.row.asset_identifier)"
                  >
                    {{ scope.row.asset_identifier }}
                  </span>
                  <span v-else>-</span>
                </template>
              </ElTableColumn>
              <ElTableColumn label="备注" prop="remark" min-width="200" show-overflow-tooltip />
              <ElTableColumn label="交易时间" prop="created_at" width="180">
                <template #default="scope">
                  {{ formatDateTime(scope.row.created_at) }}
                </template>
              </ElTableColumn>
            </template>
          </ArtTable>
        </ElTabPane>
      </ElTabs>
    </ElDrawer>

    <!-- 佣金修正对话框 -->
    <ElDialog
      v-model="resolveDialogVisible"
      :title="resolveAction === 'release' ? '佣金入账' : '佣金作废'"
      width="500px"
    >
      <ElAlert
        :title="
          resolveAction === 'release' ? '确认将该笔待审佣金记录入账' : '确认将该笔待审佣金记录作废'
        "
        :type="resolveAction === 'release' ? 'success' : 'warning'"
        style="margin-bottom: 16px"
        :closable="false"
      />

      <ElForm ref="resolveFormRef" :model="resolveForm" :rules="resolveRules" label-width="100px">
        <ElFormItem v-if="resolveAction === 'release'" label="入账金额" prop="amount">
          <ElInputNumber
            v-model="resolveForm.amount"
            :min="0"
            :step="100"
            :precision="0"
            controls-position="right"
            style="width: 100%"
            placeholder="请输入入账金额(分)"
          />
          <div style="margin-top: 4px; font-size: 12px; color: var(--el-text-color-secondary)">
            金额单位为分，例如：100元 = 10000分
          </div>
        </ElFormItem>
        <ElFormItem label="备注" prop="remark">
          <ElInput
            v-model="resolveForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注（可选，最多500字符）"
            maxlength="500"
            show-word-limit
          />
        </ElFormItem>
      </ElForm>

      <template #footer>
        <div class="dialog-footer">
          <ElButton @click="resolveDialogVisible = false">取消</ElButton>
          <ElButton
            :type="resolveAction === 'release' ? 'success' : 'warning'"
            @click="handleResolveSubmit"
            :loading="resolveSubmitLoading"
          >
            确认
          </ElButton>
        </div>
      </template>
    </ElDialog>
  </div>
</template>

<script setup lang="ts">
  import { h, watch, onBeforeUnmount, ref, reactive, onMounted, computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { CommissionService } from '@/api/modules'
  import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
  import type { FormInstance, FormRules } from 'element-plus'
  import { MainWalletTransactionType } from '@/types/api/commission'
  import type {
    ShopFundSummaryItem,
    ShopCommissionRecordItem,
    WithdrawalRequestItem,
    CommissionResolveAction,
    MainWalletTransactionItem,
    MainWalletTransactionQueryParams
  } from '@/types/api/commission'
  import type { SearchFormItem } from '@/types'
  import { useCheckedColumns } from '@/composables/useCheckedColumns'
  import { useAuth } from '@/composables/useAuth'
  import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
  import { formatDateTime, formatMoney } from '@/utils/business/format'
  import {
    CommissionStatusMap,
    WithdrawalStatusMap,
    WithdrawalMethodMap,
    CommissionSourceMap
  } from '@/config/constants/commission'
  import { RoutesAlias } from '@/router/routesAlias'

  defineOptions({ name: 'AgentCommission' })

  const { hasAuth } = useAuth()

  const route = useRoute()
  const router = useRouter()

  // 主表格状态
  const loading = ref(false)
  const tableRef = ref()
  const summaryList = ref<ShopFundSummaryItem[]>([])

  // 搜索表单
  const searchForm = reactive({
    shop_name: '',
    username: ''
  })

  // 主表格分页
  const pagination = reactive({
    page: 1,
    pageSize: 20,
    total: 0
  })

  // 详情抽屉状态
  const detailDrawerVisible = ref(false)
  const activeTab = ref<'commission' | 'withdrawal' | 'mainWallet'>('commission')
  const currentShop = ref<ShopFundSummaryItem | null>(null)

  // 佣金明细状态
  const commissionLoading = ref(false)
  const commissionTableRef = ref()
  const commissionRecords = ref<ShopCommissionRecordItem[]>([])
  const commissionPagination = reactive({
    page: 1,
    pageSize: 20,
    total: 0
  })

  // 提现记录状态
  const withdrawalLoading = ref(false)
  const withdrawalTableRef = ref()
  const withdrawalRecords = ref<WithdrawalRequestItem[]>([])
  const withdrawalPagination = reactive({
    page: 1,
    pageSize: 20,
    total: 0
  })

  // 佣金修正对话框状态
  const resolveDialogVisible = ref(false)
  const resolveFormRef = ref<FormInstance>()
  const resolveSubmitLoading = ref(false)
  const resolveAction = ref<CommissionResolveAction>('release')
  const currentCommissionId = ref<number>(0)
  const resolveForm = reactive({
    amount: undefined as number | undefined,
    remark: ''
  })

  // 佣金修正表单验证规则
  const resolveRules = computed<FormRules>(() => ({
    amount:
      resolveAction.value === 'release'
        ? [
            { required: true, message: '请输入入账金额', trigger: 'blur' },
            {
              type: 'number',
              min: 1,
              message: '入账金额必须大于0',
              trigger: 'blur'
            }
          ]
        : [],
    remark: [{ max: 500, message: '备注最多500字符', trigger: 'blur' }]
  }))

  // 预充值钱包流水状态
  const mainWalletLoading = ref(false)
  const mainWalletTableRef = ref()
  const mainWalletRecords = ref<MainWalletTransactionItem[]>([])
  const mainWalletPagination = reactive({
    page: 1,
    pageSize: 20,
    total: 0
  })
  const mainWalletSearchForm = reactive<{
    transaction_type: MainWalletTransactionType | undefined
    date_range: [string, string] | [] | null
    asset_identifier: string
  }>({
    transaction_type: undefined,
    date_range: [],
    asset_identifier: ''
  })

  // 列配置
  const columnOptions = [
    { label: '店铺编码', prop: 'shop_code' },
    { label: '店铺名称', prop: 'shop_name' },
    { label: '用户名', prop: 'username' },
    { label: '手机号', prop: 'phone' },
    { label: '现金余额', prop: 'balance' },
    { label: '冻结金额', prop: 'frozen_balance' },
    { label: '余额预警', prop: 'low_balance_warning' },
    { label: '总佣金', prop: 'total_commission' },
    { label: '可提现', prop: 'available_commission' },
    { label: '冻结中', prop: 'frozen_commission' },
    { label: '提现中', prop: 'withdrawing_commission' },
    { label: '已提现', prop: 'withdrawn_commission' },
    { label: '未提现', prop: 'unwithdraw_commission' }
  ]

  // 搜索表单配置
  const searchFormItems: SearchFormItem[] = [
    {
      label: '店铺名称',
      prop: 'shop_name',
      type: 'input',
      config: {
        clearable: true,
        placeholder: '请输入店铺名称'
      }
    },
    {
      label: '用户名',
      prop: 'username',
      type: 'input',
      config: {
        clearable: true,
        placeholder: '请输入主账号用户名'
      }
    }
  ]

  // 处理名称点击
  const handleNameClick = (row: ShopFundSummaryItem) => {
    if (hasAuth('agent_commission:detail')) {
      showDetail(row)
    } else {
      ElMessage.warning('您没有查看详情的权限')
    }
  }

  const handleAssetIdentifierClick = (assetIdentifier: string) => {
    router.push({
      path: RoutesAlias.AssetInformation,
      query: {
        iccid: assetIdentifier
      }
    })
  }

  // 动态列配置
  const { columnChecks, columns } = useCheckedColumns(() => [
    {
      prop: 'shop_code',
      label: '店铺编码',
      minWidth: 140,
      showOverflowTooltip: true
    },
    {
      prop: 'shop_name',
      label: '店铺名称',
      minWidth: 160,
      showOverflowTooltip: true,
      formatter: (row: ShopFundSummaryItem) => {
        return h(
          'span',
          {
            style: 'color: var(--el-color-primary); cursor: pointer; text-decoration: underline;',
            onClick: (e: MouseEvent) => {
              e.stopPropagation()
              handleNameClick(row)
            }
          },
          row.shop_name
        )
      }
    },
    {
      prop: 'username',
      label: '用户名',
      minWidth: 120
    },
    {
      prop: 'phone',
      label: '手机号',
      width: 120
    },
    {
      prop: 'balance',
      label: '现金余额',
      minWidth: 130,
      formatter: (row: ShopFundSummaryItem) => {
        return h(
          'span',
          { style: 'color: var(--el-color-primary); font-weight: 500' },
          formatMoney(row.balance)
        )
      }
    },
    {
      prop: 'frozen_balance',
      label: '冻结金额',
      minWidth: 120,
      formatter: (row: ShopFundSummaryItem) => formatMoney(row.frozen_balance)
    },
    {
      prop: 'low_balance_warning',
      label: '余额预警',
      minWidth: 170,
      formatter: (row: ShopFundSummaryItem) => {
        if (!row.low_balance_warning) return '-'

        return h(ElTag, { type: 'danger' }, () => '现金余额不足100元')
      }
    },
    {
      prop: 'total_commission',
      label: '总佣金',
      minWidth: 120,
      formatter: (row: ShopFundSummaryItem) => formatMoney(row.total_commission)
    },
    {
      prop: 'available_commission',
      label: '可提现',
      minWidth: 120,
      formatter: (row: ShopFundSummaryItem) => {
        return h(
          'span',
          { style: 'color: var(--el-color-success); font-weight: 500' },
          formatMoney(row.available_commission)
        )
      }
    },
    {
      prop: 'frozen_commission',
      label: '冻结中',
      minWidth: 110,
      formatter: (row: ShopFundSummaryItem) => formatMoney(row.frozen_commission)
    },
    {
      prop: 'withdrawing_commission',
      label: '提现中',
      minWidth: 110,
      formatter: (row: ShopFundSummaryItem) => {
        return h(
          'span',
          { style: 'color: var(--el-color-warning)' },
          formatMoney(row.withdrawing_commission)
        )
      }
    },
    {
      prop: 'withdrawn_commission',
      label: '已提现',
      minWidth: 110,
      formatter: (row: ShopFundSummaryItem) => formatMoney(row.withdrawn_commission)
    },
    {
      prop: 'unwithdraw_commission',
      label: '未提现',
      minWidth: 110,
      formatter: (row: ShopFundSummaryItem) => formatMoney(row.unwithdraw_commission)
    }
  ])

  onMounted(() => {
    getTableData()
  })

  // 获取代理商资金汇总列表
  const getTableData = async () => {
    loading.value = true
    try {
      const params = {
        page: pagination.page,
        page_size: pagination.pageSize,
        shop_name: searchForm.shop_name || undefined,
        username: searchForm.username || undefined
      }
      const res = await CommissionService.getShopFundSummary(params)
      if (res.code === 0) {
        summaryList.value = res.data.items || []
        pagination.total = res.data.total || 0
      }
    } catch (error) {
      console.error(error)
      console.log('获取数据失败')
    } finally {
      loading.value = false
    }
  }

  // 搜索
  const handleSearch = () => {
    pagination.page = 1
    getTableData()
  }

  // 重置
  const handleReset = () => {
    searchForm.shop_name = ''
    searchForm.username = ''
    pagination.page = 1
    getTableData()
  }

  // 刷新
  const handleRefresh = () => {
    getTableData()
  }

  // 分页变化
  const handleSizeChange = (newPageSize: number) => {
    pagination.pageSize = newPageSize
    getTableData()
  }

  const handleCurrentChange = (newCurrentPage: number) => {
    pagination.page = newCurrentPage
    getTableData()
  }

  // 显示详情抽屉
  const showDetail = (row: ShopFundSummaryItem) => {
    currentShop.value = row
    detailDrawerVisible.value = true
    activeTab.value = 'commission'

    // 重置分页
    commissionPagination.page = 1
    withdrawalPagination.page = 1
    mainWalletPagination.page = 1
    mainWalletPagination.total = 0
    mainWalletRecords.value = []
    resetMainWalletSearchForm()

    // 加载佣金明细
    loadCommissionRecords()
  }

  // 获取操作按钮
  const getActions = (row: ShopFundSummaryItem) => {
    const actions: any[] = []

    if (hasAuth('agent_commission:detail')) {
      actions.push({
        label: '查看详情',
        handler: () => showDetail(row),
        type: 'primary'
      })
    }

    return actions
  }

  // 监听tab切换
  watch(activeTab, (newTab) => {
    if (newTab === 'commission') {
      loadCommissionRecords()
    } else if (newTab === 'withdrawal') {
      loadWithdrawalRecords()
    } else if (newTab === 'mainWallet') {
      loadMainWalletRecords()
    }
  })

  // 监听路由变化，关闭抽屉
  watch(
    () => route.path,
    () => {
      if (detailDrawerVisible.value) {
        detailDrawerVisible.value = false
      }
    }
  )

  // 组件卸载前关闭抽屉
  onBeforeUnmount(() => {
    if (detailDrawerVisible.value) {
      detailDrawerVisible.value = false
    }
  })

  // 加载佣金明细
  const loadCommissionRecords = async () => {
    if (!currentShop.value) return

    commissionLoading.value = true
    try {
      const params = {
        page: commissionPagination.page,
        page_size: commissionPagination.pageSize
      }
      const res = await CommissionService.getShopCommissionRecords(
        currentShop.value.shop_id,
        params
      )
      if (res.code === 0) {
        commissionRecords.value = res.data.items || []
        commissionPagination.total = res.data.total || 0
      }
    } catch (error) {
      console.error(error)
      console.log('获取佣金明细失败')
    } finally {
      commissionLoading.value = false
    }
  }

  // 佣金明细分页
  const handleCommissionSizeChange = (newPageSize: number) => {
    commissionPagination.pageSize = newPageSize
    loadCommissionRecords()
  }

  const handleCommissionCurrentChange = (newCurrentPage: number) => {
    commissionPagination.page = newCurrentPage
    loadCommissionRecords()
  }

  // 加载提现记录
  const loadWithdrawalRecords = async () => {
    if (!currentShop.value) return

    withdrawalLoading.value = true
    try {
      const params = {
        page: withdrawalPagination.page,
        page_size: withdrawalPagination.pageSize
      }
      const res = await CommissionService.getShopWithdrawalRequests(
        currentShop.value.shop_id,
        params
      )
      if (res.code === 0) {
        withdrawalRecords.value = res.data.items || []
        withdrawalPagination.total = res.data.total || 0
      }
    } catch (error) {
      console.error(error)
      console.log('获取提现记录失败')
    } finally {
      withdrawalLoading.value = false
    }
  }

  // 提现记录分页
  const handleWithdrawalSizeChange = (newPageSize: number) => {
    withdrawalPagination.pageSize = newPageSize
    loadWithdrawalRecords()
  }

  const handleWithdrawalCurrentChange = (newCurrentPage: number) => {
    withdrawalPagination.page = newCurrentPage
    loadWithdrawalRecords()
  }

  // 加载预充值钱包流水
  const loadMainWalletRecords = async () => {
    if (!currentShop.value) return

    mainWalletLoading.value = true
    try {
      const [startDate, endDate] = mainWalletSearchForm.date_range || []
      const params: MainWalletTransactionQueryParams = {
        page: mainWalletPagination.page,
        page_size: mainWalletPagination.pageSize,
        transaction_type: mainWalletSearchForm.transaction_type,
        start_date: startDate,
        end_date: endDate,
        asset_identifier: mainWalletSearchForm.asset_identifier.trim() || undefined
      }
      const res = await CommissionService.getMainWalletTransactions(
        currentShop.value.shop_id,
        params
      )
      if (res.code === 0) {
        mainWalletRecords.value = res.data.items || []
        mainWalletPagination.total = res.data.total || 0
      }
    } catch (error) {
      console.error(error)
      console.log('获取预充值钱包流水失败')
    } finally {
      mainWalletLoading.value = false
    }
  }

  // 预充值钱包流水分页
  const handleMainWalletSizeChange = (newPageSize: number) => {
    mainWalletPagination.pageSize = newPageSize
    loadMainWalletRecords()
  }

  const handleMainWalletCurrentChange = (newCurrentPage: number) => {
    mainWalletPagination.page = newCurrentPage
    loadMainWalletRecords()
  }

  const resetMainWalletSearchForm = () => {
    mainWalletSearchForm.transaction_type = undefined
    mainWalletSearchForm.date_range = []
    mainWalletSearchForm.asset_identifier = ''
  }

  const handleMainWalletSearch = () => {
    mainWalletPagination.page = 1
    loadMainWalletRecords()
  }

  const handleMainWalletReset = () => {
    resetMainWalletSearchForm()
    mainWalletPagination.page = 1
    loadMainWalletRecords()
  }

  // 处理佣金修正
  const handleResolveCommission = (
    row: ShopCommissionRecordItem,
    action: CommissionResolveAction
  ) => {
    currentCommissionId.value = row.id
    resolveAction.value = action
    resolveForm.amount = undefined
    resolveForm.remark = ''
    resolveDialogVisible.value = true
  }

  // 提交佣金修正
  const handleResolveSubmit = async () => {
    if (!resolveFormRef.value) return

    await resolveFormRef.value.validate(async (valid) => {
      if (valid) {
        const actionText = resolveAction.value === 'release' ? '入账' : '作废'
        const confirmText =
          resolveAction.value === 'release'
            ? `确认将该笔佣金记录入账 ${formatMoney(resolveForm.amount || 0)} 吗？`
            : '确认将该笔佣金记录作废吗？'

        try {
          await ElMessageBox.confirm(confirmText, '确认操作', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          })

          resolveSubmitLoading.value = true
          try {
            const params: any = {
              action: resolveAction.value
            }

            if (resolveAction.value === 'release' && resolveForm.amount) {
              params.amount = resolveForm.amount
            }

            if (resolveForm.remark) {
              params.remark = resolveForm.remark
            }

            await CommissionService.resolveCommissionRecord(currentCommissionId.value, params)
            ElMessage.success(`${actionText}成功`)
            resolveDialogVisible.value = false
            resolveFormRef.value?.resetFields()

            // 刷新佣金明细列表
            await loadCommissionRecords()
          } catch (error: any) {
            console.error(error)
            console.log(error?.message || `${actionText}失败`)
          } finally {
            resolveSubmitLoading.value = false
          }
        } catch {
          // 用户取消
        }
      }
    })
  }
</script>

<style lang="scss" scoped>
  .agent-commission-container {
    height: 100%;
  }

  .agent-commission-page {
    :deep(.art-custom-card) {
      margin-bottom: 16px;
    }
  }

  .detail-tabs {
    :deep(.el-tabs__content) {
      padding: 0;
    }
  }

  .main-wallet-filter {
    padding: 16px 16px 4px;
    margin-bottom: 12px;
    background: var(--el-fill-color-lighter);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;

    :deep(.el-form-item) {
      margin-bottom: 12px;
    }

    :deep(.el-select),
    :deep(.el-date-editor),
    :deep(.el-input) {
      width: 100%;
    }
  }

  .main-wallet-filter__grid {
    display: grid;
    grid-template-columns: minmax(140px, 0.8fr) minmax(260px, 1.4fr) minmax(220px, 1fr) auto;
    gap: 12px 16px;
    align-items: end;
  }

  .main-wallet-filter__actions {
    :deep(.el-form-item__content) {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      justify-content: flex-end;
    }
  }

  @media (width <= 1200px) {
    .main-wallet-filter__grid {
      grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

    .main-wallet-filter__actions {
      :deep(.el-form-item__content) {
        justify-content: flex-start;
      }
    }
  }

  @media (width <= 768px) {
    .main-wallet-filter__grid {
      grid-template-columns: 1fr;
    }
  }

  .asset-identifier-link {
    color: var(--el-color-primary);
    text-decoration: underline;
    cursor: pointer;
  }

  :deep(.el-table__row.table-row-with-context-menu) {
    cursor: pointer;
  }
</style>
