<!--
 * @Description: 渲染代码
-->
<template>
  <Modal
    title="代码"
    :footer="null"
    :open="visible"
    @cancel="visible = false"
    wrapClassName="v-code-modal"
    style="top: 20px"
    width="850px"
    :destroyOnClose="true"
  >
    <PreviewCode :editorJson="editorVueJson" fileFormat="vue" />
  </Modal>
</template>
<script lang="ts">
  import { computed, defineComponent, reactive, toRefs } from 'vue';
  import { formatRules, removeAttrs } from '../../../utils';
  import PreviewCode from './PreviewCode.vue';
  import { IFormConfig } from '../../../typings/v-form-component';
  import { Modal } from 'ant-design-vue';

  const codeVueFront = `<template>
  <div>
    <v-form-create
      :formConfig="formConfig"
      :formData="formData"
      v-model="fApi"
    />
    <a-button @click="submit">提交</a-button>
  </div>
</template>
<script>

export default {
  name: 'Demo',
  data () {
    return {
      fApi:{},
      formData:{},
      formConfig: `;
  /* eslint-disable */
  let codeVueLast = `
    }
  },
  methods: {
    async submit() {
      const data = await this.fApi.submit()
      console.log(data)
     }
  }
}
<\/script>`;
  //
  export default defineComponent({
    name: 'CodeModal',
    components: { PreviewCode, Modal },
    setup() {
      const state = reactive({
        visible: false,
        jsonData: {} as IFormConfig,
      });

      const showModal = (formConfig: IFormConfig) => {
        formConfig.schemas && formatRules(formConfig.schemas);
        state.visible = true;
        state.jsonData = formConfig as any;
      };

      const editorVueJson = computed(() => {
        return (
          codeVueFront +
          JSON.stringify(removeAttrs(state.jsonData as any), null, '\t') +
          codeVueLast
        );
      });

      return { ...toRefs(state), editorVueJson, showModal };
    },
  });
</script>
