/**
* r_bindUser.vue
* Version: 0.1
* User: wy
* Date: 2017-09-07
* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
* 绑定用户页面
*/
<template>
    <div>
        <div class="header">
            <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch> 
            <p>{{ $t('title.bindUser') }}</p>
        </div>
        <div class="content">  
            <v-touch tag="ul" class="editHead" v-on:tap="onEditHeadTap">
                <li>
                    <img :src="imageHead">
                </li>
                <li>{{ $t('bindUser.editHeadTip') }}</li>
            </v-touch>
            <div class="inputBox">
                <u-text :init-param="componentsConfig.nameInput.initParam" :text="textName"
                v-on:u-text-change="onNameChange(arguments[0])"></u-text>
                <u-text :init-param="componentsConfig.fingerprintIDInput.initParam" :text="numberFingerprintID"
                v-on:u-text-change="onFingerprintIDChange(arguments[0])"></u-text>
                <u-text :init-param="componentsConfig.passwordIDInput.initParam" :text="numberPasswordID"
                v-on:u-text-change="onPasswordIDChange(arguments[0])"></u-text>
                <u-text :init-param="componentsConfig.ICCardIDInput.initParam" :text="numberICCardID"
                v-on:u-text-change="onICCardIDChange(arguments[0])"></u-text>
                <p class="errorTip" v-if="textErrorTip">{{ textErrorTip }}</p>
            </div>
            <u-button :init-param="componentsConfig.bindButton.initParam" v-on:u-button-tap="onBindButtonTap"></u-button>
        </div>
        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
    </div>
</template>  

<script>
    import {iot, uPublic, uComponents} from '../../public/public.js';
    //通用 input、按钮、dialog、loading组件
    uPublic.componentsInit(['u-text','u-button','u-dialog','u-loading']);
    export default {
        data (){
            return {
                imageHead: '../../resources/image/gray_head_icon.png',
                textName: null,
                numberFingerprintID: null,
                numberPasswordID: null,
                numberICCardID: null,
                textErrorTip: null,
                //配置组件
                componentsConfig: initComponentsConfig()
            }
        },
        beforeRouteEnter (to, from, next) {
            //alert('beforeRouteEnter 路由bindUser');
            next(vm => {

            })
        },
        beforeRouteUpdate (to, from, next) {
            //alert('beforeRouteUpdate 路由bindUser');
        },
        mounted(){            
        },      
        methods:{
            onNameChange(text){
                nameChange(this,text);           
            },  
            onFingerprintIDChange(number){
                fingerprintIDChange(this,number);
            },  
            onPasswordIDChange(number){
                passwordIDChange(this,number);
            },  
            onICCardIDChange(number){
                ICCardIDChange(this,number);
            },      
            //tap <      
            onBackTap(){
                backTap(this);
            },
            //编辑头像
            onEditHeadTap(){
                editHeadTap();
            },
            //tap 我要绑定
            onBindButtonTap(){
                bindButtonTap(this);
            }    
        }               
    }

    //配置组件参数
    function initComponentsConfig(){
        return {
            nameInput: {
                initParam: {
                    class: 'custom-bindUser-text',
                    title: Vue.t('bindUser.nameTitle'),
                    placeholder: Vue.t('bindUser.requiredInputTip')
                }
            },
            fingerprintIDInput: {
                initParam: {
                    class: 'custom-bindUser-text',
                    title: Vue.t('bindUser.fingerprintIDTitle'),
                    placeholder: Vue.t('bindUser.optionalInputTip')
                }
            },
            passwordIDInput: {
                initParam: {
                    class: 'custom-bindUser-text',
                    title: Vue.t('bindUser.passwordIDTitle'),
                    placeholder: Vue.t('bindUser.optionalInputTip')
                }
            },
            ICCardIDInput: {
                initParam: {
                    class: 'custom-bindUser-text',
                    title: Vue.t('bindUser.ICCardIDTitle'),
                    placeholder: Vue.t('bindUser.optionalInputTip')
                }
            },
            //我要绑定 button 参数
            bindButton: {   
                initParam: {
                    class: 'custom-button',
                    text: Vue.t('btn.bind')
                }
            },
            dialog: {
                initParam: {
                    class: 'custom-dialog'
                }
            },         
            loading: {
                initParam: {
                    class: 'custom-loading'
                }
            }
        }
    }

    function nameChange(self,text){
        self.textName = text;
        console.log('nameChange: ' + self.textName);
    } 

    function fingerprintIDChange(self,number){
        self.numberFingerprintID = number;
        console.log('fingerprintIDChange' + self.numberFingerprintID); 
    }

    function passwordIDChange(self,number){
        self.numberPasswordID = number;
        console.log('passwordIDChange' + self.numberPasswordID); 
    } 

    function ICCardIDChange(self,number){
        self.numberICCardID = number;
        console.log('ICcardIDChange' + self.numberICCardID); 
    }   

    //tap <
    function backTap(self){
        self.$router.go(-1);
    }    

    //编辑头像
    function editHeadTap(){
        alert('编辑头像');
    }

    //tap 我要绑定
    function bindButtonTap(self){
        self.$router.push({path: '/userList', query: {pageName: 'bindUser'}});       
    }
</script>