  <template>
    <div>
    <!-- bidirectional data binding（双向数据绑定） -->
      <Modal v-model='modal' :fullscreen='fullscreen'>
        <Input v-model='value'></Input>
         <editor @getValue='getInfo' :uploadUrl='uploadUrl' :value='value' height='400px'></editor>
         <div slot='footer'>
        <Button @click='getInfo'>获取内容</Button>
           
         </div>      
      </Modal>
      <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="Password">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
        </FormItem>
    </Form>
    </div>
  </template>
   
  <script>
    import editor from './ckeditor.vue'
    import {sapi} from '../config/index.js'
    import localStorage from '../service/localstorage.service.js'
    export default {
      data () {
        return {
          modal: true,
          fullscreen: true,
          content: '<h2>I am Example</h2>',
          content1: '<h2>I am Example</h2>',
          uploadUrl: `${sapi}/api/ckeditor/uploadImage?token=${localStorage.get('token')}&&backUrl=/getimage`,
          value: '22',
          editorOption: {
            // some quill options
          },
          formInline: {
              user: '',
              password: ''
          },
          ruleInline: {
              user: [
                  { required: false, message: 'Please fill in the user name', trigger: 'blur', pattern:/^1[3456789]\d{9}$/, validator: function(rule, value, call){
                    console.log(rule, value) 
                    return call(new Error()) } }
              ],
              password: [
                  { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                  { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
              ]
          }
        }
      },
      watch:{},
      components: {
        editor
      },
      // manually control the data synchronization
      // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
      methods: {
        getInfo(value) {
        console.log(value)
        },
        handleSubmit(name) {
          // this.$refs[name].validate((valid) => {
          //   if (valid) {
          //     this.$Message.success('Success!');
          //   } else {
          //     this.$Message.error('Fail!');
          //   }
          // })
          this.$refs[name].validateField('user', (error) => {
            console.log('------', error)
          })
        }

      },
      computed: {
      },
      mounted() {
      }
    }
  </script>