<template>

  <div>
    <add-or-edit-api-scenarios-case
        :type="opsType"
        :apiProjectId="currentApiProjectId"
        :apiScenariosCaseData= "currentScenariosCaseData"
        v-if="showAddOrEditApiScenariosCase">

    </add-or-edit-api-scenarios-case>
    <div v-else>
      <el-row>
        <el-button @click="returnInterfacesProjectList">返回</el-button>

        <el-button type="primary" @click="openAddScenariosCase" >创建API场景用例</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_scenarios_case_name"
              label="API场景用例名称"
              sortable
              width="180">
          </el-table-column>
          <el-table-column
              prop="api_scenarios_case_describe"
              label="API场景描述"
              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="editScenariosCasePopup(scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  @click="CopyScenariosCasePopup(scope.row)">Copy</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="deleteScenariosCasePopup(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

</template>

<script>

import addOrEditApiScenariosCase from "./addOrEditApiScenariosCase";
import {
  deleteApiScenariosCaseRequest,
  getInterfacesCaseListRequest, postCopyScenariosCaseRequest
} from "../../../../api/apiAutomation/apiScenariosCase";


export default {
  name: "ApiScenariosCaseList",
  props: ['type', 'apiProjectId'],
  data() {
    return {
      tableData: [],
      interfacesProjectId: "",
      currentApiProjectId: 0,
      currentScenariosCaseData: {},
      currentPage: 1,
      size_page: 10,
      total_module: 0,
      showAddOrEditApiScenariosCase:false,

    }

  },
  methods: {
    // copy复制场景用例
    CopyScenariosCasePopup(data){
      let scenarios_case_data = {}
      scenarios_case_data.sid_id = data.id
      postCopyScenariosCaseRequest(scenarios_case_data).then(data => {
            if (true === data.data.success) {
              this.getInterfacesScenariosCaseFun()
              this.$message.success(data.data.data.message)
            } else {
              this.$message.error("获取接口失败")
            }
          }
      )

    },

    // 取消场景测试用例
    cancelSaveScenariosCase(){
      this.getInterfacesScenariosCaseFun()
      this.showAddOrEditApiScenariosCase = false
    },

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

    //获取该项目下所有场景测试用例列表
    getInterfacesScenariosCaseFun() {
      getInterfacesCaseListRequest(this.interfacesProjectId).then(data => {
        if (true === data.data.success) {
          this.tableData = data.data.data;

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

    //删除场景测试用例
    deleteScenariosCasePopup(data){

      this.$confirm('此操作将永久删除该场景测试用例, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
            deleteApiScenariosCaseRequest(data.id).then(data => {
                  if (true === data.data.success) {
                    this.getInterfacesScenariosCaseFun()
                    this.$message.success("删除测试用例成功")
                  } else {
                    this.$message.error("获取接口失败")
                  }
                }
            )
          }
      ).catch(() => {
            this.$message({
                  type: 'info',
                  message: '已取消删除'
                }
            );
          }
      );

    },

    // 编辑场景测试用例
    editScenariosCasePopup(data){
      this.opsType = 'edit';
      this.currentApiProjectId= this.apiProjectId
      this.currentApiScenariosCaseId = data.id;
      this.currentScenariosCaseData = data;
      console.log(this.currentScenariosCaseData)
      this.showAddOrEditApiScenariosCase = true

    },


    // 创建场景测试用例
    openAddScenariosCase(){
      this.opsType = 'add';
      this.currentApiProjectId= this.apiProjectId
      this.currentApiTestCaseId = 0;
      this.currentApiTestCaseData = {};
      this.showAddOrEditApiScenariosCase = true
    },



  },
  components: {
    'add-or-edit-api-scenarios-case': addOrEditApiScenariosCase
  },
  created() {
    if ('enter'=== this.type){
      this.interfacesProjectId = this.apiProjectId
      this.getInterfacesScenariosCaseFun()
    }



  }
}
</script>

<style scoped>

</style>