<template>
  <div id="app">
    <div @click="getJson">导出json</div>
    <div class="pack">
      <!-- 新增   defaultValue 默认值 不传  status 状态 新增 可不传 -->
      <!-- <form-generator ref="form" /> -->
      <!-- 未使用   defaultValue 默认值   status 状态 notUse  -->
      <form-generator
        ref="form"
        :defaultValue="json2"
        status="notUse" />
      <!-- 停用   defaultValue 默认值   status 状态 stop  -->
      <!-- <form-generator ref="form" :defaultValue="json1" status="stop" /> -->
      <!-- 子表单 -->
      <!-- <sub-form ref="form" :defaultValue="json1" /> -->
    </div>
</div>
</template>

<script>
import Vue from 'vue'
import FormGenerator from '../src/formGenerator/index.vue'
import BaseDraggable from '../src/formGenerator/components/BaseDraggable'
import SubForm from '../src/formGenerator/subForm.vue'
Vue.component(BaseDraggable.name, BaseDraggable)

export default {
  name: 'App',
  components: {
    FormGenerator,
    SubForm,
  },
  data() {
    return {
      json2: '{"config":{"labelPosition":"left","labelWidth":90,"gutter":20,"size":"default","labelColon":false},"schema":[{"id":1635329861354,"type":"string","name":"","defaultValue":null,"layout":24,"required":true,"title":{"content":"单行文本","icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Input"},"validateRules":[{"pattern":"/[\\\\S]+/","message":"请输入必填项","trigger":["change"],"type":"required","rulesType":["required"],"id":1635330244503,"isShow":true},{"pattern":"/^1[3456789]\\\\d{9}$/","message":"请输入手机号","trigger":["change"],"type":"textformat","rulesType":["textformat","mobile"],"id":1635330244918,"isShow":true},{"pattern":"/^[a-zA-z\\\\u4e00-\\\\u9fa5]+$/","message":"请输入中英文","trigger":["change"],"type":"texttype","rulesType":["texttype","chineseenglish"],"id":1635330245101,"isShow":true},{"pattern":"/^[\\\\s\\\\S]{6,}$/","message":"最少输入6个字符长度","trigger":["change"],"type":"lengthrange","rulesType":["lengthrange","min"],"id":1635330245308,"isShow":false,"l":6},{"pattern":"adasd","message":"/[\\\\S]+/","trigger":["change"],"type":"custom","rulesType":["custom"],"id":1635330267425,"isShow":false}],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"isImport":{"show":false},"controller":{"disabled":{"update":false,"view":true},"visible":{"update":true,"view":true}}}],"rows":[]}',
      json1: '{"config":{"labelPosition":"left","labelWidth":90,"gutter":20,"size":"default","labelColon":false},"schema":[{"id":1634806606782,"type":"string","name":"32","defaultValue":null,"layout":24,"required":false,"title":{"content":"单行文本","icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Input"},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"isImport":{"show":false},"controller":{"disabled":{"update":false,"view":true},"visible":{"update":true,"view":true}}},{"id":1634806607847,"type":"number","name":"232","defaultValue":null,"layout":24,"required":false,"title":{"content":"计数器","icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"InputNumber","min":-100,"max":100,"step":1,"precision":0},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"isImport":{"show":false},"controller":{"disabled":{"update":false,"view":true},"visible":{"update":true,"view":true}}},{"id":1634806608764,"type":"string","name":"213","defaultValue":null,"layout":24,"required":false,"title":{"content":"多行文本","icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Textarea"},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"isImport":{"show":false},"controller":{"disabled":{"update":false,"view":true},"visible":{"update":true,"view":true}}},{"id":1634806609484,"type":"string","name":"12312","defaultValue":null,"layout":24,"required":false,"title":{"content":"下拉选择","icon":{"show":false,"iconPosition":"left","iconType":"icon","iconName":"","tips":""}},"form":{"type":"Select","options":{"type":"static","remote":"","localstorage":"","staticList":[{"label":"展示1","value":"key1"},{"label":"展示2","value":"key2"}]}},"validateRules":[],"search":{"show":false,"sort":1,"layout":6,"label":"","type":"simple"},"table":{"show":false,"label":"","width":150,"fixed":"","ellipsis":false,"sortable":false,"sort":1,"render":""},"isImport":{"show":false},"controller":{"disabled":{"update":false,"view":true},"visible":{"update":true,"view":true}}}],"rows":[]}',
    }
  },
  methods: {
    getJson() {
      const json = this.$refs.form.getJson()
      console.log(json)
    },
  },
}
</script>
<style lang="scss" scoped>
#app{
  width: 100vw;
  height: 100vh;
}
.pack{
  width: 1400px;
  height: 800px;
  border: 1px solid #912727;
}
</style>