<template>
  <div class="formContent">
    <div class="form">
      <formCreate :config='fromConfig'>

      </formCreate>
    </div>
    <div
      class="jsonContent"
      v-html="formatJson(fromConfig)"
    >

    </div>
  </div>
</template>

<script>
import formCreate from '../components/formCreate.vue'
export default {
  components: {
    formCreate,
  },
  data () {
    return {
      fromConfig: {
        list: [
          {
            type: 'input',
            label: "基本输入框",
            name: 'input1',
            placeholder: '请输入默认值',
            model: "",
            event: [
              { eventName: 'change', func: this.changeFunc }
            ]
          },
          {
            type: 'inputPassword',
            label: "密码输入框",
            name: 'input2',
            placeholder: '请输入默认值',
            model: "",
          },
          {
            col: 11,
            type: 'inputSearch',
            label: "搜索框组件",
            name: 'input3',
            placeholder: '请输入默认值',
            model: "",
            enterButton: true,
            rules: [
              { required: true, message: '请输入内容', trigger: 'blur' }
            ],
            event: [
              { eventName: 'search', func: this.searchFunc }
            ]
          },
          {
            type: 'textarea',
            label: "文本域",
            name: 'input5',
            placeholder: '请输入默认值',
            model: "",
            rows: "3",
            rules: [
              { required: true, message: '请输入内容', trigger: 'blur' }
            ],
          },
          {
            type: 'inputNumber',
            label: "数字输入框",
            name: 'input6',
            placeholder: '请输入默认值',
            model: "",
            min: 0,
            max: 10,
            step: 0.1,
            formatter: this.formatter,
            rules: [
              { required: true, message: '请输入内容', trigger: 'blur' }
            ],
            event: [
              { eventName: 'change', func: this.changeFunc }
            ]
          },
        ],
        onSure: this.onSure,
        onReset: this.onReset
      },
    }
  },
  methods: {
    // 格式化json
    formatJson (msg) {
      var rep = "~";
      var jsonStr = JSON.stringify(msg, null, rep)
      var str = "";
      for (var i = 0; i < jsonStr.length; i++) {
        var text2 = jsonStr.charAt(i)
        if (i > 1) {
          var text = jsonStr.charAt(i - 1)
          if (rep !== text && rep === text2) {
            str += "<br/>"
          }
        }
        str += text2;
      }
      jsonStr = "";
      for (var j = 0; j < str.length; j++) {
        var textH = str.charAt(j);
        if (rep === textH) { jsonStr += "&nbsp;&nbsp;&nbsp;&nbsp;" } else {
          jsonStr += textH;
        }
        if (j === str.length - 2) { jsonStr += "<br/>" }
      }
      return jsonStr;
    },
    formatter (value) {
      return `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    changeFunc (e) {
      console.log('输入框的回调函数', e);
    },
    searchFunc (e) {
      console.log('搜索回调', e);
    },
    changeRadioFunc (e) {
      console.log('单选框回调', e);
    },
    onSure (form) {
      console.log('表单提交', form);
    },
    onReset () {
      console.log('表单重置');
    },
    filter (value, e) {
      console.log('层级下拉过滤', value, e);

    }
  },
}
</script>

<style lang="less" scoped>
.formContent {
  display: flex;
  justify-content: space-around;
  .form {
    width: 600px;
    padding: 10px;
    border: 1px solid black;
    /deep/ .ant-form-item {
      margin-bottom: 10px;
    }
  }
  .jsonContent {
    width: 400px;
    height: 700px;
    overflow: auto;
    border: 1px solid black;
  }
}
</style>