<script>
import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
import { getConfigByNameAsync } from '@vue2-client/services/api/common'

export default {
  name: 'Demo',
  components: { XAddNativeForm },
  data() {
    return {
      form: {},
      formModalVisible: false,
    }
  },
  mounted() {
    getConfigByNameAsync('readOnlyChangeTablesForm', 'af-safecheck').then(res => {
      this.$refs.xAddFrom.init(
        Object.assign(res, {
          showSubmitBtn: true
        })
      )
    })
  },
  methods: {
    aaa(value) {
      this.form = Object.assign({}, value.realForm)
      this.$refs.xAddFrom.loading = false
    },
    openPopupForm() {
      this.formModalVisible = true
        getConfigByNameAsync('deviceInboundFrom', 'af-iot').then(res => {
        this.$nextTick(() => {
          this.$refs.xAddFormModal.init({
            businessType: '新增',
            ...res
          })
        })
      })
    },
    singLocal() {
      console.log('singLocal')
    }
  }
}
</script>

<template>
  <div>
    <a-button @click="openPopupForm">打开弹窗表单</a-button>
    <a-card :style="{ width: '850px' }">
      <x-add-native-form ref="xAddFrom" @getinfo="aaa" @onSubmit="aaa" @singLocal="singLocal" />
    </a-card>
        <a-modal
      v-model="formModalVisible"
      :dialog-style="{ top: '5rem' }"
      :z-index="300"
      width="55vw"
      :destroyOnClose="true"
    >
      <x-add-native-form  ref="xAddFormModal" />
    </a-modal>

    <a-card>
      <pre
        >{{ form ? JSON.stringify(form, null, 2) : '请先点击获取表单数据' }}
    </pre
      >
    </a-card>
  </div>
</template>

<style scoped lang="less"></style>
