<script>
export default {
  inheritAttrs: false,

  methods: {
    async validate () {
      try {
        await this.$refs.form_layout.validate()
      } catch (err) {
        const msg = Object.values(err)[0][0].message
        this.$message.error(msg)
        throw msg
      }
    }
  },

  render (h) {
    const { items, ...props } = this.$attrs
    const childs = []
    for (let i = 0, len = items.length; i < len; i++) {
      const { model, style, ...itemProps } = items[i]
      childs.push(h(
        'el-form-item',
        {
          style: { width: props.inline === '' ? '36%' : null, ...style },
          props: itemProps,
          scopedSlots: {
            default: () => {
              if (itemProps.prop && this.$scopedSlots[itemProps.prop]) return this.$scopedSlots[itemProps.prop](items[i])

              const { tag, on, attrs = {}, ...modelProps } = model
              attrs.maxlength ??= 99

              return h(tag, {
                props: { ...modelProps, value: props.model[itemProps.prop] },
                attrs: { placeholder: tag === 'el-input' ? '请输入' : modelProps.placeholder || '请选择', ...attrs },
                on: { input: (val) => (props.model[itemProps.prop] = val), ...on }
              })
            }
          }
        }
      ))
    }
    return h('el-form', { ref: 'form_layout', props, class: 'form_layout' }, childs)
  }
}
</script>

<style lang="scss">
.form_layout {
  .el-cascader,
  .el-select,
  .el-date-editor.el-input {
    width: 100%;
  }
}
</style>
