<template>
  <div class="background" :style="{ height: dynamicHeight }">
    <a-tabs  :activeKey='tabKey' @change="callback" destroyInactiveTabPane tabPosition='left' size='large'>
      <!-- 基本信息 -->
      <a-tab-pane :key="'1'" :tab="$t('base.info.baseInfo')">
        <div class='tab-card'>
          <base-info />
        </div>
      </a-tab-pane>
      <!-- 变更管理 -->
      <a-tab-pane
        :key="'2'"
        v-if="isShow"
        :tab="$t('base.info.change.management')"
      >
        <div class='tab-card'>
          <change-management />
        </div>
      </a-tab-pane>
      <!-- 评审意见 -->
<!--      <a-tab-pane-->
<!--        :key="'3'"-->
<!--        :tab="$t('base.info.review.opinions')">-->
<!--        <div class='tab-card'>-->
<!--          <review-comments />-->
<!--        </div>-->
<!--      </a-tab-pane>-->
      <!-- 审批记录 -->
      <a-tab-pane
        :key="'4'"
        :tab="$t('base.info.approval.record')">
        <div class='tab-card'>
          <approval-record />
        </div>
      </a-tab-pane>
      <!-- 日志管理 -->
      <a-tab-pane
        :key="'5'"
        :tab="$t('base.info.log.management')">
        <div class='tab-card'>
          <log-managent />
        </div>
      </a-tab-pane>
      <!-- 零部件信息 -->
      <a-tab-pane
        :key="'6'"
        :tab="$t('base.info.component.information')">
        <div class='tab-card'>
          <parts-info />
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>

import baseInfo from "./baseInfo";
import reviewComments from "./reviewComments";
import approvalRecord from "./approvalRecord";
import logManagent from "./logManagent";
import { getUrlParam } from "@/common/common";
import changeManagement from "./changeManagement";
import partsInfo from "./partsInfo";

export default {
  name: 'componentsDVP',
  components: {
    baseInfo,
    reviewComments,
    approvalRecord,
    logManagent,
    changeManagement,
    partsInfo
  },
  data() {
    return {
      tabKey: '1',
      isShow: false,
      /** 动态高度 */
      dynamicHeight: window.innerHeight - 176 + 'px'
    }
  },
  methods: {
    /**是否显示变更管理 */
    isShowChangeLog() {
      let _that = this;
      let fromFlag = getUrlParam("from");
      if (fromFlag && fromFlag === 'fullVehicle') {
        _that.isShow = false;
      } else {
        _that.isShow = true;
      }
    },
    callback(key) {
      this.tabKey = key;
    },
  },
  mounted() {
    this.isShowChangeLog();
    /**动态高度 */
    window.onresize = () => {
      this.dynamicHeight = window.innerHeight - 176 + 'px';
    };
  }
}
</script>

<style lang="less" scoped>
.background {
    background-color: #fff;
    border-radius: 4px;
    margin-left: 12px;
    margin-right: 12px;
    padding: 12px;
}
.tab-card {
  background-color:#f0f2f5;
  margin: 0px -12px -12px -12px;
  padding:0px 12px 0px 0px
}
</style>
<style lang="scss" scoped>
.page {
  overflow: auto;
  height: calc(90vh);
  background-color: white;
}
</style>
