<template>
  <div class="app-container">
    <!-- Token系数设置 -->
    <el-card shadow="hover">
      <div slot="header"><span>Token系数设置</span></div>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="当前系数">{{ coefficientInfo.tokenCoefficient || '1.00' }}</el-descriptions-item>
        <el-descriptions-item label="说明">{{ coefficientInfo.description || '客户看到消耗量 = 实际Token数 × 系数' }}</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-form :model="coefForm" label-width="100px">
        <el-form-item label="新系数值">
          <el-input-number v-model="coefForm.coefficient" :min="0.01" :max="100" :step="0.1" :precision="2" />
          <span style="color:#909399;margin-left:10px">范围: 0.01 ~ 100</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleUpdateCoef" v-hasPermi="['workflow:lobster:edit']">更新系数</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 消费记录 -->
    <el-card shadow="hover" style="margin-top:16px">
      <div slot="header"><span>Token消费记录</span></div>
      <el-table border v-loading="loading" :data="records">
        <el-table-column label="ID" align="center" prop="id" width="60" />
        <el-table-column label="消费类型" align="center" prop="consumeType" width="100" />
        <el-table-column label="金额" align="center" prop="amount" width="100" />
        <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
        <el-table-column label="状态" align="center" prop="status" width="80" />
        <el-table-column label="消费时间" align="center" prop="consumeTime" width="160" />
      </el-table>
      <pagination v-show="recordTotal>0" :total="recordTotal" :page.sync="recordParams.page" :limit.sync="recordParams.size" @pagination="getRecords" />
    </el-card>
  </div>
</template>
<script>
import { getTokenCoefficient, updateTokenCoefficient, listBillingRecords } from '@/api/workflow/lobster'
export default {
  name: 'LobsterBilling',
  data() {
    return { loading: false, coefficientInfo: {}, coefForm: { coefficient: 1 }, records: [], recordTotal: 0,
      recordParams: { page: 1, size: 10 } }
  },
  created() { this.getCoefInfo(); this.getRecords() },
  methods: {
    getCoefInfo() { getTokenCoefficient().then(res => { this.coefficientInfo = res.data || {}; this.coefForm.coefficient = parseFloat(this.coefficientInfo.tokenCoefficient || 1) }) },
    getRecords() { this.loading = true; listBillingRecords(this.recordParams).then(res => { let d = res.data || {}; this.records = d.list || []; this.recordTotal = d.total || 0; this.loading = false }).catch(() => { this.loading = false }) },
    handleUpdateCoef() { this.$confirm('确定更新Token系数为 ' + this.coefForm.coefficient + ' 吗？', '提示', { type: 'warning' }).then(() => { updateTokenCoefficient({ coefficient: this.coefForm.coefficient }).then(res => { this.$message.success(res.msg || '更新成功'); this.getCoefInfo() }) }) }
  }
}
</script>
