<template>
  <div style="width: 98%;">
    <el-button @click=open_add_drawer type="primary" style="margin-bottom: 10px;">
      创建接口
    </el-button>
    <el-drawer
        title="接口测试"
        size="70%"
        :destroy-on-close = 'true'
        :wrapperClosable='false'
        :visible.sync="drawer"
    >
      <addOrEdit_interface
          :type="opsType"
          :interfaceId="currentApiInterfaceId"
          :serviceId = "service_id"
          :apiInterfaceCaseId="currentApiInterfaceCaseId"
          :cancelSaveInterface="cancelSaveInterface "
      >
      </addOrEdit_interface>
    </el-drawer>
    <el-table
        :data="page_data"
        style="width: 100%"
        border>
      <el-table-column
          prop="api_interfaces_case_name"
          label="接口名称"
          >
      </el-table-column>
      <el-table-column
          prop="api_method"
          label="请求方法"
          >
      </el-table-column>
      <el-table-column
          prop="api_test_case_url"
          label="URL"
          >
      </el-table-column>
      <el-table-column
          prop="update_time"
          label="更新时间"
          >
      </el-table-column>
      <el-table-column

          prop="ops"
          label="操作"
          >
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="open_edit_interface(scope.row)">编辑</el-button>
          <el-button
              size="mini"
              @click="open_copy_interface(scope.row)">copy</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="open_delete_interface(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-style">
      <el-pagination
          background
          v-if="0 !== page.total"
          :page-size="page.page_size"
          :current-page="page.current" @current-change="current_change"
          layout="total, prev, pager, next"
          :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import addOrEdit_interface from '../interface/addOrEdit_interface'
import {
  deleteSingleInterfaceCaseRequest,
  getApiInterfaceRequest,
  postApiInterfaceCaseCopyRequest, postJudgeAddCasesRequest
} from "../../../../api/apiAutomation/apiManagement";
import {getApiScenariosCaseRequest} from "../../../../api/apiAutomation/apiScenariosCase";


export default {
  name: "interface_list",
  props: ['interfaces', 'service_id', 'apiInterfaceId'],
  components: {
    addOrEdit_interface
  },
  data() {
    return {
      page: {
        total: 0,
        page_size: 10,
        current: 1,
      },
      currentApiInterfaceCaseId: 0,
      drawer: false,
      opsType: "",
      interfaces_case: "",
      api_method_type: "",
      currentApiInterfaceId: 0
    }
  },
  created() {
    this.page.total = this.interfaces.length;
    this.page.current = 1;
    this.currentApiInterfaceId = this.service_id
  },
  methods: {
    open_add_drawer() {
      let service_data = {}
      service_data.service_id=this.service_id
      console.log(service_data)

      // 判断 父节点 是否可创建用例（只有用例节点才可创建用例）
      postJudgeAddCasesRequest(service_data).then(data => {
        if (true === data.data.success){
          this.drawer = true
          this.opsType = 'add';

        }else {
          this.$message.error(data.data.error.message)
        }
      })

    },

    // Copy复制用例
    open_copy_interface(data){
      let case_data = {}

      case_data.case_id = data.id

      postApiInterfaceCaseCopyRequest(case_data).then(data => {
        if (true === data.data.success){
          this.$message.success(data.data.data.message)

          this.$parent.$parent.interface_service(this.service_id)
        }else {
          this.$message.error(data.data.message)
        }
      })



    },

    // 关闭创建/编辑弹窗
    cancelSaveInterface(){
      this.drawer = false;
    },

    open_edit_interface(data) {
      this.drawer = true
      this.opsType = 'edit';
      this.currentApiInterfaceCaseId = data.id
    },
    open_delete_interface(data) {
      this.$confirm('此操作将永久删除该接口, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        deleteSingleInterfaceCaseRequest(data.id).then(data => {
          if (true === data.data.success) {
            this.$parent.$parent.interface_service(this.service_id)

            this.$message.success("删除API测试用例成功")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    current_change(page) {
      this.page.current = page;
    },
  },
  mounted(){
  },
  computed: {
    page_data: function () {
      let start = (this.page.current - 1) * this.page.page_size;
      let end = this.page.total;
      if (this.page.total > this.page.page_size * this.page.current) {
        end = this.page.page_size * this.page.current;
      } else {
        end = this.page.total;
      }

      let ret = [];
      for (let i = start; i < end; i++) {

        if (1 === this.interfaces[i].api_method){
          this.interfaces[i].api_method = "GET"
        }else if (2 === this.interfaces[i].api_method){
          this.interfaces[i].api_method = "POST"

        }
        else if (3 === this.interfaces[i].api_method){
          this.interfaces[i].api_method = "PUT"
        }
        else if (4 === this.interfaces[i].api_method){
          this.interfaces[i].api_method = "DELETE"
        }else if (5 === this.interfaces[i].api_method){
          this.interfaces[i].api_method = "PATCH"
        }
        ret.push(this.interfaces[i]);
      }
      return ret;
    }
  },
  watch: {
    interfaces: function () {
      this.page.total = this.interfaces.length;
      this.page.current = 1;
    }
  },
}
</script>

<style scoped>
.page-style {
  text-align: right;
}
.el-drawer__body {
  overflow: auto;
}
.el-drawer__container ::-webkit-scrollbar {
  display: none;
}
</style>
