<template>
  <div>

    <div class="layout-col-detail right-detail-tabs">
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
        <i class="fa fa-chevron-left"></i> 返回上页
      </el-button>
      <el-tabs class="tabs-wrap" v-model="tabActiveName"  @tab-click="changeTabClickHandler">
        <el-tab-pane name="info">
          <span slot="label">
            <i class="el-icon-star-off"></i>基本信息
          </span>
          <!-- 元数据基本信息 -->
          <meta-model-info :show.sync="showDetailPage" :data="currentMetadata" :tab-name="tabActiveName" :types="metadataTypes" ref="metaInfo"></meta-model-info>
        </el-tab-pane>
        <el-tab-pane name="field">
          <span slot="label">
            <i class="el-icon-share"></i>字段列表
          </span>
          <!-- 元数据字段 -->
          <meta-model-column :show.sync="showDetailPage" :model-id="currentMetadata.ID" :tab-name="tabActiveName"></meta-model-column>
        </el-tab-pane>
        <el-tab-pane name="data">
          <span slot="label">
            <i class="el-icon-date"></i>数据管理</span>
          <meta-model-data :show.sync="showDetailPage" :model-id="currentMetadata.ID" :tab-name="tabActiveName"></meta-model-data>
        </el-tab-pane>
        <el-tab-pane name="template">
          <span slot="label">
            <i class="el-icon-document"></i>模板设置</span>
          <meta-model-template :show.sync="showDetailPage" :model-id="currentMetadata.ID" :tab-name="tabActiveName"></meta-model-template>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>
<script>
import util from '@src/common/util.js'
import metaModelInfo from './metadataInfo.vue'
import metaModelColumn from './metaModelColumn.vue'
import metaModelData from './metaModelData.vue'
import metaModelTemplate from './metaModelTemplate.vue'
export default {
  data() {
    return {
      metadata: [], //  元数据表格数据
      currentMetadata: {}, //  当前元数据
      metadataTypes: [], //  元数据类型
      dataLoading: false,
      tabActiveName: 'info', //  当前分页条名称
      showDetailPage: true // 是否显示详细页
    }
  },
  methods: {
    // 基本信息组件回调
    metadataInfoChangedBack(data) {
      let index = this.metadata.findIndex(val => val.ID === data.ID)
      this.metadata.splice(index, 1, data)
      this.$refs.table.toggleRowSelection(data)
    },

    changeTabClickHandler(tab, event) {
      this.tabActiveName = tab.name
    },

    // 加载元数据类型
    async loadMetadataTypes() {
      let res = await axios.get('/ui/metamodels/types')
      this.metadataTypes = res.data.data
    },

    // 点击名称进入详情页
    gotoDetailPage(row) {
      this.currentMetadata = row
      this.$refs.metaInfo.$refs.form.resetFields()
      this.showDetailPage = true
    }
  },
  created() {
    Object.assign(this.currentMetadata, JSON.parse(util.getItem(this.$route.path)))
    this.loadMetadataTypes()
  },
  components: {
    'meta-model-info': metaModelInfo,
    'meta-model-column': metaModelColumn,
    'meta-model-data': metaModelData,
    'meta-model-template': metaModelTemplate
  }
}
</script>
<style>
.search-bar {
  padding: 5px 0;
}
</style>
