<template>
  <div class="report">
    <div class="header">
      <div class="search">
        <el-input v-model="serachForm.performanceName" placeholder="根据名称搜索"></el-input>
        <el-button type="text" style="margin-left: 10px;" @click="serachList">高级搜索</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="data">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="名称" align="center" sortable width="150" />
        <el-table-column prop="createBy" label="创建人" align="center" width="150" sortable />
        <el-table-column prop="concurrentThreads" label="并发数" align="center" width="150" sortable />
        <el-table-column prop="tps" label="TPS" align="center" width="150" sortable />
        <el-table-column prop="startTime" label="开始时间" align="center" sortable />
        <el-table-column prop="endTime" label="结束时间" align="center" sortable />
        <el-table-column prop="triggerType" label="触发方式" align="center" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.triggerType === 1">按持续时间</div>
            <div v-else>按迭代次数</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" width="150" sortable>
          <template slot-scope="scope">
            <div v-if="scope.row.triggerType === 1">开启</div>
            <div v-else>关闭</div>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" align="center" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-view" @click="hadleClickDetail(scope.row)">查看</el-button>
            <el-button type="text" icon="el-icon-delete" style="color: red;"
              @click="hadleClickDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-size="serachForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
      </div>
    </div>
  </div>
</template>

<script>
import { getReportList, deleteReport } from '../../../api/performance/report';

export default {
  name: "Report",
  data() {
    return {
      serachForm: {
        pageNum: 1,
        pageSize: 10,
        performanceName: '', // 名称
      },
      total: 0,
      data: [],
    }
  },
  mounted() {
    this.getReportListData()
  },
  methods: {
    // 查看
    hadleClickDetail(val) {
      this.$tab.openPage("报告详情", "/performance/report/detail", { id: val.id });
    },
    // 删除
    hadleClickDelete(val) {
      deleteReport(val.id).then(res => {
        if (res.code === 200) {
          this.$message({ message: '删除成功', type: 'success' })
          this.getReportListData()
        }
      })
    },
    // 获取列表数据
    getReportListData() {
      getReportList(this.serachForm).then(res => {
        if (res.code === 200) {
          this.data = res.rows
          this.total = res.total
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      this.serachForm.pageSize = val;
      this.getReportListData();
    },
    handleCurrentChange(val) {
      this.serachForm.pageNum = val;
      this.getReportListData();
    },
    serachList() {
      this.getReportListData()
    },
  }

}
</script>



<style scoped lang="scss">
.report {
  padding: 20px;

  .header {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
  }

  .search {
    display: flex;
  }

  .page {
    padding: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
