<template>
<div>
  <honjo-form-render :def="def" ref="fm" :form="form">

  </honjo-form-render>

  <div style="text-align: center">
    <el-button type="primary" @click="onSubmit" size="small">提 交</el-button>
    <el-button @click="onReset" size="small">重 置</el-button>
  </div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import { FormDef } from '@@/components/form-render/type'

function c (name: string): any {
  return [{ type: 'text', model: name, label: name }]
}

const def: FormDef = {
  controls: [
    {
      type: 'grid',
      columns: [
        { span: 8, controls: c('t1') },
        { span: 8, controls: c('t2') },
        { span: 8, controls: c('t3') },
        { span: 8, controls: c('t4') },
        { offset: 8, span: 8, controls: c('t5') },
        { span: 8, controls: c('t6') },
        { span: 8, controls: c('t7') },
        { offset: 8, pull: 8, span: 8, controls: c('t8') },
        { span: 8, controls: c('t9') },
        { xl: 4, lg: 6, md: 8, sm: 12, xs: 24, controls: c('r1') },
        { xl: 4, lg: 6, md: 8, sm: 12, xs: 24, controls: c('r2') },
        { xl: 4, lg: 6, md: 8, sm: 12, xs: 24, controls: c('r3') },
        { xl: 4, lg: 6, md: 8, sm: 12, xs: 24, controls: c('r4') },
        { xl: 4, lg: 6, md: 8, sm: 12, xs: 24, controls: c('r5') },
        { xl: 4, lg: 6, md: 8, sm: 12, xs: 24, controls: c('r6') }
      ]
    }
  ]
}

/**
 * @title 栅格布局
 * @desc 栅格控件。
 */
@Component
export default class GridExample extends Vue {
  @Ref() fm!: any

  def = def

  form = {}

  onSubmit () {
    this.fm.submit().then((params: any) => {
      console.log('params : ', params)
    }).catch((e: any) => {
      // do nothing
    })
  }

  onReset () {
    this.fm.reset()
  }
}
</script>
