<template>
  <div class="app-container">
    <el-row :gutter="16" class="mb16">
      <el-col :span="6" v-for="card in overviewCards" :key="card.label">
        <el-card shadow="hover" class="overview-card">
          <div class="card-inner">
            <div class="card-icon" :style="{ background: card.bg }"><i :class="card.icon"></i></div>
            <div class="card-info">
              <span class="card-value">{{ card.value }}</span>
              <span class="card-label">{{ card.label }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-table border v-loading="loading" :data="list" size="small" style="width:100%">
      <el-table-column label="分公司名称" align="center" prop="tenantName" min-width="120" fixed="left" />
      <el-table-column label="外呼次数" align="center" prop="outboundCallCount" min-width="75" />
      <el-table-column label="语音分钟" align="center" prop="voiceCallMinutes" min-width="75" />
      <el-table-column label="短信量" align="center" prop="smsSentCount" min-width="65" />
      <el-table-column label="流量(GB)" align="center" prop="flowUsageGB" min-width="75" />
      <el-table-column label="个微用户" align="center" prop="wxUserCount" min-width="75" />
      <el-table-column label="CID加个微" align="center" prop="cidAddWxCount" min-width="80" />
      <el-table-column label="个微绑定" align="center" prop="wxAccountCount" min-width="75" />
      <el-table-column label="企微用户" align="center" prop="qwUserCount" min-width="75" />
      <el-table-column label="CID加企微" align="center" prop="cidAddQwCount" min-width="80" />
      <el-table-column label="企微绑定" align="center" prop="qwAccountCount" min-width="75" />
      <el-table-column label="SOP" align="center" prop="sopCount" min-width="55" />
      <el-table-column label="课程" align="center" prop="courseCount" min-width="55" />
      <el-table-column label="直播" align="center" prop="liveCount" min-width="55" />
      <el-table-column label="商品" align="center" prop="productCount" min-width="55" />
      <el-table-column label="工作流" align="center" prop="workflowCount" min-width="65" />
      <el-table-column label="销售账户" align="center" prop="salesAccountCount" min-width="75" />
      <el-table-column label="AI Token" align="center" prop="aiTokenUsed" min-width="90" />
      <el-table-column label="员工" align="center" prop="employeeCount" min-width="55" />
      <el-table-column label="活跃模块" align="center" prop="activeModuleCount" min-width="75">
        <template slot-scope="scope">
          <el-tag type="success" size="mini">{{ scope.row.activeModuleCount || 0 }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="消费总额" align="center" prop="totalConsumeAmount" width="110" fixed="right">
        <template slot-scope="scope">
          <span style="color:#1890ff;font-weight:bold">¥{{ scope.row.totalConsumeAmount || '0.00' }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import { listModuleUsage } from '@/api/company/moduleUsage'

export default {
  name: 'CompanyModuleUsage',
  data() {
    return {
      loading: false, list: [], total: 0,
      queryParams: { pageNum: 1, pageSize: 10 },
      overviewCards: [
        { label: '分公司总数', value: 0, icon: 'el-icon-office-building', bg: '#e6f7ff' },
        { label: '活跃模块总数', value: 0, icon: 'el-icon-data-line', bg: '#f6ffed' },
        { label: '消费总额', value: '¥0.00', icon: 'el-icon-wallet', bg: '#fff7e6' },
        { label: '外呼总次数', value: 0, icon: 'el-icon-phone', bg: '#f9f0ff' }
      ]
    }
  },
  created() { this.getList() },
  methods: {
    getList() {
      this.loading = true
      listModuleUsage(this.queryParams).then(res => {
        this.list = res.rows || []
        this.total = res.total || 0
        this.updateOverview(this.list)
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    updateOverview(list) {
      this.overviewCards[0].value = this.total
      this.overviewCards[1].value = list.reduce((s, r) => s + (r.activeModuleCount || 0), 0)
      this.overviewCards[2].value = '¥' + list.reduce((s, r) => s + (parseFloat(r.totalConsumeAmount) || 0), 0).toFixed(2)
      this.overviewCards[3].value = list.reduce((s, r) => s + (r.outboundCallCount || 0), 0)
    },
    handleQuery() { this.queryParams.pageNum = 1; this.getList() }
  }
}
</script>

<style scoped>
.overview-card { cursor: default; }
.card-inner { display: flex; align-items: center; }
.card-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 14px; font-size: 22px; color: #fff; }
.card-value { font-size: 22px; font-weight: bold; color: #333; display: block; }
.card-label { font-size: 12px; color: #999; }
.mb16 { margin-bottom: 16px; }
</style>
