<template>
  <div class="receipt-page">
    <div class="card" aria-label="提现记录" tabindex="0">
      <div class="card-header">
        <h3 class="card-title">提现记录</h3>
      </div>

      <div v-if="loading" class="loading">
        <i class="el-icon-loading" aria-label="加载中" role="img"></i>
        加载中...
      </div>

      <div v-else>
        <div class="table-wrap">
          <el-table
            :data="rows"
            border
            stripe
            size="small"
            class="withdraw-table"
            :header-cell-style="{ textAlign: 'left' }"
            :cell-style="{ textAlign: 'left' }"
          >
          <el-table-column label="申请时间" width="140">
            <template #default="scope">{{ formatFullTime(scope.row.createTime) }}</template>
          </el-table-column>
          <el-table-column label="提现金额" width="70"  show-overflow-tooltip align="right">
            <template #default="scope">
              <span class="amount-red">
                <el-tooltip
                  v-if="formatAmount(scope.row.amount, scope.row.coin || scope.row.toSymbol || 'USDT').truncated"
                  :content="`-${formatAmount(scope.row.amount, scope.row.coin || scope.row.toSymbol || 'USDT').full}`"
                  placement="top"
                >
                  <span>
                    -{{ formatAmount(scope.row.amount, scope.row.coin || scope.row.toSymbol || 'USDT').text }}
                    <i class="el-icon-more amount-more"></i>
                  </span>
                </el-tooltip>
                <span v-else>
                  -{{ formatAmount(scope.row.amount, scope.row.coin || scope.row.toSymbol || 'USDT').text }}
                </span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="手续费" width="70"  show-overflow-tooltip align="right">
            <template #default="scope">
              <span class="mono">{{ formatAmount(scope.row.serviceCharge, scope.row.coin || scope.row.toSymbol || 'USDT').text }}</span>
            </template>
          </el-table-column>
          <el-table-column label="提现链" width="100" show-overflow-tooltip>
            <template #default="scope">{{ formatChain(scope.row.toChain || scope.row.chain) }}</template>
          </el-table-column>
          <el-table-column label="币种" width="80"  show-overflow-tooltip>
            <template #default="scope">{{ String(scope.row.coin || scope.row.toSymbol || '').toUpperCase() }}</template>
          </el-table-column>
          <el-table-column label="收款地址" min-width="320" show-overflow-tooltip>
            <template #default="scope">
              <el-tooltip :content="scope.row.toAddress" placement="top">
                <span class="mono-ellipsis">{{ scope.row.toAddress }}</span>
              </el-tooltip>
              <el-button type="text" size="mini" @click.stop="copy(scope.row.toAddress)">复制</el-button>
            </template>
          </el-table-column>
          <el-table-column label="交易HASH" width="300" show-overflow-tooltip>
            <template #default="scope">
              <el-tooltip :content="scope.row.txHash" placement="top">
                <span class="mono-ellipsis">{{ scope.row.txHash }}</span>
              </el-tooltip>
              <el-button type="text" size="mini" @click.stop="copy(scope.row.txHash)" v-if="scope.row.txHash">复制</el-button>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="90">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)" size="small">{{ getStatusText(scope.row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态更新时间" width="140">
            <template #default="scope">{{ formatFullTime(scope.row.updateTime) }}</template>
          </el-table-column>
          </el-table>
        </div>

        <div v-if="!rows.length" class="empty">
          <div class="empty-icon">🏧</div>
          <div class="empty-text">暂无提现记录</div>
        </div>

        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :current-page.sync="pageNum"
            :page-size="pageSize"
            :total="total"
            @current-change="fetchList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { balanceWithdrawListV2 } from '../../api/wallet'
import { truncateAmountByCoin } from '../../utils/amount'

export default {
  name: 'AccountWithdrawRecord',
  data() {
    return {
      loading: false,
      rows: [],
      pageNum: 1,
      pageSize: 20,
      total: 0
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    formatAmount(value, coin) {
      return truncateAmountByCoin(value, coin)
    },
    formatFullTime(time) {
      if (!time) return ''
      try {
        return `${time.split('T')[0]} ${time.split('T')[1].split('.')[0]}`
      } catch (e) {
        return time
      }
    },
    formatChain(chain) {
      const map = { tron: 'Tron (TRC20)', ethereum: 'Ethereum (ERC20)', bsc: 'BSC (BEP20)', polygon: 'Polygon', ETH: 'ETH', TRON: 'TRON' }
      const k = typeof chain === 'string' ? chain.toLowerCase() : chain
      return map[k] || chain || '-'
    },
    getStatusType(status) {
      const map = { 0: 'danger', 1: 'success', 2: 'warning', 3: 'danger' }
      return map[status] || 'info'
    },
    getStatusText(status) {
      const map = { 0: '失败', 1: '成功', 2: '处理中', 3: '校验失败' }
      return map[status] || '未知'
    },
    copy(text) {
      if (!text) return
      try {
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard.writeText(text)
          this.$message.success('已复制')
          return
        }
      } catch (e) {}
      const area = document.createElement('textarea')
      area.value = text
      document.body.appendChild(area)
      area.select()
      try { document.execCommand('copy'); this.$message.success('已复制') } catch (e) {}
      document.body.removeChild(area)
    },
    async fetchList() {
      this.loading = true
      try {
        const res = await balanceWithdrawListV2({ pageNum: this.pageNum, pageSize: this.pageSize })
        const data = res && (res.data || res)
        const list = Array.isArray(data && data.rows) ? data.rows : (Array.isArray(data) ? data : [])
        this.rows = list
        const total = Number(data && (data.total != null ? data.total : res.total))
        this.total = Number.isFinite(total) ? total : 0
      } catch (e) {
        this.rows = []
        this.total = 0
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.receipt-page { margin: 0; box-sizing: border-box; overflow-x: hidden; max-width: 100%; }
.card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.04); overflow-x: hidden; }
:deep(.withdraw-table) { width: 100%; }
:deep(.withdraw-table .el-table__header-wrapper table),
:deep(.withdraw-table .el-table__body-wrapper table) { table-layout: fixed; width: 100%; }
.table-wrap { width: 100%; overflow-x: hidden; }
:deep(.withdraw-table .cell) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.card-title { margin: 0; font-size: 18px; font-weight: 700; color: #2c3e50; }
.loading { text-align: center; color: #666; padding: 40px 0; }
.empty { text-align: center; color: #999; padding: 40px 0; }
.empty-icon { font-size: 48px; margin-bottom: 8px; }
.amount-more { font-size: 12px; color: #94a3b8; margin-left: 4px; }
.amount-red { color: #ef4444; font-weight: 700; }
.mono-ellipsis { font-family: "Monaco", "Menlo", monospace; max-width: 360px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.pagination { display: flex; justify-content: flex-end; margin-top: 8px; }
</style>

