<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-07-22 19:39:25
 * @LastEditors: 无尘
 * @LastEditTime: 2019-10-18 15:50:44
 -->
<template>
  <div class="api-body-content border-box">
    <div class="common-nav">
      <nav-bread :nav-path="navPath" />
    </div>
    <div class="api-body-main common-body-main border-box">
      <div class="api-main-content border-box">
        <div class="api-tab-wrap">
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick">
            <el-tab-pane
              label="版本"
              name="first">
              <version-list ref="versionList" />
            </el-tab-pane>
            <el-tab-pane
              label="发布记录"
              name="second">
              <publish-list ref="publishList" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
import versionList from '@/components/api/version-list.vue';
import publishList from '@/components/api/publish-list.vue';
import { getRequest } from '@/api/api';
export default {
  name: 'ApiListManage',
  components: {
    navBread,
    versionList,
    publishList
  },
  data() {
    return {
      // 面包屑参数
      navPath: [
        {
          name: 'API管理',
          path: '/apiProgram'
        },
        {
          name: this.$route.query.projectName ? `${this.$route.query.projectName}项目列表` : '',
          path: '/apiProgramGroup'
        },
        {
          name: this.$route.query.interfaceGroupName ? `${this.$route.query.interfaceGroupName}分组列表` : '',
          path: '/groupApiList'
        },
        {
          name: this.$route.query.interfaceName ? `${this.$route.query.interfaceName}` : '',
          path: '/apiListManage'
        },
        {
          name: '管理',
          path: ''
        }
      ],
      activeName: 'first'
    };
  },
  methods: {
    /**
     * tab 切换
     */
    /* eslint-disable */
    handleClick(tab, event) {
      const that = this;
      if (tab.name == 'first') {
        that.$refs.versionList.getData();
      }else {
        that.$refs.publishList.getData();
      }
    },

    /**
     * 获取面包屑导航数据
     */
    getNavBarData() {
      const that = this;
      let para = {
        interfaceId: that.$route.query.interfaceId
      }
      getRequest('/gateway-manage/get-bar', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            that.navPath = [
              {
                name: 'API管理',
                path: '/apiProgram'
              },
              {
                name: 'API列表',
                path: '/apiList'
              },
              {
                name: '管理',
                path: ''
              }
            ]
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {},
      // 深度观察监听
      deep: true
    }
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.$emit('showTab', 21);
  }
};
</script>

<style lang="less" scoped></style>
