<template class="container" style="width:100%">
  <div class="main" style="width: 100%;">
    <div class="main-table-list">
      <div class="main-table-list-title">系统所有表集合</div>
      <div class="main-table-list-item" 
      
      @click="clickTableItem(item.table_name)" v-for="item in flameTableInfos" :key="item.table_name">
        <el-card shadow="hover">
          <div :class="[current_table_name === item.table_name ? 'main-table-list-item-selected':'' ]">{{ item.table_name }}</div>
           <div :class="[current_table_name === item.table_name ? 'main-table-list-item-selected':'' ]">{{ item.table_description }}</div>
        </el-card>
      </div>
    </div>
    <div class="main-item">
      <!--  :subfield="prop.subfield"
        :defaultOpen="prop.defaultOpen"
        :toolbarsFlag="prop.toolbarsFlag"
        :editable="prop.editable"
        :scrollStyle="prop.scrollStyle" -->
      <mavon-editor
        :subfield="prop.subfield"
        :defaultOpen="prop.defaultOpen"
        :toolbarsFlag="prop.toolbarsFlag"
        :editable="prop.editable"
        :scrollStyle="prop.scrollStyle"
        v-model="content"
      />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import frame from '../../api/flame.js';
export default {
  name: 'master_good',
  props: {},
  components: {},
  data() {
    return {
      table_list: [
        {
          table_name: 'flame_table_info',
          table_description: '模型主表信息'
        },
        {
          table_name: 'flame_table_info_item',
          table_description: '模型从表信息'
        }
      ],
      current_table_name: 'flame_table_info_item',
      content: '',
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        ink: true, // 链接
        imagelink: true, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        /* 1.3.5 */
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true // 导航目录
      }
    };
  },

  computed: {
    ...mapGetters('global', ['flameTableInfos']),
    // 解析器配置
    prop() {
      let data = {
        subfield: false, // 单双栏模式
        defaultOpen: 'preview', //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false, // 是否允许编辑
        toolbarsFlag: false,
        scrollStyle: true
      };
      return data;
    }
  },
  mounted() {
    let that = this;
    that.getMarkDown(that.current_table_name);
  },
  created() {},
  methods: {
    getMarkDown(table_name) {
      let that = this;
      frame.getMarkDown({ table_name: table_name }, res => {
        that.content = res;
        console.log('conf', res);
      });
    },
    clickTableItem(table_name) {
      let that = this;
      that.current_table_name = table_name;
      that.getMarkDown(table_name);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  background: white;
  .main {
    height: calc(100% - 31px);
    display: flex;
    justify-content: round-between;
    .main-table-list {
      overflow-y: scroll;
      background-color: white;
      width: 250px;
      height: calc(100% - 16px);
      padding: $spacing-normal;
      .main-table-list-title {
        font-weight: bold;
        margin-top: $spacing-normal;
        margin-bottom: $spacing-normal;
      }
      
      .main-table-list-item {
        line-height: 30px;
        width: 100%;
      }
      .main-table-list-item-selected {
        color: red;
      }
      
    }
    .main-item {
      overflow-y: scroll;
      width: calc(100% - 250px);
      height: 100%;
      margin-left: $spacing-mini;
    }
  }
}
</style>
