<template>
    <div>
        <Form ref="formInline" :model="formInline" :rules="ruleInline" :class="[prefixCls + '-wrap']" :style="{width:wrapWidth}" >
            <Form-item prop="user" style="margin-bottom: 20px;">
                <Input type="text" class="ivu-icon-left" icon="ios-person-outline"  v-model="formInline.user" :placeholder="namePlaceholder" :style="inputStyle">
                </Input>
            </Form-item>
            <Form-item prop="password" style="margin-bottom: 10px;" >
                <Input type="password"  class="ivu-icon-left" icon="ios-locked-outline" v-model="formInline.password" :placeholder="pwdPlaceholder" :style="pwdStyle">
                </Input>
            </Form-item>
            <Form-item style="margin-bottom: 0px;">
                <div :class="[prefixCls + '-pwd']" :style="{width:inputStyle.width}">
                    <Checkbox v-model="single" :class="{getPwd:single}">记住密码</Checkbox>
                    <a :class="[prefixCls + '-a']">忘记密码</a>
                </div>
            </Form-item>
            <Form-item >
                <Button type="primary" :class="[prefixCls + '-btn']"   @click="handleSubmit(formInline)" :style="{width:inputStyle.width}">登录</Button>
            </Form-item>
        </Form>
    </div>
</template>
<script>
    const prefixCls = 'ivu-login';
    export default {
        props:{
            width:{
                type: Number,
                default:200,
            },
            namePlaceholder:{
                type: String,
                default:'请输入用户名',
            },
            pwdPlaceholder:{
                type: String,
                default:'请输入密码',
            },
            size:{
                type: String,
                default:'',
            },
            rules:{
                type:Object,
                default:'',
            }
        },
        data () {
            return {
                inputStyle :{
                    width:'',
                    marginTop: '20px',
                },
                pwdStyle :{
                    width:'',
                },
                single:false,
                inputWidth:'',
                wrapWidth:'',
                prefixCls: prefixCls,
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: '',
            }
        },
        created(){
            this.ruleInline=this.$props.rules;
            this.wrapWidth = ( this.$props.width + 34 ) + 'px';
            this.inputStyle.width = this.$props.width + 'px';
            this.pwdStyle.width = this.$props.width + 'px';
        },
        methods: {
            handleSubmit(userInfo) {
                this.$emit('login',userInfo,this.single);
            }
        }
    }
</script>

