<template>
  <div>
    <fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm">
      
        <template slot="blank_1653983187000_78241" slot-scope="scope">
          <!-- 自定义区域 -->
          <!-- use v-model="scope.model.blank_1653983187000_78241" to bind data -->
        </template>
    
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","disabled":false,"remoteFunc":"func_1653983148000_175"},"name":"单行文本","key":"1653983148000_175","model":"input_1653983148000_175","rules":[{"type":"string","message":"单行文本格式不正确"}]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"100%","defaultValue":"","required":false,"disabled":false,"pattern":"","placeholder":"","remoteFunc":"func_1653983149000_86679"},"name":"多行文本","key":"1653983149000_86679","model":"textarea_1653983149000_86679","rules":[]},{"type":"number","icon":"icon-number","options":{"width":"","required":false,"defaultValue":0,"min":0,"max":0,"step":1,"disabled":false,"controlsPosition":"","remoteFunc":"func_1653983151000_34092"},"name":"计数器","key":"1653983151000_34092","model":"number_1653983151000_34092","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"width":"","remote":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1653983153000_65049","disabled":false},"name":"单选框组","key":"1653983153000_65049","model":"radio_1653983153000_65049","rules":[]},{"type":"checkbox","icon":"icon-check-box","options":{"inline":false,"defaultValue":[],"showLabel":false,"options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"required":false,"width":"","remote":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1653983154000_53596","disabled":false},"name":"多选框组","key":"1653983154000_53596","model":"checkbox_1653983154000_53596","rules":[]},{"type":"time","icon":"icon-time","options":{"defaultValue":"","readonly":false,"disabled":false,"editable":true,"clearable":true,"placeholder":"","startPlaceholder":"","endPlaceholder":"","isRange":false,"arrowControl":true,"format":"HH:mm:ss","required":false,"width":"","remoteFunc":"func_1653983156000_19656"},"name":"时间选择器","key":"1653983156000_19656","model":"time_1653983156000_19656","rules":[]},{"type":"date","icon":"icon-date","options":{"defaultValue":"","readonly":false,"disabled":false,"editable":true,"clearable":true,"placeholder":"","startPlaceholder":"","endPlaceholder":"","type":"date","format":"yyyy-MM-dd","timestamp":false,"required":false,"width":"","remoteFunc":"func_1653983158000_54946"},"name":"日期选择器","key":"1653983158000_54946","model":"date_1653983158000_54946","rules":[]},{"type":"rate","icon":"icon-pingfen1","options":{"defaultValue":0,"max":5,"disabled":false,"allowHalf":false,"required":false,"remoteFunc":"func_1653983165000_78203"},"name":"评分","key":"1653983165000_78203","model":"rate_1653983165000_78203","rules":[]},{"type":"color","icon":"icon-color","options":{"defaultValue":"","disabled":false,"showAlpha":false,"required":false,"remoteFunc":"func_1653983168000_67966"},"name":"颜色选择器","key":"1653983168000_67966","model":"color_1653983168000_67966","rules":[]},{"type":"select","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"showLabel":false,"width":"","options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"remote":false,"filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1653983172000_61821"},"name":"下拉选择框","key":"1653983172000_61821","model":"select_1653983172000_61821","rules":[]},{"type":"switch","icon":"icon-switch","options":{"defaultValue":false,"required":false,"disabled":false,"remoteFunc":"func_1653983178000_87727"},"name":"开关","key":"1653983178000_87727","model":"switch_1653983178000_87727","rules":[]},{"type":"slider","icon":"icon-slider","options":{"defaultValue":0,"disabled":false,"required":false,"min":0,"max":100,"step":1,"showInput":false,"range":false,"width":"","remoteFunc":"func_1653983182000_42206"},"name":"滑块","key":"1653983182000_42206","model":"slider_1653983182000_42206","rules":[]},{"type":"text","icon":"icon-wenzishezhi-","options":{"defaultValue":"This is a text","customClass":"","remoteFunc":"func_1653983185000_91176"},"name":"文字","key":"1653983185000_91176","model":"text_1653983185000_91176","rules":[]},{"type":"blank","icon":"icon-zidingyishuju","options":{"defaultType":"String","remoteFunc":"func_1653983187000_78241"},"name":"自定义区域","key":"1653983187000_78241","model":"blank_1653983187000_78241","rules":[]},{"type":"imgupload","icon":"icon-tupian","options":{"defaultValue":[],"size":{"width":100,"height":100},"width":"","tokenFunc":"funcGetToken","token":"","domain":"http://pfp81ptt6.bkt.clouddn.com/","disabled":false,"length":8,"multiple":false,"isQiniu":false,"isDelete":false,"min":0,"isEdit":false,"action":"https://jsonplaceholder.typicode.com/photos/","remoteFunc":"func_1653983190000_53618"},"name":"图片","key":"1653983190000_53618","model":"imgupload_1653983190000_53618","rules":[]},{"type":"editor","icon":"icon-fuwenbenkuang","options":{"defaultValue":"","width":"","remoteFunc":"func_1653983192000_96014"},"name":"编辑器","key":"1653983192000_96014","model":"editor_1653983192000_96014","rules":[]},{"type":"cascader","icon":"icon-jilianxuanze","options":{"defaultValue":[],"width":"","placeholder":"","disabled":false,"clearable":false,"remote":true,"remoteOptions":[],"props":{"value":"value","label":"label","children":"children"},"remoteFunc":"func_1653983194000_49050"},"name":"级联选择器","key":"1653983194000_49050","model":"cascader_1653983194000_49050","rules":[]},{"type":"grid","icon":"icon-grid-","columns":[{"span":12,"list":[]},{"span":12,"list":[]}],"options":{"gutter":0,"justify":"start","align":"top","remoteFunc":"func_1653983197000_34784"},"name":"栅格布局","key":"1653983197000_34784","model":"grid_1653983197000_34784","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small"}},
        editData: {},
        remoteFuncs: {
          
            func_1653983194000_49050 (resolve) {
              // 级联选择器 cascader_1653983194000_49050
              // Call callback function once get the data from remote server
              // resolve(data)
            },
    
            funcGetToken (resolve) {
              // 图片 imgupload_1653983190000_53618
              // Call callback function once get the token
              // resolve(token)
            },
    
        }
      }
    },
    methods: {
      handleSubmit () {
        this.$refs.generateForm.getData().then(data => {
          // data check success
          // data - form data
        }).catch(e => {
          // data check failed
        })
      }
    }
  }
</script>