<template>
  <div class="page-content">
    <ElCard shadow="never">
      <!-- 搜索栏 -->
      <ElForm :inline="true" :model="searchForm" class="search-form">
        <ElFormItem label="客户账号">
          <ElInput
            v-model="searchForm.accountNo"
            placeholder="请输入客户账号"
            clearable
            style="width: 200px"
          />
        </ElFormItem>
        <ElFormItem label="客户名称">
          <ElInput
            v-model="searchForm.customerName"
            placeholder="请输入客户名称"
            clearable
            style="width: 200px"
          />
        </ElFormItem>
        <ElFormItem label="客户类型">
          <ElSelect
            v-model="searchForm.customerType"
            placeholder="请选择"
            clearable
            style="width: 150px"
          >
            <ElOption label="代理商" value="agent" />
            <ElOption label="企业客户" value="enterprise" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem>
          <ElButton type="primary" @click="handleSearch">查询</ElButton>
          <ElButton @click="handleReset">重置</ElButton>
        </ElFormItem>
      </ElForm>

      <!-- 数据表格 -->
      <ArtTable :data="tableData" index stripe>
        <template #default>
          <ElTableColumn label="客户账号" prop="accountNo" min-width="150" />
          <ElTableColumn label="客户名称" prop="customerName" min-width="150" />
          <ElTableColumn label="客户类型" prop="customerType" width="120">
            <template #default="scope">
              <ElTag :type="scope.row.customerType === 'agent' ? 'success' : 'primary'">
                {{ scope.row.customerType === 'agent' ? '代理商' : '企业客户' }}
              </ElTag>
            </template>
          </ElTableColumn>
          <ElTableColumn label="佣金总额" prop="totalCommission" width="150">
            <template #default="scope"> ¥{{ scope.row.totalCommission.toFixed(2) }} </template>
          </ElTableColumn>
          <ElTableColumn label="可提现金额" prop="availableAmount" width="150">
            <template #default="scope">
              <span style="color: var(--el-color-success)">
                ¥{{ scope.row.availableAmount.toFixed(2) }}
              </span>
            </template>
          </ElTableColumn>
          <ElTableColumn label="待入账金额" prop="pendingAmount" width="150">
            <template #default="scope">
              <span style="color: var(--el-color-warning)">
                ¥{{ scope.row.pendingAmount.toFixed(2) }}
              </span>
            </template>
          </ElTableColumn>
          <ElTableColumn label="已提现金额" prop="withdrawnAmount" width="150">
            <template #default="scope"> ¥{{ scope.row.withdrawnAmount.toFixed(2) }} </template>
          </ElTableColumn>
          <ElTableColumn label="提现次数" prop="withdrawCount" width="100" />
          <ElTableColumn label="最后提现时间" prop="lastWithdrawTime" width="180" />
          <ElTableColumn label="操作" width="180" fixed="right">
            <template #default="scope">
              <ElButton link type="primary" @click="handleViewDetail(scope.row)">查看详情</ElButton>
              <ElButton link type="primary" @click="handleViewFlow(scope.row)">流水记录</ElButton>
            </template>
          </ElTableColumn>
        </template>
      </ArtTable>

      <!-- 分页 -->
      <ElPagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        style="justify-content: flex-end; margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </ElCard>

    <!-- 详情对话框 -->
    <ElDialog v-model="detailDialogVisible" title="客户账号详情" width="800px" align-center>
      <ElDescriptions :column="2" border>
        <ElDescriptionsItem label="客户账号">{{ currentRow?.accountNo }}</ElDescriptionsItem>
        <ElDescriptionsItem label="客户名称">{{ currentRow?.customerName }}</ElDescriptionsItem>
        <ElDescriptionsItem label="客户类型">
          <ElTag :type="currentRow?.customerType === 'agent' ? 'success' : 'primary'">
            {{ currentRow?.customerType === 'agent' ? '代理商' : '企业客户' }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="联系电话">{{ currentRow?.phone }}</ElDescriptionsItem>
        <ElDescriptionsItem label="佣金总额"
          >¥{{ currentRow?.totalCommission.toFixed(2) }}</ElDescriptionsItem
        >
        <ElDescriptionsItem label="可提现金额">
          <span style="color: var(--el-color-success)">
            ¥{{ currentRow?.availableAmount.toFixed(2) }}
          </span>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="待入账金额">
          <span style="color: var(--el-color-warning)">
            ¥{{ currentRow?.pendingAmount.toFixed(2) }}
          </span>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="已提现金额"
          >¥{{ currentRow?.withdrawnAmount.toFixed(2) }}</ElDescriptionsItem
        >
        <ElDescriptionsItem label="提现次数">{{ currentRow?.withdrawCount }}</ElDescriptionsItem>
        <ElDescriptionsItem label="最后提现时间">{{
          currentRow?.lastWithdrawTime
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="注册时间">{{ currentRow?.createTime }}</ElDescriptionsItem>
        <ElDescriptionsItem label="备注" :span="2">{{
          currentRow?.remark || '无'
        }}</ElDescriptionsItem>
      </ElDescriptions>
    </ElDialog>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus'

  defineOptions({ name: 'CustomerAccount' })

  const searchForm = reactive({
    accountNo: '',
    customerName: '',
    customerType: ''
  })

  const pagination = reactive({
    page: 1,
    pageSize: 20,
    total: 100
  })

  const detailDialogVisible = ref(false)
  const currentRow = ref<any>(null)

  // 模拟表格数据
  const tableData = ref([
    {
      id: '1',
      accountNo: 'ACC20260001',
      customerName: '深圳市科技有限公司',
      customerType: 'agent',
      phone: '13800138000',
      totalCommission: 158900.5,
      availableAmount: 58900.5,
      pendingAmount: 50000.0,
      withdrawnAmount: 50000.0,
      withdrawCount: 12,
      lastWithdrawTime: '2026-01-08 15:00:00',
      createTime: '2025-06-01 10:00:00',
      remark: '优质代理商'
    },
    {
      id: '2',
      accountNo: 'ACC20260002',
      customerName: '广州智能设备公司',
      customerType: 'enterprise',
      phone: '13900139000',
      totalCommission: 89600.0,
      availableAmount: 35600.0,
      pendingAmount: 24000.0,
      withdrawnAmount: 30000.0,
      withdrawCount: 8,
      lastWithdrawTime: '2026-01-05 10:30:00',
      createTime: '2025-07-15 14:20:00',
      remark: ''
    },
    {
      id: '3',
      accountNo: 'ACC20260003',
      customerName: '北京物联网代理',
      customerType: 'agent',
      phone: '13700137000',
      totalCommission: 256700.0,
      availableAmount: 106700.0,
      pendingAmount: 80000.0,
      withdrawnAmount: 70000.0,
      withdrawCount: 15,
      lastWithdrawTime: '2026-01-09 09:15:00',
      createTime: '2025-05-10 09:00:00',
      remark: '金牌代理商'
    }
  ])

  const handleSearch = () => {
    ElMessage.success('查询成功')
  }

  const handleReset = () => {
    searchForm.accountNo = ''
    searchForm.customerName = ''
    searchForm.customerType = ''
    ElMessage.info('已重置')
  }

  const handleViewDetail = (row: any) => {
    currentRow.value = row
    detailDialogVisible.value = true
  }

  const handleViewFlow = (row: any) => {
    ElMessage.info(`查看 ${row.customerName} 的流水记录`)
  }

  const handleSizeChange = (size: number) => {
    pagination.pageSize = size
    ElMessage.info(`每页显示 ${size} 条`)
  }

  const handleCurrentChange = (page: number) => {
    pagination.page = page
    ElMessage.info(`当前第 ${page} 页`)
  }
</script>

<style lang="scss" scoped>
  .page-content {
    .search-form {
      margin-bottom: 20px;
    }
  }
</style>
