<template>
  <div class="report">
    <div class="header">
      <div class="searchInput">
        <i class="el-icon-search"></i>
        <el-input class="input" v-model="searchForm.name" placeholder="根据名称搜索" @blur="searchList"></el-input>
      </div>
    </div>
    <div class="list">
      <el-table :data="reportList">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="50" align="center" />
        <el-table-column prop="name" label="名称" min-width="150" align="center" sortable />
        <el-table-column prop="reportType" label="报告类型" min-width="150" align="center" />
        <el-table-column prop="createBy" label="创建人" min-width="150" align="center" sortable />
        <el-table-column prop="createTime" label="创建时间" align="center" min-width="180" sortable />
        <el-table-column prop="updateTime" label="结束时间" align="center" min-width="180" sortable />
        <el-table-column prop="triggerMode" label="触发方式" min-width="150" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.triggerMode === '1'">手动</div>
            <div v-if="scope.row.triggerMode === '2'">批量执行</div>
            <div v-if="scope.row.triggerMode === '3'">定时任务</div>
            <div v-if="scope.row.triggerMode === '4'">API调用</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" min-width="150" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status === 1">Running</div>
            <div v-if="scope.row.status === 2">Error</div>
            <div v-if="scope.row.status === 3">Success</div>
            <div v-if="scope.row.status === 4">Stopped</div>
            <div v-if="scope.row.status === 5">Pending</div>
            <div v-if="scope.row.status === 6">Timeout</div>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" align="center" fixed="right" width="150px">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-view" @click="handleClickDetail(scope.row)"
              style="color: green;">查看</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>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </div>
  </div>
</template>

<script>
import { getTestReportList, deleteTestReport } from '../../../api/uiTest/testReport';

export default {
  name: "TestReport",
  data() {
    return {
      reportList: [],
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        name: null,
      },
      total: 0,
    }
  },
  mounted() {
    this.getReportListData()
  },
  methods: {
    // 获取报告列表
    getReportListData() {
      getTestReportList(this.searchForm).then(res => {
        if (res.code === 200) {
          this.reportList = res.rows
          this.total = res.total
        }
      })
    },
    // 搜索
    searchList() {
      this.getReportListData()
    },
    // 删除
    hadleClickDelete(val) {
      this.$modal.confirm('确认删除元素' + '？').then(() => {
        deleteTestReport(val.id).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("删除成功");
            this.getReportListData()
          } else {
            this.$modal.msgSuccess("删除失败");
          }
        })
      }).catch(() => { })
    },
    // 查看
    handleClickDetail(val) {
      this.$tab.openPage("测试报告详情", "/ui-test/report/detail", { id: val.id });
    },
    // 分页
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.getReportListData()
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val
      this.getReportListData()
    },
  }

}

</script>

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

  .header {
    display: flex;
    justify-content: flex-end;

    .searchInput {
      display: flex;
      align-items: center;
      border: 1px solid #DCDFE6;
      border-radius: 4px;
      padding: 0 10px;

      .input {
        width: 200px;
      }

      /* 去除 el-input 的边框 */
      ::v-deep .el-input__inner {
        border: none !important;
      }
    }
  }

  .list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
  }
}
</style>
