<template>
<div>
<!-- <honjo-card title="表单渲染器"> -->
  <honjo-form-render :def="def" ref="fm" :form="form">
    <template v-slot:checkbox="{proxy, options}">
      <el-checkbox-group v-model="proxy.value" >
        <el-checkbox :label="row" v-for="row in options.options" :key="row"></el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-slot:plain="{proxy}">
      <el-link type="primary">{{proxy.value}}</el-link>
    </template>
  </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>
<!-- </honjo-card> -->
</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: 12,
          controls: [
            {
              type: 'text',
              model: 't1',
              label: '文字',
              options: {
                disabled: true,
                labelDes: '文字描述',
                defaultValue: 'Alison',
                labelWidth: '220px'
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'text',
              model: 't2',
              label: '文字必填',
              options: { placeholder: '请输入文字', attrs: { autocomplete: 'new-password' } },
              rules: [{ required: true, message: '字段2必填' }]
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'select',
              model: 't3',
              label: '单选',
              options: {
                disabled: false,
                placeholder: '请选择一项',
                options: [{ __label: 'youxiao', __value: '0', disabled: true }]
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'select',
              model: 't4',
              label: '多选',
              options: {
                multiple: true,
                options: { BJ: '北京', SH: '上海', SZ: '深圳' }
              }
            }
          ]
        },
        {
          span: 6,
          controls: [
            {
              type: 'date',
              model: 't5',
              label: '日期'
            }
          ]
        },
        {
          span: 6,
          controls: [
            {
              type: 'date',
              model: 't6',
              label: '日期时间',
              options: {
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm:ss',
                onChange: ({ value, form, rowForm }: any) => {
                  console.log('date change', value, form, rowForm)
                }
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'date',
              model: 't7',
              label: '日期范围',
              options: {
                type: 'daterange',
                format: 'yyyy-MM-dd HH:mm:ss'
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'custom',
              customType: 'checkbox',
              model: 't8',
              label: '自定义复选',
              options: {

                defaultValue: [],
                options: ['复选框 A', '复选框 B', '复选框 C']
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'custom',
              customType: 'plain',
              model: 't9',
              label: '自定义文本',
              options: {
                defaultValue: 'https://baidu.com'
              }
            }
          ]
        },
        {
          span: 24,
          controls: [
            {
              type: 'plain',
              model: 't10',
              label: '文本'
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'plain',
              model: 't12',
              label: '带颜色文本',
              options: { color: 'danger', defaultValue: 'hello world' }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'textarea',
              model: 't11',
              label: '多行文本',
              options: { maxlength: 50, placeholder: '请输入文本， 最多50字', disabled: false }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'radio',
              model: 't13',
              label: '单选框',
              options: {
                desc: { SH: '上海', SC: '四川' },
                options: { SH: '上海', BJ: '北京', SC: '四川', CQ: '重庆', GZ: '广州' }
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'radio',
              model: 't14',
              label: '单选按钮',
              options: {
                type: 'button',
                options: { SH: '上海', BJ: '北京', SC: '四川', CQ: '重庆', GZ: '广州' }
              }
            }
          ]
        },
        {
          span: 24,
          controls: [
            {
              type: 'checkbox',
              model: 't15',
              label: '复选框',
              options: {
                showQuestionIcon: true,
                questionIconFn: (items: any) => {
                  console.log('dddddd', items)
                },
                options: { SH: '上海', BJ: '北京', SC: '四川', CQ: '重庆', GZ: '广州' }
              }
            }
          ]
        },
        {
          span: 24,
          controls: [
            {
              type: 'selectbox',
              model: 't35',
              label: '签署方角色',
              options: {
                itemTips: 'sdf'
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'time',
              model: 't16',
              label: '时间'
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'time',
              model: 't17',
              label: '时间范围',
              options: { type: 'timerange' }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'text',
              model: 't18',
              label: '网址',
              options: { prepend: 'https://' }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'text',
              model: 't19',
              label: '利率',
              options: { append: '%' }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'upload',
              model: 't20',
              label: '文件',
              options: { action: 'http://localhost:3000/nas/upload', resp, tip: '本地服务器', multiple: true }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'upload',
              model: 't21',
              label: '文件1',
              options: { editAble: true, editControl: true, onView: (file) => { window.open(file.url) }, type: 'list', action: 'http://localhost:3000/nas/upload', resp, defaultValue: [{ name: '1.jpg', url: 'http://localhost:3000/nas/download/1.jpg' }] }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'select',
              model: 't22',
              label: '异步下拉框(10s)',
              options: {
                options: new Promise((resolve, reject) => setTimeout(() => resolve({ 0: '有效', 1: '无效' }), 10 * 1000))
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'radio',
              model: 't23',
              label: '异步单选',
              options: {
                onRadioChange: () => {
                  console.log('============')
                },
                options: new Promise((resolve, reject) => setTimeout(() => resolve({ SH: '上海', BJ: '北京', SC: '四川', CQ: '重庆', GZ: '广州' }), 5 * 1000))
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'checkbox',
              model: 't24',
              label: '异步复选',
              options: {
                options: new Promise((resolve, reject) => setTimeout(() => resolve({ SH: '上海', BJ: '北京', SC: '四川', CQ: '重庆', GZ: '广州' }), 5 * 1000))
              }
            }
          ]
        },
        {
          span: 24,
          controls: [
            {
              type: 'table',
              model: 't25',
              label: '表格',
              controls: [
                {
                  type: 'grid',
                  columns: [
                    {
                      span: 8,
                      controls: [
                        {
                          type: 'text',
                          model: 'name',
                          label: '合同',
                          rules: [{ required: true }]
                        }
                      ]
                    },
                    {
                      span: 8,
                      controls: [
                        {
                          type: 'text',
                          model: 'roderNo',
                          label: '订单编号'
                        }
                      ]
                    },
                    {
                      span: 8,
                      controls: [
                        {
                          type: 'date',
                          model: 'date',
                          label: '起始日期',
                          options: { type: 'daterange' }
                        }
                      ]
                    },
                    {
                      span: 8,
                      controls: [
                        {
                          type: 'select',
                          model: 't1',
                          label: '选项',
                          options: {
                            options: () => {
                              const b = { 1: 'A', 2: 'B', 3: 'C', 4: 'D', 5: 'E', 6: 'F', 7: 'G', 8: 'H', 9: 'I', 10: 'J', 11: 'K', 12: 'L' }
                              const i = (Math.round(Math.random() * 100) % 4) + 1
                              const ret: any = {}
                              Object.entries(b).forEach(([k, v]: any) => {
                                if (k % i === 0) ret[k] = v
                              })
                              return Promise.resolve(ret)
                            }
                          }
                        }
                      ]
                    },
                    {
                      span: 8,
                      controls: [
                        {
                          type: 'text',
                          model: 'A',
                          label: 'A',
                          dependOn: 'rowForm.t1 === "1"'
                        }
                      ]
                    },
                    {
                      span: 8,
                      controls: [
                        {
                          type: 'upload',
                          model: 'certs',
                          label: '凭证',
                          options: { action: 'http://localhost:3000/nas/upload', resp }
                        }
                      ]
                    }
                  ]
                }
              ],
              options: {
                defaultValue: [{ name: 'Alison' }],
                limit: 3,
                addBtnText: '自定义新增按钮文字',
                min: 1
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'select',
              model: 't26',
              label: '异步级联下拉框1',
              options: {
                options: { A: '有效', B: '无效' }
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'select',
              model: 't27',
              label: '异步级联下拉框2',
              options: {
                options: ({ form }) => {
                  const ret = form.t26 ? { [form.t26 + '-1']: `${form.t26}-1L`, [form.t26 + '-2']: `${form.t26}-2L` } : {}
                  return Promise.resolve(ret) as any
                }
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'select',
              model: 't28',
              label: '城市(自动填充)',
              options: {
                options: [{ __label: '上海', __value: '1', code: '200020' }, { __label: '北京', __value: '2', code: '100010' }],
                onValueChange: ({ form, items, value }) => {
                  const t = items.find((v: any) => v.__value === value)
                  if (t) form.t29 = t.code
                  else form.t29 = ''
                  setTimeout(() => {
                    form.t28 = ''
                  }, 5000)
                }
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'text',
              model: 't29',
              label: '邮编'
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'select',
              model: 't30',
              label: '远程搜索',
              options: {
                filterable: true,
                remote: true,
                remoteMethod: (q: string, cb) => {
                  setTimeout(() => {
                    const items = [{ __label: '上海', __value: '1', code: '200020' }, { __label: '北京', __value: '2', code: '100010' }]
                    if (!q) cb(items)
                    else {
                      cb(items.filter((v: any) => v.__label.indexOf(q) !== -1))
                    }
                  }, 2500)
                }
              }
            }
          ]
        },
        {
          span: 12,
          controls: [
            {
              type: 'number',
              model: 't31',
              label: '数字',
              options: {
                max: 9999,
                min: 0,
                precision: 2,
                append: '%'
              }
            }
          ]
        }
      ]
    }
  ],
  options: {
    disabled: false
  }
}

/**
 * @title  基本
 * @desc 最基本的用法。
 */
@Component
export default class BasicExample extends Vue {
  @Ref() fm!: any

  def = def

  form = {
    t10: 'git查看远程仓库地址命令:$gitremote-vgit... 吟游少年的博客 180 git同时连接多个远程仓库 时间:2020-3-30背景:笔者想使用git连接两个远程仓库的目的',
    t26: 'A',
    t27: 'A-1',
    t35: [
      {
        label: '保理商',
        auto: '0'
      },
      {
        auto: '1',
        label: '授信主体'
      }
    ]
  }

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

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