<template>
  <div class="app-container">
    <el-row :gutter="20" style="margin-bottom:20px">
      <el-col :span="6">
        <el-card shadow="hover">
          <div slot="header">账户余额</div>
          <div class="balance-value">{{ wallet.balanceAmount || '0.00' }} 元</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div slot="header">累计充值</div>
          <div class="balance-value">{{ wallet.totalRecharge || '0.00' }} 元</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div slot="header">累计消费</div>
          <div class="balance-value">{{ wallet.totalCost || '0.00' }} 元</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div slot="header">计费模式</div>
          <div class="balance-value">{{ billingModeText }}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-tabs v-model="activeTab" @tab-click="handleTabChange">
      <el-tab-pane label="消费明细" name="details">
        <el-table :data="detailList" border style="width:100%">
          <el-table-column prop="eventType" label="事件类型" width="120" />
          <el-table-column prop="subType" label="子类型" width="120" />
          <el-table-column prop="unitPrice" label="单价" width="100" />
          <el-table-column prop="usageValue" label="用量" width="100" />
          <el-table-column prop="chargeValue" label="计费量" width="100" />
          <el-table-column prop="amount" label="金额" width="100" />
          <el-table-column prop="billingMode" label="计费模式" width="100" />
          <el-table-column prop="occurredAt" label="发生时间" width="160" />
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-sizes="[10, 20, 50]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="pageInfo.total"
          style="margin-top:15px;text-align:right"
        />
      </el-tab-pane>

      <el-tab-pane label="余额变动" name="balance">
        <el-table :data="balanceList" border style="width:100%">
          <el-table-column prop="consumeType" label="消费类型" width="120" />
          <el-table-column prop="amount" label="金额" width="120" />
          <el-table-column prop="beforeBalance" label="变动前余额" width="120" />
          <el-table-column prop="afterBalance" label="变动后余额" width="120" />
          <el-table-column prop="description" label="描述" />
          <el-table-column prop="consumeTime" label="时间" width="160" />
        </el-table>
        <el-pagination
          @size-change="handleBalanceSizeChange"
          @current-change="handleBalanceCurrentChange"
          :current-page="balancePageInfo.pageNum"
          :page-sizes="[10, 20, 50]"
          :page-size="balancePageInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="balancePageInfo.total"
          style="margin-top:15px;text-align:right"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getMyWallet, getMyBillingDetails, getMyConsumeRecords, getMyBalance } from '@/api/billing/wallet'

export default {
  name: 'CompanyWallet',
  data() {
    return {
      activeTab: 'details',
      wallet: {
        balanceAmount: '0.00',
        totalRecharge: '0.00',
        totalCost: '0.00'
      },
      billingMode: '',
      detailList: [],
      balanceList: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      balancePageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
    billingModeText() {
      if (this.billingMode === 'PREPAID') return '预付费'
      if (this.billingMode === 'POSTPAID') return '后付费'
      return this.billingMode || '未设置'
    }
  },
  created() {
    this.loadWallet()
    this.loadDetails()
  },
  methods: {
    async loadWallet() {
      try {
        const res = await getMyWallet()
        if (res.data) {
          this.wallet = res.data
          this.billingMode = res.data.billingMode || ''
        }
      } catch (e) {
        const balRes = await getMyBalance()
        if (balRes.data) {
          this.wallet = {
            balanceAmount: balRes.data.totalBalance || '0.00',
            totalRecharge: balRes.data.totalRecharge || '0.00',
            totalCost: balRes.data.totalConsume || '0.00'
          }
        }
      }
    },
    async loadDetails() {
      const res = await getMyBillingDetails({
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize
      })
      this.detailList = res.rows || res.data || []
      this.pageInfo.total = res.total || 0
    },
    async loadBalanceList() {
      const res = await getMyConsumeRecords({
        pageNum: this.balancePageInfo.pageNum,
        pageSize: this.balancePageInfo.pageSize
      })
      this.balanceList = res.rows || res.data || []
      this.balancePageInfo.total = res.total || 0
    },
    handleTabChange(tab) {
      if (tab.name === 'balance' && this.balanceList.length === 0) {
        this.loadBalanceList()
      }
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      this.loadDetails()
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val
      this.loadDetails()
    },
    handleBalanceSizeChange(val) {
      this.balancePageInfo.pageSize = val
      this.loadBalanceList()
    },
    handleBalanceCurrentChange(val) {
      this.balancePageInfo.pageNum = val
      this.loadBalanceList()
    }
  }
}
</script>

<style scoped>
.balance-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  text-align: center;
  padding: 10px 0;
}
</style>
