<!--
 * @Author: 曹捷
 * @Date: 2021-08-31 14:45:14
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-02 15:45:48
 * @Description: 前端代码生成 
-->
<template>
  <div v-show="selectKey ==='form'">
    <formPanelVue ref="formRef">
      <genHeaderVue v-model:selectKey="selectKey" @rule="showRule" @download="download"></genHeaderVue>
    </formPanelVue>
  </div>
  <div v-show="selectKey ==='table'">
    <tablePanelVue ref="tableRef">
      <genHeaderVue v-model:selectKey="selectKey" @rule="showRule" @download="download"></genHeaderVue>
    </tablePanelVue>
  </div>
  <ruleDialogVue v-model:visible="ruleVisible" @generate="generateCode"></ruleDialogVue>
</template>
<script>
import formPanelVue from '../form-panel/form-panel.vue'
import tablePanelVue from '../table-panel/table-panel.vue'
import { reactive, toRefs } from 'vue'
import genHeaderVue from './gen-header.vue'
import ruleDialogVue from './ruleDialog.vue'

export default {
  components: { formPanelVue, tablePanelVue, genHeaderVue, ruleDialogVue },
  setup (props, context) {
    let _data = reactive({
      selectKey: 'form',
      ruleVisible: false,
      tableRef: null,
      formRef: null,
      generateInfo: {},
      generateDataList: []
    })
    let _methods = {

      showRule () {
        _data.ruleVisible = true
      },
      // 根据代码规则 生成代码
      generateCode (ruleList) {
        delete ruleList[0].info.columns
        _data.baseInfo = ruleList[0].info
        let list = []
        ruleList.forEach(item => {
          list = list.concat(item.rows)
        })
        _data.generateDataList = list
        _data.formRef.autoGenearte(ruleList[0].info, list)
        _data.tableRef.autoGenearte(ruleList[0].info, list)
      },
      download () {
        _data.formRef.downloadVue()
        _data.tableRef.downloadVue()
      }
    }
    return {
      ...toRefs(_data),
      ..._methods
    }
  }
}
</script>

<style>
</style>