<template>
  <div>
    <div class="van-block__title">
      基础用法
    </div>
    <van-form colon @submit="onSave" @failed="onFailed">
      <van-cell-group>

        <van-field
          v-model="form.text"
          label="单行文本"
          placeholder="请输入"
          autocapitalize="off"
          autocorrect="off"
          clearable
          required
          name="text"
          input-align="right"
          :rules="[{ required: true, message: '必填' }]"
        />

        <van-field
          v-model="form.textarea"
          label="多行文本"
          type="textarea"
          placeholder="请输入"
          rows="2"
          autosize
          clearable
          required
          input-align="right"
          :rules="[{ required: true, message: '必填' }]"
        />
        <van-field
          v-model="form.number"
          label="数字"
          type="number"
          placeholder="请输入"
          input-align="right"
          clearable
          required
        />

        <ibps-radio
          v-model="form.radio"
          :options="options"
          label="单项选择"
          placeholder="请选择"
          clearable
          required
          :rules="[{ required: true, message: '必填' }]"
        />

        <ibps-checkbox
          v-model="form.checkbox"
          :options="options"
          label="多项选择"
          placeholder="请选择"
          clearable
          required
          :rules="[{ required: true, message: '必填' }]"
        />
        <ibps-select
          v-model="form.select"
          :options="options"
          label="下拉选择"
          title="下拉"
          placeholder="请选择"
          clearable
          required
          :rules="[{ required: true, message: '必填' }]"
        />

        <ibps-date-picker
          v-model="form.date"
          label="日期"
          placeholder="请选择"
          format="yyyy-MM-dd"
          clearable
          required
          :rules="[{ required: true, message: '必填' }]"
        />

        <ibps-editor
          v-model="form.editor"
          :readonly="true"
          label="只读富文本框"
        />
        <ibps-editor
          v-model="form.editor1"
          label="富文本框"
          :rules="[{ required: true, message: '必填' }]"
        />

        <ibps-dictionary
          v-model="form.dictionary"
          :multiple="false"
          label="数据字典单选"
          select-mode="leaf"
          display-mode="path"
          placeholder="请选择"
          type-key="fieldControl"
          clearable
          required
          :rules="[{ required: true, message: '必填' }]"
        />
        <ibps-dictionary
          v-model="form.dictionary1"
          multiple
          label="数据字典多选树形"
          select-mode="any"
          display-mode="path"
          placeholder="请选择"
          type-key="sxjg"
          clearable
          required
          :rules="[{ required: true, message: '必填' }]"
        />

        <ibps-auto-number
          v-model="form.autoNumber"
          alias="lcbh"
          label="自动编号"
          clearable
          required
        />

        <ibps-signature
          v-model="form.signature"
          clearable
          undoable
          required
          label="签名"
          placeholder="请在这里输入你的签名"
          :rules="[{ required: true, message: '必填' }]"
        />
        <ibps-address
          v-model="form.address"
          store="stringKey"
          placeholder="请选择"
          label="地址"
          clearable
          required
          has-street
          :rules="[{ required: true, message: '必填' }]"
        />
        <ibps-checker
          v-model="form.checker1"
          :options="options"
          label="多选器单选"
          radio-required
          :cols="3"
          checker
          option-align="center"
          :rules="[{ required: true, message: '必填' }]"
        />

        <ibps-checker
          v-model="form.checker2"
          label="多选器多选"
          :options="options"
          :max="3"
          :cols="3"
          multiple
          checker
          :rules="[{ required: true, message: '必填' }]"
        />

        <ibps-user-selector
          v-model="form.userSelector"
          label="用户选择器"
          type="employee"
          multiple
          clearable
          required
          :rules="[{ required: true, message: '必填' }]"
        />
        <ibps-user-selector
          v-model="form.userSelector1"
          label="用户选择器"
          type="employee"
          clearable
          required
          :rules="[{ required: true, message: '必填' }]"
        />

        <ibps-user-selector
          v-model="form.orgSelector"
          label="组织选择器"
          type="org"
          multiple
          clearable
          required
          :rules="[{ required: true, message: '必填' }]"
        />

        <ibps-user-selector
          v-model="form.postSelector"
          label="岗位选择器"
          type="position"
          multiple
          clearable
          required
          :rules="[{ required: true, message: '必填' }]"
        />

        <ibps-user-selector
          v-model="form.roleSelector"
          label="角色选择器"
          type="role"
          multiple
          clearable
          required
          :rules="[{ required: true, message: '必填' }]"
        />
        <ibps-uploader
          v-model="form.uploader"
          multiple
          label="上传附件1"
          placeholder="请上传附件"
          clearable
          required
          :rules="[{ required: true, message: '必填' }]"
        />
        <ibps-uploader
          v-model="form.uploader1"
          multiple
          label="上传附件只读"
          placeholder="请上传附件"
          clearable
          required
          readonly
          :rules="[{ required: true, message: '必填' }]"
        />

        <!--

        <ibps-custom-dialog
          v-model="form.customDialog"
          template-key="xjsqd"
          label="自定义对话框"
          multiple
          placeholder="请选择"
          clearable
        />

        <ibps-type-selector
          v-model="form.typeId"
          category-key="NOTICE_TYPE"
          label="公告类型"
          clearable
        />

   -->

        <van-cell>
          <van-row gutter="20">
            <van-col span="12">
              <van-button type="default" style="width:100%;" @click="onCancel">
                取消
              </van-button>
            </van-col>
            <van-col span="12">
              <van-button type="primary" style="width:100%;" native-type="submit">
                保存
              </van-button>
            </van-col>
          </van-row>
        </van-cell>
      <!-- <ibps-toolbar
        :actions="actions"
      /> -->
      </van-cell-group>
    </van-form>
  </div>
</template>
<script>
import IbpsRadio from '@/components/ibps-radio'
import IbpsCheckbox from '@/components/ibps-checkbox'
import IbpsSelect from '@/components/ibps-select'
import IbpsChecker from '@/components/ibps-checker'
import IbpsDatePicker from '@/components/ibps-date-picker'
import IbpsEditor from '@/components/ibps-editor'

import IbpsDictionary from '@/business/platform/cat/dictionary'
import IbpsAutoNumber from '@/business/platform/system/identity/auto-number'
import IbpsUploader from '@/business/platform/file/uploader'
import IbpsSignature from '@/components/ibps-signature'
import IbpsAddress from '@/components/ibps-address'
import IbpsUserSelector from '@/business/platform/org/selector'

// import IbpsToolbar from '@/components/ibps-toolbar'
export default {
  components: {
    IbpsRadio,
    IbpsCheckbox,
    IbpsSelect,
    IbpsChecker,
    IbpsDatePicker,
    IbpsEditor,
    IbpsDictionary,
    IbpsAutoNumber,
    IbpsUploader,
    IbpsSignature,
    IbpsAddress,
    IbpsUserSelector
    // IbpsToolbar
  },
  data() {
    return {
      form: {
        text: 'text',
        textarea: 'textarea',
        number: '12',
        radio: '选项3',
        checkbox: '选项2,选项4', //
        checker1: '选项2',
        checker2: '选项2,选项1',
        select: '选项4',
        date: '2018-07-21',
        dictionary: 'radio',
        dictionary1: 'fq,z1', // ['zhuangzu', 'zangzu']
        userSelector: '[{id:"1",name:"管理员"}]',
        userSelector1: '[{id:"1",name:"管理员"}]',
        orgSelector: '', // 445920922105282560,481058896081846272
        postSelector: '',
        roleSelector: '',
        customDialog: '', // '[{\"id_\":\"466335903523012608\",\"dhwb_\":\"测试\"}]',
        autoNumber: '',
        uploader: '', // '[{\"id\":\"494883331066822656\",\"fileName\":\"new 12\"}]',
        uploader1: '', // 704659412089831424,704655020301221888
        address: '{"street":"22","province":44,"city":4401,"country":"CN","district":440106}',
        editor: '<div>金通智慧实验室信息管理系统<font color=\"red\">dddd</font></div><div></div>',
        editor1: '<div>金通智慧实验室信息管理系统</div>', //
        signature: 'data:image/png;base64, ',
        signature1: '',
        typeId: '489381580377161728'
      },

      options: [{
        value: '选项1',
        label: '黄金糕',
        disabled: true
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      },
      {
        value: '选项6',
        label: '蚵仔煎6'
      }, {
        value: '选项7',
        label: '龙须面7'
      }, {
        value: '选项8',
        label: '北京烤鸭8'
      }],
      actions: [
        {
          name: '取消',
          type: 'default',
          callback: this.onCancel
        },
        {
          name: '保存',
          type: 'primary',
          callback: this.onSave
        }
      ]
    }
  },
  methods: {
    onCancel() {
      this.$notify({
        type: 'danger',
        message: '取消'
      })
    },
    onFailed(e) {
      console.info(e)
      this.$notify({
        type: 'danger',
        message: '表单未正确填写！'
      })
    },
    onSave() {
      this.$dialog.alert({
        message: this.format4popup(this.form)
      })
    },
    format4popup(object) {
      return JSON.stringify(object, null, 2)
        .replace(/</g, '&lt;').replace(/>/g, '&gt;')
    }
  }

}
</script>
