<template>
  <div class="layout-no-cols right-detail-tabs">
      <el-toolbar>
        <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
          <i class="fa fa-chevron-left"></i> 返回上页
        </el-button>
      </el-toolbar>
      <el-tabs class="tabs-wrap" v-model="activeTabsName" @tab-click="tabsChangeClickHandler" v-loading="tabsDataLoading">
        <el-tab-pane label="基本信息" name="BasicInfo">
          <!--模板基本信息组件-->
          <template-info ref="templateInfo"  @success="loadTemplateTreeData()"></template-info>
        </el-tab-pane>

        <el-tab-pane label="修订历史" name="HistoryRevision">
          <!--模板修订历史组件-->
          <template-history ref="templateHistory"></template-history>
        </el-tab-pane>
      </el-tabs>
  </div>

</template>

<script>
import TemplateInfo from './components/TemplateInfo.vue'
import TemplateHistory from './components/TemplateHistory.vue'

export default {
  data() {
    return {
      activeTabsName: 'BasicInfo', // 当前活动tab
      currentTemplateParam: {
        fileName: '',
        platformID: null,
        siteID: null,
        name: ''
      }, // 参数
      tabsDataLoading: false // tabs数据加载状态
    }
  },

  created() {
    Object.assign(this.currentTemplateParam, this.$route.query)
  },
  mounted() {
    this.$refs.templateInfo && this.$refs.templateInfo.loadTemplateBasicInfo(this.currentTemplateParam)
  },
  methods: {
    // tabs切换事件
    tabsChangeClickHandler(tab, event) {
      this.activeTabsName = tab.name
      // console.log(tab.name)
      if (tab.name === 'HistoryRevision') {
        this.$refs.templateHistory.loadTableData(this.currentTemplateParam)
      } else if (tab.name === 'BasicInfo') {
        this.$refs.templateInfo.loadTemplateBasicInfo(this.currentTemplateParam)
      }
    }
  },
  components: {
    'template-info': TemplateInfo,
    'template-history': TemplateHistory
  }
}
</script>

<style scoped>
.form-panel .is-required {
  display: block;
}
.title-column__content {
  cursor: pointer;
}
.padding-top-bottom .search-bar {
  padding-bottom: 5px;
}
.tabs-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.info-form-wrap {
  margin-top: 10px;
  padding: 10px 0;
  width: 560px;
}
.pane-wrap {
  padding: 0 15px 15px;
}
.tag-item,
.title {
  line-height: 1.5;
  margin: 0.2em 0 0.3em 0;
}
.tag-item .tag-label {
  display: inline-block;
  text-align: right;
  width: 100px;
}
.title {
  margin-top: 1em;
  font-size: 20px;
}
</style>
