<template lang="html">
  <div class="">
    <background></background>
    <mu-container>
      <mu-form ref="form" :model="validateForm" class="mu-demo-form">
        <mu-form-item label="用户名" help-text="帮助文字" prop="username" :rules="usernameRules">
          <mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
        </mu-form-item>
        <mu-form-item label="密码" prop="password" :rules="passwordRules">
            <mu-text-field type="password" v-model="validateForm.password" prop="password"></mu-text-field>
        </mu-form-item>
        <mu-form-item prop="isAgree" :rules="argeeRules">
          <mu-checkbox label="同意用户协议" v-model="validateForm.isAgree"></mu-checkbox>
        </mu-form-item>
        <!-- <mu-form-item> -->
          <!-- <mu-button color="primary" @click="submit">提交</mu-button> -->
          <!-- <mu-button @click="clear">重置</mu-button> -->
          <mu-flex class="flex-wrapper" justify-content="center">
            <mu-flex class="flex-demo" justify-content="center" fill>
              <mu-button color="primary" @click="submit">提交</mu-button>
            </mu-flex>
            <mu-flex class="flex-demo" justify-content="center" fill>
              <mu-button @click="clear">重置</mu-button>
            </mu-flex>
          </mu-flex>
        <!-- </mu-form-item> -->
      </mu-form>
    </mu-container>
  </div>
</template>

<script>
import Background from '../components/background'

export default {
  components: { Background },
  data () {
    return {
      usernameRules: [
        { validate: (val) => !!val, message: '必须填写用户名' },
        { validate: (val) => val.length >= 3, message: '用户名长度大于3' }
      ],
      passwordRules: [
        { validate: (val) => !!val, message: '必须填写密码' },
        { validate: (val) => val.length >= 3 && val.length <= 10, message: '密码长度大于3小于10' }
      ],
      argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议' }],
      validateForm: {
        username: '',
        password: '',
        isAgree: false
      }
    }
  },
  methods: {
    submit () {
      this.$refs.form.validate().then((result) => {
        console.warn('form valid: ', result)
      });
    },
    clear () {
      this.$refs.form.clear();
      this.validateForm = {
        username: '',
        password: '',
        isAgree: false
      };
    }
  }
}
</script>

<style lang="less">
  body {
    background: #1F2D3D;
  }
.mu-demo-form {
  padding: 20px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin-bottom: 20px;
  background-color: #F9FAFC;
  margin: 120px auto;
  padding: 35px 35px 15px 35px;
  width: 400px;
  border: 2px solid #FAFAFA;
}
</style>