<template>
  <el-tabs v-model="activeName" type="card">
    <!-- v-for循环遍历data数组中的每个元素
    label属性：用于设置选项卡的显示名称。在选项卡的标题栏上，会显示label属性的值作为选项卡的文本内容
    name属性：用于设置选项卡的名称。name属性的值用于标识选项卡，可以通过v-model绑定的变量来控制当前选中的选项卡的名称 -->
    <el-tab-pane v-for="item in data" :key="item.name" :lazy="true" :label="item.name" :name="item.name">
      <!-- 下方的Java是一个自定义的组件，实际上是用于渲染java代码用 -->
      <Java :value="item.content" :height="height" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
// 这里把另外一个模块引入
import Java from '@/components/JavaEdit/index'
import { generator } from '@/api/generator/generator'

// 这里export default可以让当前功能作为其他模块使用
export default {
  name: 'Preview',
  components: { Java },
  // 这里data会被返回数据，data是列表
  data() {
    return {
      data: null, height: '', activeName: 'Entity'
    }
  },
  created() {
    // 设置高度
    this.height = document.documentElement.clientHeight - 180 + 'px'
    // 获取数据表的名称
    const tableName = this.$route.params.tableName
    // 根据数据表生成代码
    generator(tableName, 1).then(data => {
      this.data = data
    }).catch(() => {
      this.$router.go(-1)
    })
  }
}
</script>
