<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h3 style="font-size: 20px;color: #000000">测试报告</h3>
    </div>
    <div v-show="total <= 0" class="button-new">
      <el-button icon="el-icon-plus" type="primary" size="medium" @click="addReportVue">
        新建报告
      </el-button>
    </div>
    <div v-show="total > 0">
      <div class="button-right">
        <el-button icon="el-icon-plus" type="primary" size="medium" @click="addReportVue">
          新建报告
        </el-button>
      </div>
      <el-tabs style="margin-top: 10px;">
        <el-Table v-loading="loading" :data="list">
          <el-table-column prop="name" label="测试报告名称" align="center"/>
          <el-table-column prop="result" label="测试结果" align="center">
            <template #default="{ row }">
              <dict-tag :options="dict.type.test_result" :value="row.result"/>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="测试阶段" align="center">
            <template #default="{ row }">
              <dict-tag :options="dict.type.test_type" :value="row.type"/>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="发送状态" align="center">
            <template #default="{ row }">
              <dict-tag :options="dict.type.report_send_status" :value="row.status"/>
            </template>
          </el-table-column>
          <el-table-column prop="updateBy" label="最后更新人" align="center"/>
          <el-table-column prop="updateTime" label="最后更新时间" align="center"/>
        </el-Table>
      </el-tabs>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <el-dialog :title="title" :visible.sync="addOpen" width="40%">
      <el-form ref="form" :rules="rules" :model="form" label-width="110px" label-position="right">
        <el-form-item label="报告名称:" prop="name">
          <el-input v-model="form.name" placeholder="请输入报告名称"></el-input>
        </el-form-item>
        <el-form-item label="测试阶段:" prop="type">
          <el-select v-model="form.type" placeholder="请选择测试阶段" clearable>
            <simple-options :options="dict.type.test_type"/>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addOpen = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import SimpleOptions from "@/components/FormItem/option/SimpleOptions.vue";
import {addTestReport, getTestReportList} from "@/api/test/testPlan";

export default {
  name: 'caseReport',
  components: {SimpleOptions},
  dicts: ['test_type','test_result','report_send_status'],
  props: {
    planId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      title: '',
      list: [],
      total: 0,
      addOpen: false,
      loading: false,
      submitLoading: false,
      form: {
        name: '',
        type: '',
        planId: '',
      },
      queryParams:  {
        planId: '',
        pageNum: 1,
        pageSize: 10,
      },
      rules: {
        name: [{required: true, message: '请输入报告名称', trigger: 'blur'}],
        type: [{required: true, message: '请选择测试阶段', trigger: 'blur'}]
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.queryParams.planId = this.planId
      getTestReportList(this.queryParams.planId).then(res => {
          this.list = res.rows
          this.total = res.total
          this.loading = false
      })
    },
    addReportVue() {
      this.title = '新建报告'
      this.addOpen = true
      this.reset()
    },
    // 表单重置
    reset() {
      const form = {}
      Object.keys(this.form).forEach((key) => {
        form[key] = ''
      })
      this.form = form
      this.resetForm('form')
    },
    submitForm() {
      const form = {
        ...this.form,
        planId: this.planId,
      }
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        addTestReport(form)
        .then(() => {
          this.$message.success('新建成功')
          this.addOpen = false
          this.getList()
        })
        .catch(() => {
          this.$message.error('新建失败')
        })
        .finally(() => {
          this.submitLoading = false
        })
      })
    },
  },
}
</script>
<style scoped lang="scss">
.app-container {
  .page-header {
    margin-bottom: 20px;
  }
}

.button-new {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 200px;
}

.button-right {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>
