<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-05 16:59:56
 * @LastEditors: 无尘
 * @LastEditTime: 2019-10-21 14:55:03
 -->
<!--
<api-version-show></api-version-show>

import apiVersionShow from '@/components/api/api-version-show.vue';
-->
<template>
  <div class="api-version-content border-box">
    <div class="api-version-body">
      <div class="operate-btns" v-if="$route.query.editFlag == 1">
        <el-button :disabled="(apiData.status == 2 && apiData.updateAfterPublish != 1) || apiData.status == 4" type="primary" plain @click="handlePublish">发布</el-button>
        <el-button :disabled="apiData.status != 4" type="primary" plain @click="handleDel">删除</el-button>
        <el-button :disabled="apiData.status == 4" type="primary" plain @click="handleGoHistory">回退</el-button>
        <el-button :disabled="(apiData.status == 2 && apiData.updateAfterPublish != 1) || apiData.status == 4" type="primary" plain @click="handleGoBack">回滚</el-button>
      </div>
      <div class="anchor-wrap">
        <div class="el-tabs el-tabs--right">
          <div class="el-tabs__header is-right">
            <div class="el-tabs__nav-wrap is-right">
              <div class="el-tabs__nav-scroll">
                <div role="tablist" class="el-tabs__nav is-right" style="transform: translateY(0px);">
                  <div class="el-tabs__active-bar is-right" :style="{ transform: `translateY(${activeInfo * 24}px)`, height: '24px' }"></div>
                  <div id="tab-0" :class="['el-tabs__item h-24 is-right', activeInfo == 0 ? 'is-active' : '']" @click="goAuthor('#base', 0)">基础配置</div>
                  <div id="tab-1" :class="['el-tabs__item h-24 is-right', activeInfo == 1 ? 'is-active' : '']" @click="goAuthor('#frontend', 1)">前端配置</div>
                  <div id="tab-2" :class="['el-tabs__item h-24 is-right', activeInfo == 2 ? 'is-active' : '']" @click="goAuthor('#backend', 2)">后端配置</div>
                  <div id="tab-3" :class="['el-tabs__item h-24 is-right', activeInfo == 3 ? 'is-active' : '']" @click="goAuthor('#result', 3)">返回结果</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="base-info-wrap info-wrap" id="base">
        <div class="commont-info-title font-14 color-303133">基础信息</div>
        <base-info-show :apiData="apiData"></base-info-show>
      </div>
      <div class="frontend-set-wrap info-wrap" id="frontend">
        <div class="commont-info-title font-14 color-303133 m-t-47">前端配置</div>
        <frontend-info-show :apiData="apiData"></frontend-info-show>
      </div>
      <div class="backend-set-wrap info-wrap" id="backend">
        <div class="commont-info-title font-14 color-303133 m-t-47">后端配置</div>
        <backend-info-show :apiData="apiData"></backend-info-show>
      </div>
      <div class="back-result-wrap info-wrap" id="result">
        <div class="commont-info-title font-14 color-303133 m-t-47">返回结果</div>
        <back-info-show :apiData="apiData"></back-info-show>
      </div>
    </div>
    <go-history :apiData="apiData" :historyShow="historyShow" @hideHistoryDialog="hideHistoryDialog"></go-history>
    <publish-set :editRow="editRow" :publishShow="publishShow" @hidePublishDialog="hidePublishDialog"> </publish-set>
  </div>
</template>
<script>
import baseInfoShow from '@/components/api/base-info-show.vue';
import frontendInfoShow from '@/components/api/frontend-info-show.vue';
import backendInfoShow from '@/components/api/backend-info-show.vue';
import backInfoShow from '@/components/api/back-info-show.vue';
import publishSet from '@/components/api/publish-set.vue';
import goHistory from '@/components/api/go-history.vue';
import { getRequest, postRequest } from '@/api/api';
// import { _debounce } from '@/assets/js/public';
import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
  name: 'api-version-show',
  components: {
    baseInfoShow,
    frontendInfoShow,
    backendInfoShow,
    backInfoShow,
    publishSet,
    goHistory
  },
  data() {
    return {
      apiData: {
        interfaceId: '',
        interfaceName: '',
        interfaceGroupId: '',
        interfaceUrl: '',
        interfaceDescribe: '',
        projectId: '',
        optType: '',
        sucReturn: '',
        errReturn: '',
        errCode: [],
        frontParams: {},
        endParams: {},
        target: '',
        requestType: 'POST',
        protocol: 'http',
        version: '',
        interfaceType: 'HTTP',
        dubboMethod: '',
        dubboInterface: '',
        httpPath: '',
        proxyCode: '',
        resultParams: '',
        backendRequestType: '',
        timeout: 43087112
      },
      activeInfo: 0,

      // 发布
      editRow: {},
      publishShow: false,
      historyShow: false
    };
  },
  methods: {
    /**
     * 发布
     */
    handlePublish() {
      const that = this;
      that.publishShow = true;
      that.editRow = JSON.parse(JSON.stringify(that.apiData));
    },
    hidePublishDialog(flag) {
      const that = this;
      that.publishShow = false;
      that.editRow = {};
      if (flag) {
        that.apiData.status = 2;
      }
    },
    /**
     * 回退
     */
    handleGoHistory() {
      const that = this;
      that.historyShow = true;
    },
    hideHistoryDialog() {
      const that = this;
      that.historyShow = false;
      that.getData();
    },
    /**
     * 删除
     */
    handleDel() {
      const that = this;
      that
        .$confirm(`确认删除此版本吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          that.postDelData();
        })
        .catch(() => {});
    },
    postDelData() {
      const that = this;
      let para = {
        interfaceVersionId: that.apiData.interfaceVersionId
      };
      postRequest('/gateway-manage/delete-api-version', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            showMsg.showmsg('删除成功', 'success');
            that.$router.push(`/apiListManage?interfaceId=${that.$route.query.interfaceId}&interfaceName=${that.$route.query.interfaceName}`);
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 回滚
     */
    handleGoBack() {
      const that = this;
      that
        .$confirm(`确认回滚当前版本吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          that.postGoBack();
        })
        .catch(() => {});
    },
    postGoBack() {
      const that = this;
      let para = {
        interfaceVersionId: that.apiData.interfaceVersionId
      };
      getRequest('/gateway-manage/rollback-api', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            showMsg.showmsg('回滚成功', 'success');
            that.getData();
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 跳转到 author
     */
    goAuthor(selector, index) {
      const that = this;
      that.activeInfo = index;
      that.$el.querySelector(selector).scrollIntoView();
    },
    /**
     *  获取数据
     */
    getData() {
      const that = this;
      let para = {
        interfaceVersionId: that.$route.query.interfaceVersionId,
        interfaceId: that.$route.query.interfaceId,
        publishRecordId: that.$route.query.publishRecordId || ''
      };
      getRequest('/gateway-manage/get-api', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            resData.result.frontParams = JSON.parse(resData.result.frontParams);
            resData.result.endParams = JSON.parse(resData.result.endParams);
            resData.result.errCode = JSON.parse(resData.result.errCode);
            resData.result.resultParams = JSON.parse(resData.result.resultParams);
            that.apiData = resData.result || {};
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    init() {
      const that = this;
      document.getElementsByClassName('api-body-content')[0].addEventListener('scroll', that.scroll); //启动监听页面滚动事件
    },
    scroll() {
      const that = this;
      let scrollTop = document.querySelectorAll('.api-body-content')[0].scrollTop;
      // console.log(scrollTop);
      let itemIds = document.querySelectorAll('.info-wrap');
      itemIds.forEach((item, index) => {
        if (scrollTop >= item.offsetTop) {
          that.activeInfo = index;
        }
      });
    }
  },
  mounted() {
    const that = this;
    that.getData();
    that.$nextTick(() => {
      that.init();
    });
  },
  destroyed() {
    document.getElementsByClassName('api-body-content')[0].removeEventListener('scroll', this.scroll); //注销监听页面滚动事件
  }
};
</script>
<style lang="less" scoped>
.w-320 {
  width: 320px;
}
.m-t-14 {
  margin-top: 14px;
}
.api-version-content {
  position: relative;
  // padding: 26px 28px;
  .api-version-body {
    position: relative;
    width: 100%;
    .operate-btns {
      position: absolute;
      top: 0;
      right: 0;
    }
    .anchor-wrap {
      position: fixed;
      top: 330px;
      right: 30px;
      z-index: 2;
      background: #fff;
      .el-tabs__item {
        &.h-24 {
          width: 150px;
          height: 24px;
          line-height: 24px;
          font-size: 12px;
          // color: #606266;
        }
      }
    }
    .m-t-47 {
      margin-top: 47px;
    }
    .commont-info-title {
      font-weight: 600;
      margin-bottom: 20px;
    }
    .base-info-wrap {
      min-height: 250px;
    }
    .frontend-set-wrap {
      min-height: 440px;
    }
    .backend-set-wrap {
      min-height: 510px;
    }
    .back-result-wrap {
    }
  }
}
</style>
