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