<template>
  <div class="testData">
    <el-form :inline="true" size="small" :model="searchForm" ref="searchForm" class="demo-form-inline">
      <el-form-item label="测试名称">
        <el-input v-model="searchForm.name" name="searchForm.name" placeholder="请输入测试名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="init">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="测试名称" prop="infoName" align="center"></el-table-column>
      <el-table-column label="测试订购" prop="orderInfo" align="center"></el-table-column>
      <el-table-column label="分组名称" prop="name" align="center"></el-table-column>
      <el-table-column label="分组描述" prop="content" align="center"></el-table-column>
      <el-table-column label="分流比例" prop="flowPercent" align="center"></el-table-column>
      <el-table-column label="分组订购" prop="orderGroup" align="center"></el-table-column>
    </el-table>
    <el-pagination class="mt10" v-show="total>0" background layout="total, sizes, prev, pager, next, jumper" :total="total" :current-page="searchForm.pageNo" :page-size="searchForm.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>

<script>
import { testData } from './ABtestApi'
export default {
  name: "testData",
  data () {
    return {
      //  搜索相关内容
      searchForm: {
        name: "",
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      // 表格数据
      loading: true,
      tableData: [],
    };
  },
  mounted () {
    this.init();
  },
  methods: {
    init () {
      this.loading = true
      testData(this.searchForm).then((res) => {
        console.log(res)
        this.loading = false
        this.tableData = res.data;
        this.searchForm.totalResult = res.data.total;
      });
    },
    // 重置
    reset () {
      this.searchForm = {
        name: "",
        pageNo: 1,
        pageSize: 10,
      };
      this.init();
    },
    // 列表选择每页数量
    handleSizeChange (val) {
      this.searchForm.pageNo = 1
      this.searchForm.pageSize = val
      this.init();
    },
    // 列表选择当前页
    handleCurrentChange (val) {
      this.searchForm.pageNo = val
      this.init();
    },
  }
}
</script>

<style lang="scss">
.testData {
  padding: 20px;
}
</style>
