<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-08-05 16:59:56
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-23 16:04:11
 -->
<!--
<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
        v-if="$route.query.editFlag == 1"
        class="operate-btns">
        <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
                    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
        id="base"
        class="base-info-wrap info-wrap">
        <div class="commont-info-title font-14 color-303133">
          基础信息
        </div>
        <base-info-show :api-data="apiData" />
      </div>
      <div
        id="frontend"
        class="frontend-set-wrap info-wrap">
        <div class="commont-info-title font-14 color-303133 m-t-47">
          前端配置
        </div>
        <frontend-info-show :api-data="apiData" />
      </div>
      <div
        id="backend"
        class="backend-set-wrap info-wrap">
        <div class="commont-info-title font-14 color-303133 m-t-47">
          后端配置
        </div>
        <backend-info-show :api-data="apiData" />
      </div>
      <div
        id="result"
        class="back-result-wrap info-wrap">
        <div class="commont-info-title font-14 color-303133 m-t-47">
          返回结果
        </div>
        <back-info-show :api-data="apiData" />
      </div>
    </div>
    <go-history
      :api-data="apiData"
      :history-show="historyShow"
      @hideHistoryDialog="hideHistoryDialog" />
    <publish-set
      :edit-row="editRow"
      :publish-show="publishShow"
      @hidePublishDialog="hidePublishDialog" />
  </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: 'ApiVersionShow',
  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
    };
  },
  mounted() {
    const that = this;
    that.getData();
    that.$nextTick(() => {
      that.init();
    });
  },
  destroyed() {
    document.getElementsByClassName('api-body-content')[0].removeEventListener('scroll', this.scroll); // 注销监听页面滚动事件
  },
  methods: {
    /**
     * @description: 发布
     * @author: 无尘
     */
    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;
      }
    },
    /**
     * @description: 回退
     * @author: 无尘
     */
    handleGoHistory() {
      const that = this;
      that.historyShow = true;
    },
    hideHistoryDialog() {
      const that = this;
      that.historyShow = false;
      that.getData();
    },
    /**
     * @description: 删除
     * @author: 无尘
     */
    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
          });
        });
    },
    /**
     * @description: 回滚
     * @author: 无尘
     */
    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
          });
        });
    },
    /**
     * @description: 跳转到 author
     * @param {String} selector
     * @param {Number} index
     * @author: 无尘
     */
    goAuthor(selector, index) {
      const that = this;
      that.activeInfo = index;
      that.$el.querySelector(selector).scrollIntoView();
    },
    /**
     * @description: 获取数据
     * @author: 无尘
     */
    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;
        }
      });
    }
  }
};
</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>
