<template>
  <div>
    <el-dialog v-bind="$attrs" width="80%" :close-on-click-modal="false" :modal-append-to-body="false" v-on="$listeners" @open="onOpen" @close="onClose">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="8">
            <div>提交数据：</div>
            <pre>
                <code>
                    <div>{{form}}</div>
                </code>
            </pre>
          </el-col>
          <el-col :span="16">
            <div>数据字段解析：</div>
            <pre>
                <code>
                    <div>{{formData}}</div>
                </code>
            </pre>
          </el-col>
        </el-form>
      </el-row>

      <div slot="footer">
        <el-button @click="close">
          取消
        </el-button>
        <el-button type="primary" @click="handelConfirm">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: ['showFileName', 'form'],
  data() {
    return {
      formData: {
        "fields": [
          {
            "tag": "组件类型",
            "tagIcon": "组件图标",
            "label": "标题",
            "vModel": "字段名",
            "formId": "组件id",
            "placeholder": "占位提示",
            "defaultValue": "默认值",
            "span": '表单栅格',
            "clearable": "能否清空 boolean",
            "prepend": "前缀",
            "append": "后缀",
            "prefix-icon": "前图标",
            "suffix-icon": "后图标",
            "maxlength": "最多输入",
            "show-word-limit": "输入统计",
            "readonly": '是否只读 boolean',
            "disabled": '是否禁用 boolean',
            "required": '是否必填 boolean',
            "multiple": '是否多选 boolean',
            "min": '最小值  number',
            "max": '最大值  number',
            "options": [
              {
                "label": "显示字段",
                "value": "对应值"
              }
            ],
            "minRows": '最小行数  number',
            "mixRows": '最大行数  number',
            "remark": '备用 json字符串',
            "regList": [
              {
                "type": "正则类型",
                "pattern": "正则",
                "message": "提示文案"
              }
            ]
          }
        ],
        "size": "表单尺寸",
        "labelPosition": "标签对齐",
        "labelWidth": '标签宽度',
        "gutter": '表单水平间隔',
        "disabled": '是否禁用表单',
      },
      rules: {
        fileName: [{
          required: true,
          message: '请输入文件名',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '生成类型不能为空',
          trigger: 'change'
        }]
      },
      typeOptions: [{
        label: '页面',
        value: 'file'
      }, {
        label: '弹窗',
        value: 'dialog'
      }]
    }
  },
  computed: {
  },
  watch: {},
  mounted() { },
  methods: {
    onOpen() {
      if (this.showFileName) {
        this.formData.fileName = `${+new Date()}.vue`
      }
    },
    onClose() {
    },
    close(e) {
      this.$emit('update:visible', false)
    },
    handelConfirm() {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        this.$emit('confirm', { ...this.formData })
        this.close()
      })
    }
  }
}
</script>
