<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-button type="primary" plain icon="el-icon-refresh" size="mini" @click="getList">刷新</el-button></el-col></el-row>
    <el-table border v-loading="loading" :data="list">
      <el-table-column prop="id" label="测试ID" width="80"/>
      <el-table-column prop="testName" label="测试名称"/>
      <el-table-column prop="nodeCode" label="节点编码" width="120"/>
      <el-table-column prop="originalMessage" label="原始话术" show-overflow-tooltip/>
      <el-table-column prop="variantMessage" label="变体话术" show-overflow-tooltip/>
      <el-table-column prop="sampleCount" label="样本量" width="80"/>
      <el-table-column prop="controlRate" label="对照转化率" width="100"/>
      <el-table-column prop="variantRate" label="变体转化率" width="100"/>
      <el-table-column prop="winner" label="胜出" width="80"><template slot-scope="s"><el-tag v-if="s.row.winner" type="success" size="small">{{ s.row.winner }}</el-tag></template></el-table-column>
      <el-table-column label="操作" width="120"><template slot-scope="s"><el-button v-if="s.row.winner==='variant'" size="mini" type="primary" @click="apply(s.row)">应用变体</el-button></template></el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getActiveAbTests, applyAbTest } from '@/api/workflow/lobster-dashboard'
export default {
  data() { return { list:[], loading:false } },
  created() { this.getList() },
  methods: {
    async getList() { this.loading=true; try { const res = await getActiveAbTests(0); this.list = (res.data||res).tests || [] } catch(e){} this.loading=false },
    async apply(row) {
      try { await applyAbTest(0, row.id); this.$message.success('已应用'); this.getList() } catch(e) { this.$message.error('应用失败') }
    }
  }
}
</script>
