<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: 'timePicker',
            label: "时间选择器",
            name: 'timePicker',
            placeholder: '请输入默认值',
            model: null,
            rules: [
              { required: true, message: '请输入内容', trigger: 'blur' }
            ],
          },
          {
            type: 'monthPicker',
            label: "月份选择器",
            name: 'monthPicker',
            placeholder: '请输入默认值',
            model: null,
            rules: [
              { required: true, message: '请输入内容', trigger: 'blur' }
            ],
          },
          {
            type: 'dataPicker',
            label: "日期选择器",
            name: 'dataPicker',
            placeholder: '请输入默认值',
            model: null,
            rules: [
              { required: true, message: '请输入内容', trigger: 'blur' }
            ],
          },
          {
            type: 'rangePicker',
            label: "年月日选择器",
            name: 'rangePicker',

            model: null,
            rules: [
              { required: true, message: '请输入内容', trigger: 'blur' }
            ],
          },
        ],
        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;
    },
    onReset () { },
    onSure () { }
  },
}
</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>

