<template>
  <div class="formContent">
    <div class="form">
      <cy-formCreate :config="fromConfig">
        <template v-slot:inputSlot="{ Item, model, itemName }">
          <a-input
            :placeholder="Item.placeholder"
            v-model="model[itemName]"
          >
            <a-icon
              slot="prefix"
              type="user"
            />
            <a-tooltip
              slot="suffix"
              title="Extra information"
            >
              <a-icon
                type="info-circle"
                style="color: rgba(0, 0, 0, 0.45)"
              />
            </a-tooltip>
          </a-input>
        </template>
      </cy-formCreate>
    </div>
    <div
      class="jsonContent"
      v-html="formatJson(fromConfig)"
    ></div>
  </div>
</template>

<script>
import cyFormCreate from "../components/formCreate.vue";
import { Input, Icon, Tooltip } from "ant-design-vue";
export default {
  components: {
    "cy-formCreate": cyFormCreate,
    [Input.name]: Input,
    [Icon.name]: Icon,
    [Tooltip.name]: Tooltip,
  },
  data () {
    let validatInput = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("这是自定义校验"));
      } else {
        callback();
      }
    };
    return {
      fromConfig: {
        list: [
          {
            type: "input",
            label: "普通输入框",
            name: "input1",
            placeholder: "请输入默认值",
            model: "测试",
            rules: [{ validator: validatInput, trigger: "blur" }],
            event: [{ eventName: "change", func: this.changeFunc }],
          },
          {
            col: 11,
            label: "插槽组件",
            name: "input2",
            EnableTemplate: true,
            slotName: "inputSlot",
            model: "插槽组件",
            rules: [
              { required: true, message: "请输入插槽内容", trigger: "blur" },
            ],
          },
          {
            col: 11,
            type: "inputSearch",
            label: "搜索框组件",
            name: "input3",
            placeholder: "请输入默认值",
            model: "",
            enterButton: true,
            rules: [{ required: true, message: "请输入内容", trigger: "blur" }],
            event: [{ eventName: "search", func: this.searchFunc }, { eventName: "change", func: this.searchInputFunc }],
          },
          {
            type: "textarea",
            label: "文本域",
            name: "input5",
            placeholder: "请输入默认值",
            model: "",
            rows: "3",
            allowClear: true,
            rules: [{ required: true, message: "请输入内容", trigger: "blur" }],
          },
          {
            type: "radio",
            label: "单选框",
            name: "radio",
            radioType: "button",
            model: 'Apple',
            radioOptions: [
              { label: "Apple", value: "Apple" },
              { label: "Pear", value: "Pear" },
              { label: "Orange", value: "Orange" },
            ],
            rules: [{ required: true, message: "请输入选择", trigger: "blur" }],
            event: [{ eventName: "change", func: this.changeRadioFunc }],
          },
          {
            type: "select",
            label: "多选框",
            name: "select1",
            model: ['Apple', 'Pear'],
            selectOptions: [
              { label: "Apple", value: "Apple", children: [] },
              { label: "Pear", value: "Pear", children: [] },
              { label: "Orange", value: "Orange", children: [] },
            ],
            rules: [{ required: true, message: "请输入选择", trigger: "blur" }],
            event: [{ eventName: "change", func: this.selectFunc }, { eventName: "blur", func: this.selectBlurFunc }],
          },
          {
            type: "cascader",
            label: "层级下拉",
            name: "cascader",
            model: ["zhejiang", "hangzhou", "xihu"],
            suffixIcon: "ab",
            options: [
              {
                value: "zhejiang",
                label: "Zhejiang",
                children: [
                  {
                    value: "hangzhou",
                    label: "Hangzhou",
                    children: [
                      {
                        value: "xihu",
                        label: "West Lake",
                      },
                    ],
                  },
                ],
              },
            ],
            rules: [{ required: true, message: "请输入选择", trigger: "blur" }],
            event: [{ eventName: "filter", func: this.filter }],
          },
          {
            type: "switch",
            label: "开关",
            name: "switch",
            model: true,
            rules: [{ required: true, message: "请输入选择", trigger: "blur" }],
          },
          {
            type: "checkbox",
            label: "多选框",
            name: "checkbox",
            model: ["Apple"],
            options: [
              { label: "Apple", value: "Apple" },
              { label: "Pear", value: "Pear" },
              { label: "Orange", value: "Orange" },
            ],
            rules: [{ required: true, message: "请输入选择", trigger: "blur" }],
          },
          {
            type: "rangePicker",
            label: "时间间隔选择框",
            name: "rangePicker",
            model: null,
            showTime: true,
            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;
    },
    changeFunc (e, val) {
      console.log("输入框的回调函数", e, val);
    },
    searchFunc (e) {
      console.log("搜索回调", e);
    },
    searchInputFunc (e, val) {
      console.log('搜索change事件', e, val)
    },
    changeRadioFunc (e) {
      console.log("单选框回调", e);
    },
    selectFunc (e, val) {
      console.log('下拉框', e, val)
    },
    onSure (form) {
      console.log("表单提交", form);
    },
    onReset () {
      console.log("表单重置");
    },
    filter (value, e) {
      console.log("层级下拉过滤", value, e);
    },
    selectBlurFunc (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 {
    padding-left: 10px;
    width: 400px;
    height: 700px;
    overflow: auto;
    border: 1px solid black;
  }
}
</style>
