<template>
  <div class="layout-col-detail right-list-panel-fieldset">
    <el-toolbar>
      <el-button @click="backListPage" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
    </el-toolbar>

    <div class="pane-wrap" v-loading="dataLoading">
      <div class="panel-fieldset">
        <h4 class="panel-legend">基本信息</h4>
        <p class="info-item">
          <span class="info-label">ID:</span>
          <span class="info-value">{{info.ID}}</span>
        </p>
        <p class="info-item">
          <span class="info-label">名称:</span>
          <span class="info-value">{{info.name}}</span>
        </p>
        <p class="info-item">
          <span class="info-label">来源插件:</span>
          <span class="info-value">{{info.plugin}}</span>
        </p>
      </div>
      <div class="panel-fieldset">
        <h4 class="panel-legend">输入参数</h4>
        <tree-grid :columns="parameterscolumns" :tree-structure="true" :data-source="inputparameters"
                    :needCheckbox="false" serialNumberName="序号">
        </tree-grid>
      </div>
      <div class="panel-fieldset">
        <h4 class="panel-legend">输出参数</h4>
        <tree-grid :columns="parameterscolumns" :tree-structure="true" :data-source="outputparameters"
                    :needCheckbox="false" serialNumberName="序号">
        </tree-grid>
      </div>
    </div>
  </div>
</template>

<script>
import TreeGrid from '@src/components/TreeGrid.vue'

export default {
  components: {
    'tree-grid': TreeGrid
  },

  props: {
    ID: String
  },

  data() {
    return {
      dataLoading: false,
      info: {},
      inputparameters: [],
      parameterscolumns: [
        {
          text: '名称',
          dataIndex: 'name'
        },
        {
          text: '数据类型',
          dataIndex: 'dataType'
        },
        {
          text: '是否为数组',
          dataIndex: 'arrayFlag'
        },
        {
          text: '允许空值',
          dataIndex: 'allowNull'
        },
        {
          text: '备注',
          dataIndex: 'memo'
        }
      ],
      outputparameters: []
    }
  },
  methods: {
    backListPage () {
      this.$router.push({path: '/platform/api'})
    },

    async init() {
    // console.log("id;"+this.ID)
      this.dataLoading = true
      let res
      try {
        res = await axios.get(`/ui/apis/${this.ID}`)
      } catch (e) {
        this.dataLoading = false
        return
      }
      this.dataLoading = false
      if (res.data.status !== 1) {
        util.showResponseMessage(res.data)
        return
      }
      this.info = res.data.data
      this.inputparameters = this.info.inputs
      this.outputparameters = this.info.outputs
    }
  },
  async created() {
    await this.init()
  }
}
</script>

<style scoped>
  .padding-top-bottom.scroll {
    padding: 10px 0;
  }

  .pane-wrap {
    padding: 0 15px 15px;
  }

  .info-item {
    line-height: 2;
    margin-bottom: 0.5em;
    font-size: 13px;
  }

  .info-item .info-label {
    display: inline-block;
    text-align: right;
    width: 100px;
  }
</style>
