<style scoped>
.comp-classpage input,.comp-classpage textarea,.comp-classpage select,.comp-classpage button{padding:0;}
hr {margin: 0;border: 0.17rem solid #e6e6e9;}
.comp-classpage{height:100%;height: 100vh;}
.UserInfo-List {list-style: none;background-color: #FFFFFF;margin: 0;padding: 0.4rem 3%;padding-bottom: 0;}
.UserInfo-Item{width:100%;height:4rem;line-height: 4rem; border-bottom: 0.01rem solid #E9E9E9;}
.UserInfo-List li.border{border-bottom: 1px solid #E9E9E9;}
.UserInfo-Item:last-child{border-bottom: none;}
.UserInfo-Item-Left{float: left;width:30%;height: 100%;}
.UserInfo-Item-Right{float: left;width:70%;height: 100%;text-align: right;color:#757575;}
.UserInfo-Item-Right img{
    background-color:rgba(0,0,0,0.5);border-radius: 100%;width: 3rem;
    height: 3rem;border: none;float: right;margin-top: 0.5rem;
}
.UserInfo-UserLogo {border-radius: 100%;}
.UserInfo-Cursor{background-image: url(http://image.supercarrier8.com/h5_key/icon-arrow-gray.png);background-repeat: no-repeat;background-position-x:right;background-position-y: center;background-size: 0.4rem 0.7rem;}
.UserInfo-RightAlign{padding-right:1rem;}
/** 模态对话框阴影层样式 */
.UpdateUserInfo-Modal{width: 100%;height: 100%;z-index: 3;position: absolute;margin: 0;padding: 0;top: 0;bottom: 0;left: 0;right: 0;display: none;background: #000;filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;}
/** 修改姓名 Begin  */
.UpdateNickname-Div{width: 94%;background-color: #FFFFFF;border-radius:0.5rem 0.5rem 0.5rem 0.5rem;z-index: 4;position: absolute;display: none;top:50%;margin-top:-10rem;left:50%;margin-left:-47%;}
.UpdateNickname-Head{color:#000;width:100%;height: 2rem;line-height: 2rem;text-align: center;font-size: 1rem;font-weight: bold;padding: 0;margin-top: 2rem;}
.UpdateNickname-Center{width:100%;text-align: center;padding: 0;margin-top: 1rem;}
.UpdateNickname-Center input{border:1px solid #3A8AFB;height: 2.5rem;font-size:1rem;padding: 0rem 0.5rem 0rem 0.5rem;width: 94%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border-radius:0.3rem 0.3rem 0.3rem 0.3rem;color:#b3b3b3;outline: none;}
.UpdateNickname-Bottomm{width: 94%;text-align: center;padding: 0;margin: 0 auto;margin-top: 1rem;margin-bottom: 2rem;}
.UpdateNickname-ConfirmBtn{width:46%;height: 2.5rem;background-color: #3A8AFB;color: #FFFFFF;font-weight: bold;border:1px solid #3A8AFB;float: left;letter-spacing:0.2rem;border-radius: 0;outline:0;appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none;}
.UpdateNickname-CancelBtn{width:46%;height: 2.5rem;background-color: #FFFFFF;color: #3A8AFB;font-weight: bold;border:1px solid #3A8AFB;float: right;letter-spacing:0.2rem;border-radius: 0;outline:0;appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; }
/** 修改姓名 End  */
/** 修改手机号 Begin  */
.UpdateMobile-Div{width: 94%;background-color: #FFFFFF;border-radius:0.5rem 0.5rem 0.5rem 0.5rem;z-index: 4;position: absolute;display: none;top:50%;margin-top:-10rem;left:50%;margin-left:-47%;}
.UpdateMobile-Head{color:#000;width:100%;height: 2rem;line-height: 2rem;text-align: center;font-size: 1rem;font-weight: bold;padding: 0;margin-top: 2rem;}
.UpdateMobile-Center{width:100%;text-align: center;padding: 0;margin-top: 1rem;}
.UpdateMobile-Center-Div1{border:1px solid #3A8AFB;height: 2.6rem;font-size:1rem;padding: 0rem 0.5rem 0rem 0.5rem;width: 94%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border-radius:0.3rem 0.3rem 0.3rem 0.3rem;margin: 0 auto;}
.UpdateMobile-Center-Div1-LeftLable{width:23%;float: left;height: 2.5rem;line-height: 2.5rem;text-align: right;}
.UpdateMobile-Center-Div1-RightInput{width:75%;float: left;height: 2.5rem;line-height: 2.5rem;vertical-align:middle;}
.UpdateMobile-Center-Div1-RightInput input{width:100%;height: 2rem;line-height: 2rem;text-align: left;border:none;outline: none;font-size:1rem;color: #000;}
.UpdateMobile-Center-Div2{border:1px solid #3A8AFB;height: 2.6rem;font-size:1rem;padding: 0rem 0.5rem 0rem 0.5rem;width: 94%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border-radius:0.3rem 0.3rem 0.3rem 0.3rem;margin: 0 auto;}
.UpdateMobile-Center-Div2-LeftLable{width:23%;float: left;height: 2.5rem;line-height: 2.5rem;text-align: right;}
.UpdateMobile-Center-Div2-RightInput{width:36%;float: left;height: 2.5rem;line-height: 2.5rem;vertical-align:middle;}
.UpdateMobile-Center-Div2-RightInput input{width:100%;height: 2rem;line-height: 2rem;text-align: left;border:none;outline: none;font-size:1rem;color: #000;}
.UpdateMobile-Center-Div2-Separate{width:0.06rem;float: left;height: 1.5rem;background-color: #3A8AFB;margin-top: 0.55rem;margin-left: 0.1rem;}
.UpdateMobile-Center-Div2-RightLable{width:36%;float: left;height: 2.5rem;line-height: 2.5rem;background-image: url(http://image.supercarrier8.com/h5_key/arrow_red.png);background-repeat: no-repeat;background-position-x:right;background-position-y: 54%;background-size: 0.5rem 30%;color: #3A8AFB;text-align: right;padding-right: 0.6rem;}
.UpdateMobile-Bottomm{width: 94%;text-align: center;padding: 0;margin: 0 auto;margin-top: 1.6rem;margin-bottom: 1.6rem;}
.UpdateMobile-ConfirmBtn{width:46%;height: 2.5rem;background-color: #3A8AFB;color: #FFFFFF;font-weight: bold;border:1px solid #3A8AFB;float: left;letter-spacing:0.2rem;border-radius: 0;outline: 0;appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; }
.UpdateMobile-CancelBtn{width:46%;height: 2.5rem;background-color: #FFFFFF;color: #3A8AFB;font-weight: bold;border:1px solid #3A8AFB;float: right;letter-spacing:0.2rem;border-radius: 0;outline: 0;appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; }
/** 修改手机号 End  */
/** 修改密码 Begin  */
.UpdatePwd-Div{width: 94%;background-color: #FFFFFF;border-radius:0.5rem 0.5rem 0.5rem 0.5rem;z-index: 4;position: absolute; display: none;top:50%;margin-top:-10rem;left:50%;margin-left:-47%;}
.UpdatePwd-Head{color:#000;width:100%;height: 2rem;line-height: 2rem;text-align: center;font-size: 1rem;font-weight: bold;padding: 0;margin-top: 2rem;}
.UpdatePwd-Center{width:100%;text-align: center;padding: 0;margin-top: 1rem;}
.UpdatePwd-Center input{border:1px solid #3A8AFB;height: 2.5rem;font-size:1rem;padding: 0rem 0.5rem 0rem 0.5rem;width: 94%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border-radius:0.3rem 0.3rem 0.3rem 0.3rem;color:#b3b3b3;outline: none;}
.UpdatePwd-Bottomm{width: 94%;text-align: center;padding: 0;margin: 0 auto;margin-top:1.6rem;margin-bottom: 1.6rem;}
.UpdatePwd-ConfirmBtn{width:46%;height: 2.5rem;background-color: #3A8AFB;color: #FFFFFF;font-weight: bold;border:1px solid #3A8AFB;float: left;letter-spacing:0.2rem;border-radius: 0;outline: 0;appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; }
.UpdatePwd-CancelBtn{width:46%;height: 2.5rem;background-color: #FFFFFF;color: #3A8AFB;font-weight: bold;border:1px solid #3A8AFB;float: right;letter-spacing:0.2rem;border-radius: 0;outline: 0;appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; }
/** 修改密码 End  */
</style>
<template>
<div class="container comp-classpage jfBaseSize" v-cloak v-bind:style="vh?'height:100vh':'height: 100%;'">
    <div id="Key_UserSetting" class="Key_UserSetting" style="font-size:0.9375rem !important;">
        <ul class="UserInfo-List">
            <li class="UserInfo-Item">
                <div class="UserInfo-Item-Left">头像</div>
                <div class="UserInfo-Item-Right">
                    <img class="UserInfo-UserLogo" v-bind:src="loginUserInfo.HeadImage?loginUserInfo.HeadImage:'http://image.supercarrier8.com/h5_key/icon_headDefault.png'" />
                </div>
            </li>
            <li class="UserInfo-Item" @click="goPage('Key_UName')">
                <div class="UserInfo-Item-Left">姓名</div>
                <div class="UserInfo-Item-Right UserInfo-Cursor">
                    <span class="UserInfo-RightAlign">
                         {{loginUserInfo.NickName}}
                    </span>
                </div>
            </li>
            <li class="UserInfo-Item" @click="goPage('Key_UMobil')">
                <div class="UserInfo-Item-Left">手机号</div>
                <div class="UserInfo-Item-Right UserInfo-Cursor">
                    <span class="UserInfo-RightAlign">
                        {{loginUserInfo.Mobile}}
                    </span>
                </div>
            </li>
            <li class="UserInfo-Item" @click="goPage('Key_UPwd')">
                <div class="UserInfo-Item-Left">密码</div>
                <div class="UserInfo-Item-Right UserInfo-Cursor">
                    <span class="UserInfo-RightAlign">******</span>
                </div>
            </li>
            <li class="UserInfo-Item" v-show="IsShow.IsShowStore" @click="goPage('O_UStore')">
                <div class="UserInfo-Item-Left">所属门店</div>
                <div class="UserInfo-Item-Right" :class="(IsShow.IsShowArrow?'UserInfo-Cursor':'')">
                    <span class="UserInfo-RightAlign"> {{loginUserInfo.OrganizationName}}</span>
                </div>
            </li>
      </ul>
    </div>
 <ReturnHome ref="returnhome"></ReturnHome>
</div>
</template>
<script> 
	import $ from 'jquery'
	import channelHelper from "@/assets/js/channelHelper.js";
	import MintUI from 'mint-ui';
	import ReturnHome from "@/components/channel/temp001/ReturnHome";
	export default {
        name: 'Key_UserSetting',
        components: {ReturnHome},
        provide(){       
            return{           
                goPage:this.goPage       
            }   
        },
		props: ["cfg", "comp", "selectedPage"],
		data() {
			return {
                IsShow:{
                    IsShowStore:true,
                    IsShowArrow:false
                },
				vh:false,
			};
        },
        computed:{
            loginUserInfo:function(){
                var loginUserInfo = {
                    HeadImage:"",
                    NickName:"", 
                    Mobile:"", 
                    OrganizationName:""
                };
                var tempLoginInfo = localStorage.getItem("loginInfo");
                if ($.trim(tempLoginInfo) != "") {
                    loginUserInfo = eval("(" + tempLoginInfo + ")");
                }
                return loginUserInfo;
            }
        },
		methods: {
			goPage(type){
                if(type=="O_UStore")
                {
                    if(this.IsShow.IsShowArrow){
                        this.$parent.changeSelectedPage(type);
                    }
                }
                else{
                    this.$parent.changeSelectedPage(type);
                }
			},
		},
		created() {
		    var that=this;  var eno = that.sup8.context.enterpriseno;
            var isDesign = location.pathname.indexOf('design');
			if (!(isDesign>-1)) {
				that.$set(that,'vh',true);
			}else{
				that.$set(that,'vh',false);
            }
            if(isDesign!=-1)
            {
                return;
            }
            //判断是否登录
            if (!channelHelper.CheckLogin(this.$parent,eno,that.sup8.context.entranceid)) {
                this.$parent.changeSelectedPage('Key_Login')
                return false;
            }
            var entranceid=this.sup8.context.entranceid;
            if(entranceid=="2")
            {
                that.IsShow.IsShowArrow=true;
            }
            else  if(entranceid=="3")
            {
                that.IsShow.IsShowArrow=false;
                that.IsShow.IsShowStore=false;
            }
            else  if(entranceid=="4")
            {
               that.IsShow.IsShowArrow=false;
                that.IsShow.IsShowStore=false;
            }
            else  if(entranceid=="5")
            {
               that.IsShow.IsShowArrow=false;
               that.IsShow.IsShowStore=false;
            }
		},
		mounted: function () { 
			
		}
	}
</script>
