<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> API场景用例
        </el-breadcrumb-item>
        <el-breadcrumb-item>API场景用例</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card class="box-card">
      <api-scenarios-case-list
          :type="opsType"
          :apiProjectId="currentApiProjectId"
          v-if="showApiScenariosCase">
      </api-scenarios-case-list>
      <div v-else>
        <el-table
            :data="tableData"
            border
            style="width: 30%">
          <el-table-column
              prop="api_management_name"
              label="项目名称"
              width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  @click="enterApiProject(scope.row)">进入</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </el-card>

  </div>
</template>

<script>
import {
  getApiScenariosCaseRequest,
  getInterfacesProjectListRequest
} from "../../../../api/apiAutomation/apiScenariosCase";
import ApiScenariosCaseList from './ApiScenariosCaseList';


export default {
  name: "ApiScenarioUseCase",
  data() {
    return {
      data: [],
      currentApiProjectId: "",
      opsType: 'enter',


      showApiScenariosCase: false,
      tableData: [],
      tabPosition: 'top',
      editableTabs: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },

  methods:{

    //进入API项目模块
    enterApiProject(data){

      this.apiProjectId = data.api_management_id;
      this.opsType = 'enter';
      this.currentApiProjectId = data.api_management_id;
      console.log( this.currentApiProjectId)
      this.showApiScenariosCase = true;
    },

    // 返回项目首页列表
    apiInterfacesProjectList() {

      this.showApiScenariosCase = false
      this.get_interfaces_project_list_fun();
    },


    // 获取接口用例的树形结构
    get_api_scenarios_case_fun(){
      getApiScenariosCaseRequest().then(data => {
        if (true === data.data.success){
          this.data = data.data.data
        }else {
          this.$message.error(data.data.message)
        }
      })
    },

    // 获取接口项目列表
    get_interfaces_project_list_fun(){
      getInterfacesProjectListRequest().then(data => {
        if (true === data.data.success){
          this.tableData = data.data.data
        }else {
          this.$message.error(data.data.message)
        }
      })
    }



  },
  components: {
    'api-scenarios-case-list': ApiScenariosCaseList
  },
  created() {
    // this.get_api_scenarios_case_fun();
    this.get_interfaces_project_list_fun();
  }
}
</script>

<style scoped>

</style>