<template>
  <div>
    <add-or-edit-api-test-plan
        :type="opsType"
        :apiManagementId="current_api_management_id"
        :apiTestPlanData="currentApiTestPlanData"
        :apiTestPlanId="currentApiTestPlanId"
        v-if="showAddOrEditApiTestPlan"
    >
    </add-or-edit-api-test-plan>
    <api-test-plan-result
        :apiTestPlanId="currentApiTestPlanId"
        :apiTestPlanData="currentApiTestPlanData"
        v-else-if="showApiTestPlanResult">
    </api-test-plan-result>

    <div v-else>
      <el-row>
        <el-button @click="returnInterfacesProjectList">返回</el-button>

        <el-button type="primary" @click="openAddApiTestPlan" >创建API测试计划</el-button>
        <el-button @click="getApiTestPlanFun" >刷新</el-button>

      </el-row>
      <div>
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="id"
              label="id"
              sortable
              width="180">
          </el-table-column>
          <el-table-column
              prop="api_test_plan_name"
              label="API测试计划名称"
              sortable
              width="180">
          </el-table-column>
          <el-table-column
              prop="api_test_plan_describe"
              label="API测试计划描述"
              width="180">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态"
              width="180">
          </el-table-column>
          <el-table-column
              prop="update_time"
              label="更新时间"
              width="180">
          </el-table-column>

          <el-table-column
              prop="create_time"
              label="创建时间"
              width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="openEditApiTestPlan(scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="warning"
                  @click="suspendedApiTestPlan(scope.row)">暂停</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="performApiTestPlan(scope.row)">执行</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="reportApiTestPlan(scope.row)">查看报告</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="deleteApiTestPlan(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

</template>

<script>
import addOrEditApiTestPlan from "../apiTestPlan/addOrEditApiTestPlan";
import apiTestPlanResult from "./apiTestPlanResult";
import {
  deleteSingleApiTestPlanRequest,
  getApiTestPlanRequest, postPerformApiPlanRequest,
  suspendedApiTestPlanRequest
} from "../../../../api/apiAutomation/apiTestPlan";

export default {
  name: "apiTestPlanList",
  props: ['type', 'apiProjectId'],
  data() {
    return {
      tableData: [],
      interfacesProjectId: "",
      currentApiProjectId: 0,
      current_api_management_id: 0,
      currentApiTestPlanData: {},
      currentPage: 1,
      size_page: 10,
      total_module: 0,
      showAddOrEditApiScenariosCase:false,
      showAddOrEditApiTestPlan: false,
      showApiTestPlanResult: false,
      apiTestPlanId: 0,
      currentApiTestPlanId: 0,

    }

  },
  methods: {

    // 查看测试计划报告
    reportApiTestPlan(data){
      this.apiTestPlanId = data.id;
      this.currentApiTestPlanData = data;
      this.showApiTestPlanResult = true

    },

    // 执行测试任务
    performApiTestPlan(data){

      this.apiTestPlanId = data.id
      postPerformApiPlanRequest(this.apiTestPlanId).then(data => {
        if (true === data.data.success){
          this.getApiTestPlanFun()
          this.$message.success("执行测试计划成功")
        }
        else if(10200 === data.data.error.code.status){
          this.$message.error("当前有API测试计划正在执行！")

        }
        else {
          this.$message.error("执行API测试任务失败")
        }
      })
    },

    // 暂停api测试计划
    suspendedApiTestPlan(data){
      let req = {
        "api_test_plan_id": data.id
      }
      suspendedApiTestPlanRequest(req).then(data =>{
        if (true === data.data.success){
          this.getApiTestPlanFun()
          this.$message.success("执行测试任务成功")
        }

      })
    },

    // 删除测试计划
    deleteApiTestPlan(data){
      this.$confirm('此操作将永久删除该测试计划, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.apiTestPlanId = data.id
        deleteSingleApiTestPlanRequest(this.apiTestPlanId).then(data => {
          if (true === data.data.success){
            this.getApiTestPlanFun()
            this.$message.success("删除API测试任务成功")
          }
          else {
            this.$message.error("删除API测试任务失败")
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },

    // 取消测试计划
    cancelSaveTestPlan(){
      this.showAddOrEditApiTestPlan = false
      this.getApiTestPlanFun()

    },

    // 返回API项目列表
    returnInterfacesProjectList(){
      this.$parent.$parent.apiInterfacesProjectList();
    },

    // 返回测试计划列表
    returnApiPlanList(){
      this.showApiTestPlanResult = false
      this.getApiTestPlanFun()
    },

    //获取该项目下所有测试计划列表
    getApiTestPlanFun() {
      getApiTestPlanRequest(this.interfacesProjectId).then(data => {
        if (true === data.data.success) {
          this.tableData = data.data.data;

        } else {
          this.$message.error("获取接口失败")
        }
      })
    },

    // 编辑API测试计划
    openEditApiTestPlan(data){
      this.opsType = 'edit';
      this.currentApiTestPlanId = data.id;
      this.currentApiTestPlanData = data;
      this.current_api_management_id = this.apiProjectId
      this.showAddOrEditApiTestPlan = true
    },


    // 创建场景测试用例
    openAddApiTestPlan(){
      this.opsType = 'add';
      this.current_api_management_id= this.apiProjectId
      this.currentApiTestPlanData = {};
      this.showAddOrEditApiTestPlan = true
    },



  },

  components: {
    'add-or-edit-api-test-plan': addOrEditApiTestPlan,
    'api-test-plan-result' : apiTestPlanResult

  },

  created() {
    if ('enter'=== this.type){
      this.interfacesProjectId = this.apiProjectId
      this.getApiTestPlanFun()

    }
  }
}
</script>

<style scoped>

</style>