<template>
  <div class="layout-col-detail 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="activeName"  @tab-click="changeTabClickHandler">
      <el-tab-pane name="info">
        <span slot="label"><i class="fa fa-list-alt f16"></i>基本信息</span>
        <!-- 元数据基本信息 -->
        <meta-model-info :model-id="modelId" :tab-name="activeName"></meta-model-info>
      </el-tab-pane>
      <el-tab-pane v-for="tab in tabsInfo" :key="tab.value" :name="tab.value" >
        <span slot="label"><i :class="tab.icon"></i>{{tab.label}}</span>
        <component :is="tab.key" :tab-name="activeName" :model-id="modelId">
          <router-view></router-view>
        </component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import metaModelInfo from './metadataInfo.vue'
import metaModelColumn from './metaModelColumn.vue'
import metaModelData from './metaModelData.vue'
import metaModelTemplate from './metaModelTemplate.vue'
export default {
  components: {
    'meta-model-info': metaModelInfo,
    'meta-model-column': metaModelColumn,
    'meta-model-data': metaModelData,
    'meta-model-template': metaModelTemplate
  },
  props: {
    modelId: {
      type: String,
      requried: true
    }
  },
  data() {
    return {
      activeName: 'info',
      tabsInfo: [
        {label: '字段列表', icon: 'el-icon-share', key: 'meta-model-column', value: 'field'},
        {label: '数据管理', icon: 'el-icon-date', key: 'meta-model-data', value: 'data'},
        {label: '模板设置', icon: 'el-icon-document', key: 'meta-model-template', value: 'template'}
      ]
    }
  },
  mounted() {
    let arr = this.$router.currentRoute.path.split('/')
    if (!arr || arr.length < 5) {
      this.activeName = 'info'
    } else {
      this.activeName = arr[4]
    }
  },
  methods: {
    // 分页条点击事件
    changeTabClickHandler(tab, event) {
      this.activeName = tab.name
      this.$router.replace({path: `/platform/metadata/${this.modelId}/${tab.name}`})
    }
  }
}
</script>
<style></style>
