<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      width="500px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @open="onOpen"
      v-on="$listeners"
    >
      <parser
        v-if="isShowParser"
        :form-conf="innerFormConf"
        ref="parser"
        @submit="submit"
      />

      <div slot="footer">
        <el-button @click="close"> 取消 </el-button>
        <el-button type="primary" @click="getFormData"> 获取数据 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Parser from '@/components/FormGenerator/components/parser';
  import { Message, MessageBox } from 'element-ui';

  export default {
    name: 'ParserDialog',
    components: {
      Parser
    },
    inheritAttrs: false,
    props: ['formConf'],
    data() {
      return {
        innerFormConf: this.formConf,
        // 防止模型应重新渲染parser
        isShowParser: true
      };
    },
    computed: {},
    watch: {
      formConf(val) {
        this.innerFormConf = val;
      }
    },
    mounted() {},
    methods: {
      onOpen() {
        this.isShowParser = true;
      },
      close(e) {
        this.isShowParser = false;
        this.$emit('update:visible', false);
      },
      getFormData() {
        this.$refs.parser.submitForm();
      },
      submit(data) {
        this.$msgbox.alert(JSON.stringify(data));
      }
    }
  };
</script>
