<!--
 * @Author: WangJiaCheng
 * @Date: 2021-05-12 15:45:40
 * @LastEditors: WangJiaCheng
 * @LastEditTime: 2021-07-29 17:06:32
 * @Description:
-->
<template>
  <div class="preview">
    <div class="left">
      <el-tree
        default-expand-all
        highlight-current
        :data="data"
        @node-click="handleNodeClick"
      />
    </div>
    <div class="right">
      <code-editor
        :form-data="formData"
        :code-type="codeType"
      />
    </div>
  </div>
</template>

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

import CodeEditor from '@/views/components/CodeEditor'

export default {
  name: 'Preview',
  components: {
    CodeEditor
  },
  data() {
    return {
      formData: {},
      codeType: 'page',
      data: [
        {
          label: 'page',
          children: [
            {
              label: 'index.vue',
              value: 'page'
            },
            {
              label: 'tab',
              children: [
                {
                  label: 'index.vue',
                  value: 'tab'
                },
                {
                  label: 'components',
                  children: [
                    {
                      label: 'data_table.vue',
                      value: 'list'
                    },
                    {
                      label: 'search_form.vue',
                      value: 'form'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  computed: {
    ...mapState({
      pageConfig: state => state.page.pageConfig,
      formConfig: state => state.page.formConfig,
      listConfig: state => state.page.listConfig
    })
  },
  mounted() {
  },
  methods: {
    handleNodeClick(data) {
      if (data.value) {
        this.codeType = data.value
        switch (data.value) {
          case 'page':
            this.formData = this.pageConfig
            break
          case 'tab':
            this.formData = this.pageConfig
            break
          case 'form':
            this.formData = this.formConfig
            break
          case 'list':
            this.formData = this.listConfig
            break
          default:
            break
        }
      }
    }
  }
}
</script>

<style lang="less">
  .preview {
    display: flex;
    justify-content: space-between;
    .left {
      width: 200px;
    }
    .right {
      width: 80%;
    }
  }
</style>
