<template>
  <div id="PublishDetail">
    <h2>{{ data.serviceName }}</h2>
    <el-divider/>
    <div class="itemList">
      <el-table :data="tableData" style="width: 100%" :show-header="false">
        <el-table-column prop="title" label="标题" width="120" className="vertical-align-top">
          <template #default="scope">
            <span class="title">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容">
          <template #default="scope">
            <ul v-if="scope.row.key==='interfaces'" style="margin-left: 2%">
              <li v-for="(item,key) in scope.row.content" :key="key" >
                <span style="font-size: 16px">{{ key }}</span>
                <el-link @click="handleDetailShow(item)" style="color: #6566f4; font-size: 13px;margin-left: 15px">接口详情</el-link>
              </li>
            </ul>
            <pre v-else>{{ scope.row.content }}</pre>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <el-dialog v-if="isDetailShow"
             :model-value="isDetailShow"
             title="接口详情"
             :width="700"
             :close-on-click-modal="false"
             :before-close="handleDetailClose"
  >
    <el-scrollbar :max-height="500">
      <el-row class="item-row">
        <el-col :span="3">接口地址：</el-col>
        <el-col :span="21">{{ item.path }}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3">接口描述：</el-col>
        <el-col :span="21">
          <pre>{{ item.desc }}</pre>
        </el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3">请求方式：</el-col>
        <el-col :span="21">{{ item.method }}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3">请求头：</el-col>
        <el-col :span="21">
          <el-table :data="item.headers" stripe border v-if="item.headers && item.headers.length>0">
            <el-table-column prop="name" label="字段名称" width="110"/>
            <el-table-column prop="desc" label="说明" width="130"/>
            <el-table-column prop="require" label="必填" width="60"/>
            <el-table-column prop="type" label="字段类型" width="100"/>
            <el-table-column prop="value" label="值"/>
          </el-table>
          <span v-else>无</span>
        </el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3">请求参数：</el-col>
        <el-col :span="21">
          <el-table :data="item.params" stripe border v-if="item.params && item.params.length>0">
            <el-table-column prop="name" label="字段名称" width="110"/>
            <el-table-column prop="desc" label="说明" width="130"/>
            <el-table-column prop="require" label="必填" width="60"/>
            <el-table-column prop="type" label="字段类型" width="100"/>
            <el-table-column prop="value" label="值"/>
          </el-table>
          <span v-else>无</span>
        </el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3">返回结果：</el-col>
        <el-col :span="21">
          <el-table :data="item.response" stripe border v-if="item.response && item.response.length>0">
            <el-table-column prop="name" label="字段名称" width="130"/>
            <el-table-column prop="desc" label="说明" width="150"/>
            <el-table-column prop="type" label="字段类型" width="130"/>
            <el-table-column prop="value" label="值"/>
          </el-table>
          <span v-else>无</span>
        </el-col>
      </el-row>
    </el-scrollbar>
  </el-dialog>
</template>

<script>


export default {
  data() {
    return {
      tableData: [],
      isDetailShow: false,
      item: {},
    }
  },
  props: {
    data: Object
  },
  watch: {
    "data": function (params) {
      this.renderTable();
    }
  },
  created() {
  },
  mounted() {
    let app = this;
    this.renderTable();
  },
  methods: {
    renderTable() {
      this.tableData = []
      let url = {
        title: '服务地址：',
        key: 'url',
        content: this.data.url
      }
      let desc = {
        title: '服务描述：',
        key: 'desc',
        content: this.data.desc
      }
      let interfaces = {
        title: '服务接口：',
        key: 'interfaces',
        content: this.data.interfaces
      }
      this.tableData.push(url)
      this.tableData.push(desc)
      this.tableData.push(interfaces)
    },
    handleDetailShow(item) {
      this.item = item;
      this.isDetailShow = true;
    },
    handleDetailClose() {
      this.isDetailShow = false;
    }
  }
}
</script>

<style scoped>
#PublishDetail {
  width: 100%;
  height: 100%;
  padding-left: 1%;
}

#PublishDetail .itemList {
  width: 100%;
}

#PublishDetail .itemList .title {
  display: inline-block;
  margin-left: 10px;
  font-size: 15px;
  font-weight: bold;
}
.item-row {
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 15px;
}
</style>

<style>
.vertical-align-top {
  vertical-align: top !important;
}
.el-dialog__body {
  padding-top: 0px;
}
</style>