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

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

const regions = [
  {
    value: '1',
    label: '上海',
    children: [
      {
        value: '1-1',
        label: '浦东新区',
        children: [{ value: '1-1-1', label: '张江' }, { value: '1-1-2', label: '唐镇' }, { value: '1-1-3', label: '川沙' }]
      },
      {
        value: '1-2',
        label: '金山区',
        children: [{ value: '1-2-1', label: '朱泾' }, { value: '1-2-2', label: '石化' }, { value: '1-2-3', label: '亭林' }]
      }
    ]
  },
  {
    value: '2',
    label: '四川省',
    children: [
      {
        value: '2-1',
        label: '成都市',
        children: [{ value: '2-1-1', label: '金牛区' }, { value: '2-1-2', label: '双流' }, { value: '2-1-3', label: '白羊区' }]
      }
    ]
  }
]

const def: FormDef = {
  controls: [
    {
      type: 'grid',
      columns: [
        { span: 24, controls: [{ type: 'upload', model: 'upload', label: '上传验证触发', options: { action: 'http://localhost:3000/nas/upload', resp }, rules: [{ required: true, type: 'array', trigger: 'blur' }] }] },
        { span: 12, controls: [{ type: 'cascader', model: 'address', label: '地址', options: { options: regions } }] },
        { span: 12, controls: [{ type: 'file-link', model: 'files', label: '附件' }] },
        { span: 12, controls: [{ type: 'plain', model: 'overflow', label: '溢出问题' }] },
        { span: 12, controls: [{ type: 'plain', model: 'overflow1', label: '溢出问题1', options: { ellipsis: true } }] },
        { span: 6, controls: [{ type: 'date', model: 'startDate', label: '开始日期', options: { disabledDate: disabledDateStart } }] },
        { span: 6, controls: [{ type: 'date', model: 'endDate', label: '结束日期', options: { disabledDate: disabledDateEnd } }] }
      ]
    }
  ]
}

function disabledDateStart ({ form }: any) {
  return (date: Date) => {
    if (!form.endDate) return false
    return date > form.endDate
  }
}

function disabledDateEnd ({ form }: any) {
  return (date: Date) => {
    if (!form.startDate) return false
    return date < form.startDate
  }
}

/**
 * @title 新组件
 * @desc 新增组件用例。
 */
@Component
export default class NewExample extends Vue {
  @Ref() fm!: any

  def = def

  form = {
    files: [
      { name: '阿里云图片文件.jpg', url: 'http://honjo-common.oss-cn-shanghai.aliyuncs.com/tmp/0518d981-b53b-4dc3-8f0a-70f40f4e441c.jpg' },
      { name: '附件图片文件.jpg', url: 'http://localhost:3000/nas/download/1.jpg' },
      { name: '阿里云PDF文件.pdf', url: 'http://honjo-common.oss-cn-shanghai.aliyuncs.com/tmp/142b7584-9fad-42de-b278-107873065b1e.pdf' },
      { name: '附件PDF文件.pdf', url: 'http://localhost:3000/nas/download/1.pdf' },
      { name: 'word文件.docx', url: 'http://localhost:3000/nas/download/1.docx' },
      { name: 'Excel文件.docx', url: 'http://localhost:3000/nas/download/1.xlsx' }
    ],
    overflow: '321489463864384632864832643246398463284638246832463824632468324638246236432643246328463469326439249626',
    overflow1: '321489463864384632864832643246398463284638246832463824632468324638246236432643246328463469326439249626'
  }

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

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