<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: '开始时间不能大于结束时间',
                color: 'primary'
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'date',
              model: 't1',
              label: '开始时间',
              rules: [{
                validator: (rule, value, callback) => {
                  const form: any = rule.form
                  if (value && form.t2) {
                    if (value.getTime() > form.t2.getTime()) return callback(new Error('开始时间不能大于结束时间'))
                  }
                  callback()
                }
              }]
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'date',
              model: 't2',
              label: '结束时间'
            }
          ]
        }
      ]
    }
  ]
}

/**
 * @title 日期控件
 * @desc 功能列举。
 */
@Component
export default class DateExample 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>
