<template>
  <dialogBox title="调用接口" @submitForm="submitForm" saveButton="调用" width="50%" :isFullscreen="false"
    @closeDialog="closeDialog" v-model="value">
    <el-descriptions class="margin-top" :column="1" size="16" border style="height:700px">
      <el-descriptions-item>
        <template slot="label" style="width:200px">接口代码</template>{{ruleForm.interfaceCode}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">接口名称</template>{{ruleForm.interfaceService}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">接口地址</template>{{ruleForm.interfaceApi}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">接口方式</template>{{ruleForm.interfaceMethod}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">接口类型</template>{{getInterfaceType(ruleForm.interfaceType)}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">接口参数</template>
        <vue-json-editor
          v-model="interfaceParams"
          :showBtns="false"
          :mode="'code'"
          @json-change="onJsonChange"
          @json-save="onJsonSave"
          @has-error="onError"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">调用状态</template>
        <div style="color:green" v-if="returnMessage">{{returnMessage.statusCode}}</div>
        <div style="color:red" v-else>ERROR</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <div slot="label" style="height:150px">返回结果
        </div>
        <div v-if="returnMessage">{{returnMessage.body}}</div>
        <div v-else>无效的接口CODE，请检查接口配置</div>
      </el-descriptions-item>
    </el-descriptions>
  </dialogBox>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'
import {interfaceRetrieve } from "@/api/jkfw.js"
export default {
  components: {
    vueJsonEditor 
  },
  computed: {
  },
  props: {
    value: { type: Boolean, default: false },
  },
  data () {
    return {
      //表单提交数据
      interfaceMethods: ['webapi','webservice'],
      interfaceTypes: [
          {'label': '工作流服务平台','value':'1'},
          {'label': '权限平台','value':'2'},
          {'label': '定时器服务','value':'3'},
          {'label': '其他第三方平台','value':'4'},
      ],
      ruleForm: {},
      interfaceParams: {} ,
      returnMessage: {},
      hasJsonFlag: true
    }
  },
  methods: {
    //表单提交
    submitForm () {
      console.log(this.interfaceParams);
      console.log(this.hasJsonFlag);
      if(!this.hasJsonFlag){
        return;
      }
      var formdata = new FormData();
      formdata.append("interfaceCode", this.ruleForm.interfaceCode);
      formdata.append("interfaceType", this.ruleForm.interfaceType);
      formdata.append("params",JSON.stringify(this.interfaceParams));
      interfaceRetrieve(formdata).then(res => {
        if(res.code == 200){
          this.returnMessage = res.result
        }
      })
    },
    //获取详情
    getDetailInfo(item){
      this.ruleForm = item
    },
    //关闭弹窗
    closeDialog () {
      this.$emit("input", false);
      this.interfaceParams = {} 
      this.returnMessage = {}
      this.hasJsonFlag = true
    },
    //获取接口类型
    getInterfaceType(code){
      let name = ''
      for (let item of this.interfaceTypes) {
        if (item.value == code) {
          name = item.label;
          break;
        }
      }
      return name;
    },
    onJsonChange(value){
      this.onJsonSave();
    },
    onJsonSave (value) {
      this.interfaceParams = value
      this.hasJsonFlag = true
    },
    onError(value) {
      this.hasJsonFlag = false
    },
  }
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
 /deep/ .is-bordered-label{
  width:100px
}
/deep/ .el-descriptions-item__content:nth-last-child(){
  height: 100px;
}
</style>