<template>
  <div class="layout-no-cols right-detail-tabs">
    <el-toolbar>
      <el-col :span="20" >
        <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
          <i class="fa fa-chevron-left"></i> 返回上页</el-button>
      </el-col>
    </el-toolbar>
    <el-tabs class="extend-model-tabs-wrap" v-model="tabActiveName" @tab-click="changeTabClickHandler">
      <el-tab-pane name="info">
        <span slot="label"><i class="fa fa-list-alt f16"></i>基本信息</span>
        <!-- 扩展模型基本信息 -->
        <extend-model-info :model-id="modelId" :tab-name="tabActiveName"></extend-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="tabActiveName" :model-id="modelId">
          <router-view></router-view>
        </component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import ExtendModelInfo from './extendModelInfo.vue'
import ExtendModelColumn from './extendModelColumn.vue'
import ExtendModelData from './extendModelData.vue'
export default {
  components: {
    'extend-model-info': ExtendModelInfo,
    ExtendModelColumn,
    ExtendModelData
  },
  props: {
    modelId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      extendModels: [], // 扩展模型
      extendModelTypes: [], // 扩展模型类别
      tabActiveName: 'info', // 当前活动页面
      tabsInfo: [
        {label: '字段列表', icon: 'el-icon-share', key: 'ExtendModelColumn', value: 'field'},
        {label: '数据管理', icon: 'el-icon-date', key: 'ExtendModelData', value: 'data'}
      ]
    }
  },
  mounted() {
    let arr = this.$router.currentRoute.path.split('/')
    if (!arr || arr.length < 5) {
      this.tabActiveName = 'info'
    } else {
      this.tabActiveName = arr[4]
    }
    this.loadExtendModelTypes()
  },
  methods: {
    async loadExtendModelTypes() {
      let resp = await axios.get('/ui/metamodels/types', {param: {extend: 'Y'}})
      if (resp.data.status !== 1) {
        util.showResponseMessage(resp.data)
        return
      }
      this.extendModelTypes = resp.data.data
    },
    changeTabClickHandler(tab, event) {
      this.tabActiveName = tab.name
      this.$router.replace({path: `/settings/extendModel/${this.modelId}/${tab.name}`})
    }
  }
}
</script>
<style scoped>
.extend-model-tabs-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

</style>
