<!--
 * @Author: WangJiaCheng
 * @Date: 2021-05-10 17:25:15
 * @LastEditors: wjc
 * @LastEditTime: 2021-12-02 17:31:18
 * @Description:
-->
<template>
  <div class="render-code">
    <headers
      title="代码生成"
    />
    <main-content>
      <el-tabs :value="activeTab" @tab-click="handleClick">
        <el-tab-pane label="页面配置" name="page">
          <page-config
            @preview="handlePreview"
          />
        </el-tab-pane>
        <el-tab-pane label="表单配置" name="form">
          <form-config
            @preview="handlePreview"
          />
        </el-tab-pane>
        <el-tab-pane label="列表配置" name="list">
          <list-config
            @preview="handlePreview"
          />
        </el-tab-pane>
        <el-tab-pane label="详情页配置" name="detail">
          详情页配置
        </el-tab-pane>
        <el-tab-pane label="预览页面" name="preview">
          <preview />
        </el-tab-pane>
      </el-tabs>
      <preview-code
        :code-type="codeType"
        :visible.sync="previewVisible"
        :form-data="formData"
        size="90%"
      />
    </main-content>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

import Headers from '@/components/Headers'
import MainContent from '@/components/MainContent'

import PreviewCode from '@/views/components/previewCode'

import PageConfig from './PageConfig.vue'
import FormConfig from './FormConfig.vue'
import ListConfig from './ListConfig.vue'
import Preview from './Preview.vue'

export default {
  name: 'PageEdit',
  components: {
    Headers,
    MainContent,
    PreviewCode,
    PageConfig,
    FormConfig,
    ListConfig,
    Preview
  },
  data() {
    return {
      formData: {},
      codeType: 'page',
      previewVisible: false
    }
  },
  computed: {
    ...mapState({
      activeTab: state => state.page.activeTab
    })
  },
  methods: {
    ...mapMutations('page', ['setActiveTab']),
    handleClick(tab, event) {
      this.setActiveTab(tab.name)
    },
    handlePreview(d, type = 'page') {
      this.formData = d
      this.codeType = type
      this.previewVisible = true
    }
  }
}
</script>

<style lang="less">
  .render-code {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: auto;
    flex: 1;
  }
</style>
