<template>
  <div class="withdrawal-management">
    <!-- 提现账户信息卡片 -->
    <a-row :gutter="24" class="mb-6">

      <a-col :span="24">
        <a-card title="可提现金额">
          <div class="balance-info">
            <div class="balance-amount">
              <span class="amount">{{ formatCurrency(accountInfo.availableBalance) }}</span>
              <span class="currency">元</span>
            </div>
            <div class="balance-desc">
              当前可提现金额，提现将在1-3个工作日内到账
            </div>
            <a-button type="primary"  class="w-full mt-4" @click="showWithdrawalModal"
              :disabled="accountInfo.availableBalance <= 0">
              去提现
            </a-button>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 提现记录查询 -->
    <a-card title="提现记录" class="mb-6">
      <template #extra>

      </template>

      <!-- 查询条件 -->
      <a-form layout="inline" :model="searchParams" class="mb-4">
        <a-form-item label="提现单号">
          <a-input v-model:value="searchParams.orderNo" placeholder="请输入提现单号" @pressEnter="handleSearch" />
        </a-form-item>
        <a-form-item label="时间">
          <a-range-picker v-model:value="searchParams.dateRange" :format="dateFormat" @change="handleDateChange" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch">查询</a-button>
          <a-button @click="handleReset" class="ml-2">重置</a-button>
        </a-form-item>
      </a-form>

      <!-- 提现记录表格 -->
      <a-table :columns="columns" :data-source="withdrawalRecords" :pagination="pagination" @change="handleTableChange"
        :loading="loading" rowKey="id">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'amount'">
            <span class="amount-cell">{{ formatCurrency(record.amount) }}元</span>
          </template>

          <template v-else-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </a-tag>
          </template>

          <template v-else-if="column.key === 'createdAt'">
            {{ formatDate(record.createdAt) }}
          </template>

          <template v-else-if="column.key === 'completedAt'">
            {{ record.completedAt ? formatDate(record.completedAt) : '-' }}
          </template>

          <template v-else-if="column.key === 'actions'">
            <a-button type="link" @click="viewDetail(record)">查看详情</a-button>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 提现弹窗 -->
    <a-modal v-model:visible="withdrawalModal.visible" title="提现申请" @ok="handleWithdrawalSubmit"
      @cancel="handleWithdrawalCancel" :confirm-loading="withdrawalModal.confirming">
      <a-form ref="withdrawalFormRef" :model="withdrawalForm" :rules="withdrawalRules" layout="vertical">
        <a-form-item label="提现金额" name="amount">
          <a-input-number v-model:value="withdrawalForm.amount" placeholder="请输入提现金额" :min="1"
            :max="accountInfo.availableBalance" style="width: 100%"
            :formatter="value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/¥\s?|(,*)/g, '')" />
          <div class="amount-hint mt-2">
            <div>可提现金额: {{ formatCurrency(accountInfo.availableBalance) }}元</div>
            <div>单笔最低提现: 1元</div>
          </div>
        </a-form-item>

        <a-form-item label="提现到账账户" name="accountId">
          <a-select v-model:value="withdrawalForm.accountId" placeholder="请选择提现账户">
            <a-select-option :value="accountInfo.id">
              {{ accountInfo.bank }} ({{ accountInfo.number }})
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-alert v-if="withdrawalForm.amount"
          :message="`预计到账金额: ${formatCurrency(calculateActualAmount(withdrawalForm.amount))}元`" type="info" show-icon
          class="mb-4" />
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { getWithdrawList } from "@/apis/home"
// 账户信息
const accountInfo = reactive({
  id: '1',
  type: '银行账户',
  number: '6228 **** **** 5678',
  name: '张三',
  bank: '中国工商银行',
  availableBalance: 5000.00
})

// 提现记录查询参数
const searchParams = reactive({
  orderNo: '',
  account: undefined,
  status: undefined,
  dateRange: [dayjs().subtract(30, 'day'), dayjs()]
})

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: total => `共 ${total} 条记录`
})

// 表格列定义
const columns = [
  {
    title: '提现单号',
    dataIndex: 'orderNo',
    key: 'orderNo',
    width: 200
  },
  {
    title: '账户',
    key: 'account',
    width: 180,
    render: (_, record) => `${record.bank} (${record.accountNumber})`
  },
  {
    title: '提现金额',
    key: 'amount',
    width: 120,
    align: 'right'
  },
  {
    title: '手续费',
    dataIndex: 'fee',
    key: 'fee',
    width: 100,
    align: 'right',
    render: fee => fee ? `${fee}元` : '-'
  },
  {
    title: '状态',
    key: 'status',
    width: 100
  },
  {
    title: '申请时间',
    key: 'createdAt',
    width: 180
  },
  {
    title: '完成时间',
    key: 'completedAt',
    width: 180
  },
  {
    title: '操作',
    key: 'actions',
    width: 100,
    fixed: 'right'
  }
]

// 提现记录数据
const withdrawalRecords = ref([])
const loading = ref(false)
const accountOptions = ref([
  { value: '1', label: '工商银行(尾号5678)' },
  { value: '2', label: '建设银行(尾号1234)' }
])

// 提现弹窗
const withdrawalModal = reactive({
  visible: false,
  confirming: false
})

// 提现表单
const withdrawalFormRef = ref()
const withdrawalForm = reactive({
  amount: undefined,
  accountId: accountInfo.id
})

// 表单验证规则
const withdrawalRules = {
  amount: [
    { required: true, message: '请输入提现金额' },
    { type: 'number', min: 1, max: accountInfo.availableBalance, message: `提现金额需在1-${accountInfo.availableBalance}元之间` }
  ],
  accountId: [
    { required: true, message: '请选择提现账户' }
  ]
}

// 日期格式
const dateFormat = 'YYYY-MM-DD'

// 生命周期
onMounted(() => {
  const userInfoStr=localStorage.getItem("userInfo")
  if(userInfoStr){
    const userInfo = JSON.parse(userInfoStr);
    accountInfo.availableBalance=userInfo.balance
  }
  fetchWithdrawalRecords()
})

// 获取提现记录
const fetchWithdrawalRecords = async () => {
  loading.value = true
  console.log(searchParams)
  try {
    let params = {
      withdraw_number: searchParams.orderNo,
      page_num: pagination.current,
      page_size: pagination.pageSize,
      start_at: formatDate(searchParams.dateRange[0]),
      end_at: formatDate(searchParams.dateRange[1]),
    }
    const res = await getWithdrawList(params)
    console.log(res)
  } catch (error) {
    console.log(error)
    message.error('获取提现记录失败')
  } finally {
    loading.value = false
  }
}

// 表格分页变化
const handleTableChange = (page) => {
  pagination.current = page.current
  pagination.pageSize = page.pageSize
  fetchWithdrawalRecords()
}

// 查询
const handleSearch = () => {
  pagination.current = 1
  fetchWithdrawalRecords()
}

// 重置查询
const handleReset = () => {
  searchParams.orderNo = ''
  searchParams.account = undefined
  searchParams.status = undefined
  searchParams.dateRange = [dayjs().subtract(30, 'day'), dayjs()]
  handleSearch()
}

// 日期变化
const handleDateChange = () => {
  handleSearch()
}

// 显示提现弹窗
const showWithdrawalModal = () => {
  withdrawalModal.visible = true
}

// 处理提现提交
const handleWithdrawalSubmit = async () => {
  try {
    await withdrawalFormRef.value.validate()
    withdrawalModal.confirming = true

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    message.success('提现申请提交成功')

    // 更新账户余额
    accountInfo.availableBalance -= withdrawalForm.amount

    // 重置表单并关闭弹窗
    withdrawalFormRef.value.resetFields()
    withdrawalModal.visible = false

    // 刷新记录
    fetchWithdrawalRecords()
  } catch (error) {
    console.error('提现提交失败:', error)
  } finally {
    withdrawalModal.confirming = false
  }
}

// 处理提现取消
const handleWithdrawalCancel = () => {
  withdrawalFormRef.value.resetFields()
  withdrawalModal.visible = false
}

// 查看详情
const viewDetail = (record) => {
  message.info(`查看提现记录详情: ${record.orderNo}`)
}

// 计算实际到账金额
const calculateActualAmount = (amount) => {
  const fee = amount * 0.01 // 假设手续费1%
  return amount - fee
}

// 格式化货币
const formatCurrency = (amount) => {
  return amount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')
}

// 格式化日期
const formatDate = (dateString) => {
  return dayjs(dateString).format('YYYY-MM-DD')
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colors = {
    pending: 'orange',
    success: 'green',
    failed: 'red'
  }
  return colors[status] || 'default'
}

// 获取状态文本
const getStatusText = (status) => {
  const texts = {
    pending: '处理中',
    success: '成功',
    failed: '失败'
  }
  return texts[status] || status
}
</script>

<style scoped>
.withdrawal-management {
  padding: 20px;
}

.account-info .info-item {
  margin-bottom: 12px;
  font-size: 14px;
}

.account-info .label {
  color: #666;
  margin-right: 8px;
}

.account-info .value {
  color: #333;
  font-weight: 500;
}

.balance-info .balance-amount {
  text-align: center;
  margin-bottom: 8px;
}

.balance-info .amount {
  font-size: 32px;
  font-weight: bold;
  color: #1890ff;
}

.balance-info .currency {
  font-size: 18px;
  color: #666;
  margin-left: 4px;
}

.balance-info .balance-desc {
  color: #666;
  font-size: 12px;
  text-align: center;
  margin-bottom: 16px;
}

.amount-hint {
  color: #666;
  font-size: 12px;
}

.amount-hint div {
  margin-bottom: 4px;
}

.amount-cell {
  color: #1890ff;
  font-weight: 500;
}

.mb-4 {
  margin-bottom: 16px;
}

.mb-6 {
  margin-bottom: 24px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-4 {
  margin-top: 16px;
}

.ml-2 {
  margin-left: 8px;
}

.w-full {
  float: inline-end;
  width: 10%;
}
</style>