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

  </glp-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'

const resp = (response: any) => response.data

const def: FormDef = {
  controls: [
    {
      type: 'grid',
      columns: [
        {
          span: 24,
          controls: [
            {
              type: 'plain',
              model: 't0',
              label: '联动效果',
              options: {
                defaultValue: '联动， 如果名称没有值， 使用ID填充，否则不做任何处理',
                color: 'primary'
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'text',
              model: 't1',
              label: 'ID',
              options: {
                onChange: ({ form, value }) => {
                  if (form.t2) return
                  form.t2 = value
                }
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'text',
              model: 't2',
              label: '名称'
            }
          ]
        }
      ]
    }
  ]
}

/**
 * @title 文字输入框控件
 * @desc 功能列举。
 */
@Component
export default class TextExample 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>
