<template>
  <div>
    <el-button type="primary" @click="randomDataDialog = true"
               style="margin-left: 20px;">随机数据变量</el-button>
    <el-button style="float: right;" @click="cancelInterface">取消</el-button>
    <el-button style="float: right;" type="primary" @click="saveApiTestCase">保存</el-button>
    <el-dialog title="随机数据变量"
               :visible.sync="randomDataDialog"
               :modal="false">
      <el-table :data="randomDataTable">
        <el-table-column property="randomDataName" label="随机数据变量名称" width="200"></el-table-column>
        <el-table-column property="randomDataDescribe" label="随机数据变量介绍" width="200"></el-table-column>
      </el-table>
    </el-dialog>
    <el-form ref="apiTestCaseFormRef"
             :model="apiTestCaseForm"
             label-width="120px"
             size="medium"
             :inline="true"
             :rules="rules"
             style="margin-top: 20px; "
    >
      <el-form-item label="API测试用例" prop="api_interfaces_case_name">
        <el-input v-model="apiTestCaseForm.api_interfaces_case_name"  class="api_interfaces_case_name"></el-input>
      </el-form-item>
      <el-form-item label="API接口文档地址">
        <el-input v-model="apiTestCaseForm.api_documentation"  class="api_documentation"></el-input>
      </el-form-item>
      <el-form-item label="域名" prop="api_environment">
        <el-select  v-model="api_environment"  placeholder="请选择域名"  id="selectApiEnvironment" @change="getSelectApiEnvironmentFun">
          <el-option v-for="item in environmentSelect" :key="item.id" :value="item.id" :label="item.api_environment_name">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="请求地址" prop='api_url'>
        <el-input placeholder="请输入请求地址" v-model="apiTestCaseForm.api_url" class="input-with-select">
          <el-select v-model="api_method" slot="prepend" placeholder="请选择" class="address">
            <el-option v-for="option in api_method_options" :key="option.value" :label="option.text" :value="option.value">
            </el-option>
          </el-select>
        </el-input>
        <el-button @click="SendRequest">发送请求</el-button>
      </el-form-item>
      <el-form-item>
        <el-tabs :tab-position="tabPosition" style="height: 300px;width: 1200px;margin-left: 35px;">
          <el-tab-pane label="Header请求头" style="width: 500px;">
            <div class="codeEditBox">
              <editor v-model="apiTestCaseForm.api_headers" @init="editorInit" @input='codeChange' lang="json" :options="editorOptions" theme="eclipse"></editor>
            </div>
<!--            <el-input type="textarea" placeholder="请输入JSON格式参数" :rows="10" v-model="apiTestCaseForm.api_headers" style="min-height: 33px;" resize="none" class="css_header"></el-input>-->
          </el-tab-pane>
          <el-tab-pane label="Params">
            <div>
              <el-table
                  :data="apiParameterData"
                  style="width: 80%"
                  border
                  height="250"
              >
                <el-table-column prop="api_parameter_name" label="参数名称">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.api_parameter_name" placeholder="" controls-position="right"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="api_must_parameter" label="必填">
                  <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.api_must_parameter"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="true"
                        inactive-value="false"
                        @change="api_must_switch($event,scope.row.api_must_parameter)"
                    >
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column prop="api_parameter_value" label="参数值">
                  <template slot-scope="scope" >
                    <el-input v-model="scope.row.api_parameter_value" placeholder="" controls-position="right" ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="api_field_describe" label="字段描述">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.api_field_describe" placeholder="" controls-position="right"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button @click="AddParameterRow">添加行</el-button>
                    <el-button size="mini" type="danger" @click="DeleteParameter(scope.$index, apiParameterData)" style="width: 68px;padding-top: 9px;padding-bottom: 9px;margin-left: 10px;">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="Body" style="width: 500px;">
            <div>
              <el-radio-group v-model="apiTestCaseForm.api_parameter_types"
                              @change='radioChange($event, apiTestCaseForm.api_parameter_types)'>
                <el-radio :label="1" value="1">x-www-form-urlencoded</el-radio>
                <el-radio :label="2" value="2">JSON</el-radio>
              </el-radio-group>
            </div>
            <div class="codeEditBox">
              <editor v-model="apiTestCaseForm.api_parameter_body" @init="editorInit" @input='codeChange' lang="json" :options="editorOptions" theme="eclipse"></editor>
            </div>
          </el-tab-pane>
          <el-tab-pane label="断言">
            <div>
              <el-table
                  :data="assertionsData"
                  style="width: 80%">

                <el-table-column prop="api_assert_type" label="断言类型">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.api_assert_type" placeholder="请选择">
                      <el-option v-for="api_assert_type_option in api_assert_type_options" :key="api_assert_type_option.value" :label="api_assert_type_option.text" :value="api_assert_type_option.value">
                      </el-option>
                    </el-select>
                  </template>

                </el-table-column>
                <el-table-column label="数据库">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.database_options" placeholder="请选择数据库"  @change="getSelectDatabaseFun">
                      <el-option v-for="database_option in database_options" :key="database_option.id" :label="database_option.api_database_title" :value="database_option.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="database_sql" label="数据库语句">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.database_sql" controls-position="right" ></el-input>
                  </template>
                </el-table-column>

                <el-table-column prop="api_assert_text" label="断言(Value)">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.api_assert_text" controls-position="right" ></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="参数提取">
            <div>
              <el-table
                  :data="apiParameterExtractionData"
                  border
                  height="250"
              >
                <el-table-column prop="api_value_variable" label="提取表达式" width="500">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.api_value_variable" placeholder="请用 英文‘点’逐层 '.' " controls-position="right" style="width: 453px" ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="api_key_variable" label="变量名称" >
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.api_key_variable" placeholder="请用  ${xxx}  命名" controls-position="right" style="width: 182px;" ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="api_variable_results" label="变量结果" width="250px">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.api_variable_results" placeholder="变量结果" controls-position="right" style="width: 200px" ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button @click="AddParameterExtractionRow" style="width: 84px;">添加行</el-button>
                    <el-button type="danger" @click="DeleteParameterExtraction(scope.$index, apiParameterExtractionData)" style="width: 84px;">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
    </el-form>

    <el-tabs v-if="api_result" style="height:100%;display:table; width: 1000px;margin-left: 35px;">
      <el-tab-pane label="请求相关数据" >
        <el-tabs :tab-position="tabPositionApiResult">
          <el-tab-pane label="接口基本信息">
            <el-descriptions title="接口基本信息" :column="2" border>
              <el-descriptions-item label="请求方式">
                <el-tag size="small" :type="api_method_result_type">{{api_method_result}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="请求URL" v-model="activeNames">{{requestsForm.requests_url}}</el-descriptions-item>
              <el-descriptions-item label="请求Header">
                <json-viewer :value="requestsForm.requests_headers" :expand-depth=5 copyable ></json-viewer>
              </el-descriptions-item>
              <el-descriptions-item label="请求Body">
                <json-viewer :value="requestsForm.requests_payload" :expand-depth=5 copyable ></json-viewer>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="响应信息-Response">
              <el-descriptions title="响应信息-Response" :column="2" border>
                <el-descriptions-item label="响应时间">
                  {{requestsForm.response_time}}
                </el-descriptions-item>
                <el-descriptions-item label="状态码" >
                  {{requestsForm.requests_status_code}}
                </el-descriptions-item>
                <el-descriptions-item label="响应结果">
                  <json-viewer :value="requestsForm.response_message" :expand-depth=10 copyable ></json-viewer>
                </el-descriptions-item>
              </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="断言">
            <el-descriptions title="断言信息" :column="2" border>
              <el-descriptions-item label="断言结果" v-model="activeNames">
                {{requestsForm.api_assert}}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <el-tab-pane label="参数提取信息">
            <el-descriptions title="参数提取" :column="2" border>
              <el-descriptions-item label="参数提取" v-model="activeNames">
                <json-viewer :value="requestsForm.api_variable_results" :expand-depth=5></json-viewer>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import {getDatabaseRequest} from "../../../../api/apiAutomation/apiDatabase";
import {getApiEnvironmentRequest} from "../../../../api/apiAutomation/apiEnvironment";
import Editor from 'vue2-ace-editor'
import "brace/theme/monokai";
import {
  debugInterfacesCaseRequest,
  getApiInterfaceCaseRequest,
  getApiInterfaceRequest, postYaPiInterfaceRequest,
  putApiInterfaceCaseRequest, updateSingleApiInterfaceCaseRequest
} from "../../../../api/apiAutomation/apiManagement";


export default {
  name: "addOrEdit_interface",
  // type 用来标识是编辑还是创建
  props:['type', 'serviceId', 'interfaceId', 'apiInterfaceCaseId'],
  components: {
    Editor
  },
  data() {
    return {
      editorOptions: {
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true, //启用基本自动完成
        enableSnippets: true, // 启用代码段
        enableLiveAutocompletion: true, //启用实时自动完成
        tabSize: 2, //标签大小
        fontSize: 14, //设置字号
        showPrintMargin: false //去除编辑器里的竖线

      },
      api_result: false,
      randomDataDialog: false,
      randomDataTable: [{
        randomDataName: '${random_name}',
        randomDataDescribe: '随机名字',
      }, {
        randomDataName: '${random_email}',
        randomDataDescribe: '随机email',
      }, {
        randomDataName: '${random_sfz}',
        randomDataDescribe: '随机身份证',
      }, {
        randomDataName: '${random_phone_number}',
        randomDataDescribe: '随机手机号',
      }, {
        randomDataName: '${random_address}',
        randomDataDescribe: '随机地址',
      }, {
        randomDataName: '${random_company}',
        randomDataDescribe: '随机公司名称',
      }, {
        randomDataName: '${random_number}',
        randomDataDescribe: '随机数',
      },  {
        randomDataName: '${random_city}',
        randomDataDescribe: '随机城市',
      }
      ],
      gridData: [],
      api_method_options: [
        { text: 'GET', value: 1 },
        { text: 'POST', value: 2 },
        { text: 'PUT', value: 3 },
        { text: 'DELETE', value: 4 },
        { text: 'PATCH', value: 5 },
      ],
      api_method: '',
      api_management_id: '',

      api_method_result: '',
      api_method_result_type: '',


      api_assert_type_options: [
        { text: '包含',
          value: 1
        },
        { text: '匹配',
          value: 2
        },
        { text: '数据库校验',
          value: 3
        },
        { text: '状态码',
          value: 4
        },
      ],
      database_options: [],

      api_environment: '',
      api_environment_options:[
        {
          api_environment_describe:'',
          api_environment_name: '',
          api_title: '',
          id: ''

        }
      ],

      requestsForm: {
        requests_url: "",
        requests_headers: "",
        requests_payload: "null",
        requests_status_code: "",
        response_message: "null",
        response_time: "",
        api_assert: "null",
        api_assert_type: "",
        api_variable_results: [
          {
            api_variable_results: ""

          }
        ],

      },


      apiTestCaseForm: {
        api_interfaces_case_name: "",
        api_documentation: "",
        api_url: "",
        api_parameter_types: 2,
        api_headers: "{\"Content-Type\": \"application/json\",\n" +
            "\"authorization\": \"Bearer ${scrm_token}\"\n" +
            "}",
        api_parameter_body: "{}",
        api_parameter: "{}",
        api_test_case_id: "",
      },
      tabPosition: 'top',
      tabPositionApiResult: 'left',
      environmentSelect: [],


      // 断言
      assertionsData:[
        {
          api_assert_type: 4,
          api_assert_text: "200",
          database_sql: '',
          database_options: '',

        }
      ],
      api_assert_text: '',

      apiParameterExtractionData:[
        {
          api_value_variable: "",
          api_key_variable: "",
          api_variable_results: ""

        }
      ],

      apiParameterData:[
        {
          api_parameter_name: "",
          api_must_parameter: "",
          api_parameter_value: "",
          api_field_describe: ""

        }
      ],
      activeNames: "",
      rules: {
        api_interfaces_case_name: [
          { required: true, message: '请输入测试用例名称', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
      }


    };
  },

  methods: {

    // 编辑内容改变时触发
    codeChange(val) {
    },
    editorInit() {
      require('brace/theme/eclipse')
      require('brace/ext/language_tools') //language extension prerequsite...
      require('brace/mode/yaml')
      require('brace/mode/json')
      require('brace/mode/less')
      require('brace/snippets/json')
      require('brace/mode/lua')
      require('brace/snippets/lua')
      require('brace/mode/javascript')
      require('brace/snippets/javascript')
    },

    radioChange(api_parameter_types){

    },

    saveApiTestCase() {
      if ('add' === this.type){
        this.addApiInterfaceTestCase()
      }else {
        this.editApiInterfaceTestCase()
      }
    },

    api_must_switch(index,api_must_parameter){

    },

    // 接口弹窗关
    cancelInterface(){
      this.$parent.$parent.cancelSaveInterface();
    },

    // 服务下的接口用例
    getApiInterfaceService() {
      getApiInterfaceRequest(this.serviceId).then(data => {
        if (true === data.data.success) {
          this.$parent.$parent.$parent.$parent.service_interfaces = data.data.data
        } else {
          this.$message.error('获取用例失败');
        }
      })
    },

    //添加Api测试用例
    addApiInterfaceTestCase(){
      let req = JSON.parse(JSON.stringify(this.apiTestCaseForm));
      req.api_method = this.api_method;
      req.api_assert_type = this.assertionsData[0].api_assert_type;
      req.api_assert_text = this.assertionsData[0].api_assert_text;
      req.database_sql = this.assertionsData[0].database_sql;
      req.dataBase_id = this.assertionsData[0].database_options;
      req.api_parameter_extraction = this.apiParameterExtractionData
      req.api_environment_id = this.api_environment
      req.api_management_id = this.serviceId
      req.api_parameter = this.apiParameterData

      this.$refs.apiTestCaseFormRef.validate((valid) => {
            if (valid) { // 代表校验通过
              putApiInterfaceCaseRequest(req).then(data => {
                if (true === data.data.success) {
                  this.$message.success("添加Api测试用例成功")
                  this.getApiInterfaceService()
                  this.$parent.$parent.cancelSaveInterface();


                } else {
                  this.$message.error(data.data.error.message)
                }
              })
            } else {
              //校验失败
              return false;
            }
          }
      );

    },




    //编辑Api测试用例
    editApiInterfaceTestCase(){
      let req = JSON.parse(JSON.stringify(this.apiTestCaseForm));
      req.api_method = this.api_method;
      req.api_assert_type = this.assertionsData[0].api_assert_type;
      req.api_assert_text = this.assertionsData[0].api_assert_text;
      req.api_assert_text = this.assertionsData[0].api_assert_text;
      req.database_sql = this.assertionsData[0].database_sql;
      req.dataBase_id = this.assertionsData[0].database_options;
      req.api_environment_id = this.api_environment
      req.api_management_id =  this.api_management_id
      req.api_parameter_extraction = this.apiParameterExtractionData
      req.api_parameter = this.apiParameterData
      this.$refs.apiTestCaseFormRef.validate((valid) => {
        if (valid) { // 代表校验通过
          updateSingleApiInterfaceCaseRequest(this.apiTestCaseForm.api_test_case_id, req).then(data => {
            if (true === data.data.success) {
              this.$message.success("编辑Api测试用例成功")
              this.getApiInterfaceService()
              this.$parent.$parent.cancelSaveInterface();
            } else {
              this.$message.error(data.data.error.message)
            }
          })
        } else {  //校验失败
          return false;
        }
      });
    },

    // 获取YAPI基础参数
    getSingleApiInterfaceCaseTestCaseYaPiFun() {
      let req = {
        serviceId: this.serviceId
      }
      console.log(req)
      postYaPiInterfaceRequest(req).then(data =>{

        if (true === data.data.success) {
          let apiTestCase = data.data.data[0];

          if (apiTestCase.yapi_api === 1){
          this.apiTestCaseForm = {...apiTestCase }
          this.api_method = data.data.data[0].api_method
          this.apiTestCaseForm.api_headers = JSON.stringify(data.data.data[0].api_headers, null, 2)

          this.apiTestCaseForm.api_parameter_body = JSON.stringify(data.data.data[0].api_parameter_body, null, 2)

          this.apiParameterData = data.data.data[0].api_parameter
          } else {
            console.log("无Yapi接口关联")
          }


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


          }
      )
    },


    // 获取单个API测试用例
    getSingleApiInterfaceCaseTestCaseFun() {
      getApiInterfaceCaseRequest(this.apiTestCaseForm.api_test_case_id).then(data => {
        if (true === data.data.success) {
          let apiTestCase = data.data.data;
          let api_parameter_extraction = data.data.data.api_parameter_extraction
          let api_parameter = data.data.data.api_parameter
          this.apiTestCaseForm = {...apiTestCase }
          this.api_method = data.data.data.api_method
          this.apiTestCaseForm.api_test_case_id = data.data.data.id
          if (0 === api_parameter.length){
            console.log(api_parameter.length)

          } else {
            this.apiParameterData = api_parameter
          }


          this.assertionsData = [
            {
              api_assert_type : apiTestCase.api_assert_type,
              api_assert_text : apiTestCase.api_assert_text,
              database_sql : apiTestCase.database_sql,
              database_options : apiTestCase.dataBase,


            }
          ]
          if (0 === api_parameter_extraction.length){
            console.log(api_parameter_extraction.length)

          } else {
            this.apiParameterExtractionData = JSON.parse(JSON.stringify(api_parameter_extraction));
          }

          this.database_id = apiTestCase.database
          this.database_sql = data.data.data.database_sql
          this.api_environment = data.data.data.api_environment
          this.api_management_id = data.data.data.api_management


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

    //获取数据库
    getSelectDatabaseFun(){
      getDatabaseRequest().then(data =>{
        if (true === data.data.success) {
          this.database_options = data.data.data;
        } else {
          this.$message.error("获取接口失败")
        }
      })


    },


    // 获取域名
    getSelectApiEnvironmentFun(){
      getApiEnvironmentRequest().then(data =>{
        if (true === data.data.success) {

          this.environmentSelect = data.data.data;

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


    },

    //添加参数提取行
    AddParameterExtractionRow(index, row){
      this.apiParameterExtractionData.push(
          {
            api_value_variable: "",
            api_key_variable: "",
            api_variable_results: ""
          }
      )

    },

    //添加参数行
    AddParameterRow(index, row){
      this.apiParameterData.push(
          {
            api_parameter_name: "",
            api_must_parameter: false,
            api_parameter_value: "",
            api_field_describe: ""

          }
      )

    },

    //删除参数提取行
    DeleteParameterExtraction(index, rows){

      if (1 === this.apiParameterExtractionData.length){
        this.$message.error("至少保留一行")

      } else {
        rows.splice(index, 1);
      }
    },

    //删除参数行
    DeleteParameter(index, rows){
      if (1 === this.apiParameterData.length){
        this.$message.error("至少保留一行")

      } else {
        rows.splice(index, 1);
      }
    },

    // 发送请求
    SendRequest(){
      let req = JSON.parse(JSON.stringify(this.apiTestCaseForm));
      req.api_method = this.api_method;
      req.api_assert_type = this.assertionsData[0].api_assert_type;
      req.api_assert_text = this.assertionsData[0].api_assert_text;
      req.api_environment_id = this.api_environment
      req.api_parameter_extraction = this.apiParameterExtractionData
      req.api_parameter = this.apiParameterData
      debugInterfacesCaseRequest(req).then(data =>{
        if (true === data.data.success) {
          this.$message.success("调试Api测试用例成功")
          this.jsonData = data.data.data.response_message
          this.requestsForm.requests_url = data.data.data.api_url
          this.requestsForm.requests_headers = data.data.data.api_header
          this.requestsForm.requests_payload = data.data.data.api_body
          this.requestsForm.requests_status_code = data.data.data.api_code
          this.requestsForm.response_message = this.jsonData
          this.requestsForm.response_time = data.data.data.response_time
          this.requestsForm.api_assert = data.data.data.api_assert
          this.requestsForm.api_variable_results = data.data.data.api_parameter_extraction
          this.apiParameterExtractionData = this.requestsForm.api_variable_results

          if (1 === data.data.data.api_method){
            this.api_method_result = "GET"
            this.api_method_result_type = ""
          }else if (2 === data.data.data.api_method){
            this.api_method_result = "POST"
            this.api_method_result_type = "success"

          }
          else if (3 === data.data.data.api_method){
            this.api_method_result = "PUT"
            this.api_method_result_type = "info"
          }
          else if (4 === data.data.data.api_method){
            this.api_method_result = "DELETE"
            this.api_method_result_type = "danger"
          }else if (5 === data.data.data.api_method){
            this.api_method_result = "PATCH"
            this.api_method_result_type = "warning"
          }

        }
        if (false === data.data.success){
          this.$message.error(data.data.error.message)

          this.jsonData = data.data.data.response_message
          this.requestsForm.requests_url = data.data.data.api_url
          this.requestsForm.requests_headers = data.data.data.api_header
          this.requestsForm.requests_payload = data.data.data.api_body
          this.requestsForm.requests_status_code = data.data.data.api_code
          this.requestsForm.response_message = this.jsonData
          this.requestsForm.response_time = data.data.data.response_time
          this.requestsForm.api_variable_results = data.data.data.api_parameter_extraction
          this.apiParameterExtractionData = this.requestsForm.api_variable_results

          if (1 === data.data.data.api_method){
            this.api_method_result = "GET"
            this.api_method_result_type = ""
          }else if (2 === data.data.data.api_method){
            this.api_method_result = "POST"
            this.api_method_result_type = "success"

          }
          else if (3 === data.data.data.api_method){
            this.api_method_result = "PUT"
            this.api_method_result_type = "info"
          }
          else if (4 === data.data.data.api_method){
            this.api_method_result = "DELETE"
            this.api_method_result_type = "danger"
          }else if (5 === data.data.data.api_method){
            this.api_method_result = "PATCH"
            this.api_method_result_type = "warning"
          }


        }
      })
      this.api_result = true

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },

  },

  created() {
    if ('edit'===this.type){
      this.getSelectApiEnvironmentFun()
      this.getSelectDatabaseFun()
      this.apiTestCaseForm.api_test_case_id =  this.apiInterfaceCaseId


      this.getSingleApiInterfaceCaseTestCaseFun()
    }

    if ('add'===this.type){
      this.getSelectApiEnvironmentFun()
      this.getSelectDatabaseFun()
      this.getSingleApiInterfaceCaseTestCaseYaPiFun()

    }


  },

}
</script>

<style scoped>
.api_interfaces_case_name{
  width: 215px;
}
.address{
  width: 98px;
}
.input-with-select{
  width: 1000px;
}
.parameter{
  width: 1000px;
}
.assertions{
  width: 300px;
}
.requests_url{
  background: #00d1b2;
}
.pre_json{
  outline: 1px solid #ccc; padding: 5px; margin: 5px;
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 500px;
  height: auto;


}
.api_documentation{
  width: 500px;
}
.el-textarea__inner{
  resize: none;
}
.codeEditBox {
  height: 200px;
}

</style>