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

.mask {position: fixed;top: 0;left: 0;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.5);}
.myAddress {width: 100%;background-color: white;border-top: 4px solid rgba(245, 245, 245, 1);color: #333;height: 100%;}
.myAddress .cont {border-bottom: 1px solid rgba(245, 245, 245, 0.8);}
.myAddress .cont span {display: inline-block;font-size: 0.8rem;color: #333;line-height: 0.88rem;margin-left: 0.32rem;}
.myAddress .cont section {float: left;}
.myAddress .cont p {display: inline-block;font-size: 0.8rem;color: #333333;line-height: 0.88rem;margin-left: 1rem;}
.myAddress .cont .pic2 {float: right;width: 0.14rem;height: 0.24rem;margin: 0.32rem 0.32rem 0.32rem 0;}
.myAddress .cont p.text {margin-left: 0.72rem;}
.myAddress {width: 100%;background-color: white;border-top: 4px solid rgba(245, 245, 245, 1);color: #333;height: 100%;}
.myAddress .cont {border-bottom: 1px solid rgba(245, 245, 245, 0.8);}
.myAddress .cont span {display: inline-block;font-size: 0.8rem;color: #333;line-height: 0.88rem;margin-left: 0.32rem;}
.myAddress .cont section {float: left;}
.myAddress .cont p {display: inline-block;font-size: 0.8rem;color: #333333;line-height: 0.88rem;margin-left: 1rem;}
.myAddress .cont .pic2 {float: right;width: 0.14rem;height: 0.24rem;margin: 0.32rem 0.32rem 0.32rem 0;}
.myAddress .cont p.text {margin-left: 0.72rem;}
.showChose {width: 100%;height: 100%;position: inherit;top: 0;left: 0;z-index: 120;background: rgba(77, 82, 113, 0.8);}
.address {position: absolute;bottom: 0;left: 0;z-index: 121;background: #fff;width: 100%;height: 50%;}
.title h4 {display: inline-block;margin-left: 3%;line-height: 0.88rem;font-weight: normal;color: #999;}
.title span.close {margin: 1rem 0.3rem 2.2rem;color: #d8d8d8;background: #000;border-radius: 100%;float: right;height: 1.1rem;line-height: 1.2;width: 1.1rem;text-align: center;}
.titleselect {line-height: 1.5rem;border-bottom: 0.1rem solid #bcbc;}
.address .titleselect .active {color: #c03546;border-bottom: 0.02rem solid #c03546;padding-bottom: 0.5rem;}
.area {display: inline-block;line-height: 0.88rem;margin-left: 3%;color: #333;padding-bottom: 0.5rem;}
.addList {width: 100%;line-height: 2rem;color: #333;}
.address ul {overflow: auto;list-style-type: none;height: 60%;margin: 0;padding: 0;padding-left: 0px;padding-left: 3%;padding-top: 1%;}
.address ul li.active {color: #c03546;}
.btnHeader{display: flex;}
.btnHeader .button{flex: 1;width: 50%;text-align: center;height: 3rem;}
</style>
<style>
/* .picker-toolbar{height: auto;} */
</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.UserLogo?loginUserInfo.UserLogo:'http://image.supercarrier8.com/h5_key/icon_headDefault.png'" />
                </div>
            </li>
            <li class="UserInfo-Item" @click="goPage('C_UName')">
                <div class="UserInfo-Item-Left">昵称</div>
                <div class="UserInfo-Item-Right UserInfo-Cursor">
                    <span class="UserInfo-RightAlign">
                         {{loginUserInfo.PetName}}
                    </span>
                </div>
            </li>
            <li class="UserInfo-Item" @click="goPage('C_UpdateM')">
                <div class="UserInfo-Item-Left">手机号</div>
                <div class="UserInfo-Item-Right UserInfo-Cursor">
                    <span class="UserInfo-RightAlign">
                        {{loginUserInfo.Phone}}
                    </span>
                </div>
            </li>
            <li class="UserInfo-Item" @click="setSet()">
                <div class="UserInfo-Item-Left">性别</div>
                <div class="UserInfo-Item-Right UserInfo-Cursor">
                    <span class="UserInfo-RightAlign">
                        {{sex.sexVal}}
                    </span>
                </div>
            </li>
            <li class="UserInfo-Item" @click="setBirthday()">
                <div class="UserInfo-Item-Left">出生日期</div>
                <div class="UserInfo-Item-Right UserInfo-Cursor">
                    <span class="UserInfo-RightAlign">
                        {{picker.birthdayFmt}}
                    </span>
                </div>
            </li>
            <li class="UserInfo-Item">
                <div class="UserInfo-Item-Left">地址</div>
                <div class="UserInfo-Item-Right UserInfo-Cursor">
                    <span class="UserInfo-RightAlign" @click="ShowAreaSelect" v-html="addressData.AreaString?addressData.AreaString:'请设置省、市、区'"></span>
                </div>
            </li>
      </ul>
    </div>

    <div class="mask" v-show="isShow.IsshowMask"></div>
    <section class="myAddress" v-show="isShow.IsshowArea">
      <section class="address">
        <section class="title">
          <h4>请选择省市区</h4>
          <span style="width:60%;text-align: right;display: inline-block;" @click="UpdateArea()">确定修改</span>
          <span @click="closeAdd()" class="close">×</span>
        </section>
        <section class="titleselect">
          <div
            class="area"
            @click="provinceSelected()"
            :class="addressData.ProvinceValue==''?'active':''"
          >{{addressData.ProvinceValue?addressData.ProvinceValue:'请选择'}}</div>
          <div
            class="area"
            @click="citySelected()"
            :class="addressData.CityValue==''?'active':''"
            v-show="addressData.ProvinceValue!=''"
          >{{addressData.CityValue?addressData.CityValue:'请选择'}}</div>
          <div
            class="area"
            @click="districtSelected()"
            :class="addressData.CityValue!=''?'active':''"
            v-show="addressData.CityValue!=''"
          >请选择</div>
        </section>
        <ul>
          <li class="addList" v-for="(v,k) in addressData.provinceList" @click="getProvinceId(v.id, v.name, k)" v-show="isShow.IsShowProvince" :class="v.id==addressData.ProvinceCode? 'active' : ''" v-bind:key="v.id">{{v.name}}</li>
          <li class="addList" v-for="(v,k) in addressData.cityList" @click="getCityId(v.id, v.name, k)" v-show="isShow.IsShowCity" :class="v.id==addressData.CityCode? 'active' : ''" v-bind:key="v.id">{{v.name}}</li>
          <li class="addList" v-for="(v,k) in addressData.districtList" @click="getDistrictId(v.id, v.name, k)" v-show="isShow.IsShowDistrict" :class="v.id==addressData.DistrictCode? 'active' : ''" v-bind:key="v.id">{{v.name}}</li>
        </ul>
      </section>
    </section>
    <mt-datetime-picker style="width:100%;"  v-bind:closeOnClickModal="isShow.IsCloseOnClickModal"
        ref="birthday"
        v-model="picker.birthday"
        type="date"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        :startDate="picker.startDate" @confirm="UpdateSexAndBirth(2)">
    </mt-datetime-picker>
    <mt-popup v-model="isShow.IsSex" v-bind:closeOnClickModal="isShow.IsCloseOnClickModal" popup-transition="popup-fade" position="bottom" style="width:100%;">
        <mt-picker :slots="sexSlots" ref="sex" @change="onSexChange" valueKey="val" :show-toolbar="true">
            <div class="picker-toolbar-title">
                <div class="btnHeader">
                <el-button type="text" class="button" v-on:click="setSexCancel">取消</el-button>
                <el-button type="text" class="button" v-on:click="UpdateSexAndBirth(1)">确定</el-button>
                </div>
            </div>
        </mt-picker>
    </mt-popup>
    <ReturnHome ref="returnhome"></ReturnHome>
</div>
</template>
<script> 
    import Vue from 'vue';
	import $ from 'jquery'
	import ReturnHome from "@/components/channel/temp001/ReturnHome";
    import ElementUI from "element-ui";
    import "element-ui/lib/theme-chalk/index.css";
	import JfapiHelper from "@/assets/js/JfapiHelper.js";
    import utils from "@/assets/js/utils.js";
	import MintUI from 'mint-ui';
	import {Indicator,Toast} from 'mint-ui';
    import channelHelper from "@/assets/js/channelHelper.js";
    Vue.use(ElementUI);
	export default {
        name: 'Key_UserSetting',
         components: {ReturnHome},
        provide(){       
            return{           
                goPage:this.goPage       
            }   
        },
		props: ["cfg", "comp", "selectedPage"],
		data() {
			return {
                BindDataModel:{
                    AREAID:"",
                },
                IsShow:{
                    IsShowStore:true,
                    IsShowArrow:false
                },
				vh:false,
                addressData:{
                    AreaString:"",
                    ProvinceCode: "",
                    CityCode: "",
                    DistrictCode: "",
                    ProvinceValue:'',
                    CityValue:'',
                    DistrictValue:'',
                    provinceList:[],
                    cityList:[],
                    districtList:[],
                },
                isShow:{
                    vh:false,
                    IsshowArea:false,
                    IsshowMask:false,
                    IsShowProvince: true,
                    IsShowCity: false,
                    IsShowDistrict: false,
                    IsSex:false,
                    IsCloseOnClickModal:false,
                },
                picker:{
                    birthday:new Date(1990,0,1),
                    birthdayFmt:'',
                    startDate:new Date(1920,0,1),
                },
                sexSlots:[{
                    flex: 1,
                    values: [{key:1,val:'男'},{key:0,val:'女'}],
                    className: 'slot1',
                    textAlign: 'center',
                    defaultIndex:0
                }],
                sex:{
                    sexValue:[],
                    sexVal:"",
                }
			};
        },
        computed:{
            loginUserInfo:function(){
                var loginUserInfo = {
                    UserLogo:"",
                    PetName:"", 
                    Phone:""
                };
                var tempLoginInfo = localStorage.getItem("loginInfo");
                if ($.trim(tempLoginInfo) != "") {
                    loginUserInfo = eval("(" + tempLoginInfo + ")");
                }
                var wxUserInfo=this.sup8.context.wxUser;
                if(wxUserInfo)
                {
                    if(loginUserInfo.PetName==""){
                        loginUserInfo.PetName=wxUserInfo.nickname;
                    }
                    if(loginUserInfo.UserLogo==""){
                        loginUserInfo.UserLogo=wxUserInfo.headimgurl;
                    }
                }
                return loginUserInfo;
            }
        },
		methods: {
            BindAreaInfo(){
                var that = this;
                var url = "/integral/GetMemberDataInfoByID";
                var dataParams = {
                    EnterpriseNo:that.loginUserInfo.EnterpriseNo,
                    LanguageType:JfapiHelper.GetLanguageType(),
                    UserToken:that.loginUserInfo.UserToken,
                    Id:that.loginUserInfo.UserId
                };
                var cbSuccess = function(res) {
                    if (res.flag) {
                        var AreaId = res.data.AreaId;
                        that.BindDataModel.AREAID=AreaId;
                        if(res.data.F1){
                            that.$set(that.sex,'sexVal',res.data.F1==1?'男':'女');
                            if(res.data.F1==1){
                                that.$set(that.sexSlots[0],'defaultIndex',0);
                            }else{
                                that.$set(that.sexSlots[0],'defaultIndex',1);
                            }        
                        }else{
                            that.$set(that.sex,'sexVal','');
                        }
                        if(res.data.F2){
                            var splitArr=res.data.F2.split('.');
                            that.$set(that.picker,'birthdayFmt',res.data.F2);
                            that.$set(that.picker,'birthday',new Date(splitArr[0],parseInt(splitArr[1])-1,splitArr[2]));
                        }else{
                            that.$set(that.picker,'birthdayFmt','');
                        }
                        if (AreaId!=null&&AreaId.length == 6) {
                            that.addressData.districtList = [];
                            that.addressData.cityList = [];

                            that.isShow.IsShowDistrict = true;
                            that.isShow.IsShowCity = false;
                            that.isShow.IsShowProvince = false;
                            if(AreaId.indexOf("0000")!=-1)
                            {
                                that.isShow.IsShowCity=true;
                                that.isShow.IsShowDistrict = false;
                            }
                            that.addressData.DistrictCode = AreaId;
                            that.addressData.CityCode = AreaId.substring(0, 4) + "00";
                            that.addressData.ProvinceCode = AreaId.substring(0, 2) + "0000";

                          
                            that._getProvince();
                            that._getArea(that.addressData.CityCode);
                            that._getCity(that.addressData.ProvinceCode);
                        }else  {
                            that.addressData.districtList = [];
                            that.addressData.cityList = [];
                            that.addressData.DistrictCode = AreaId;
                            that.addressData.CityCode = AreaId;
                            that.addressData.ProvinceCode =AreaId;
                            that.isShow.IsShowDistrict = false;
                            that.isShow.IsShowCity = false;
                            that.isShow.IsShowProvince = true;

                            that._getProvince();
                            that._getArea(that.addressData.CityCode);
                            that._getCity(that.addressData.ProvinceCode);
                        }
                        that.AreaDataFun();
                    }
                };
                var cbError = function(jqXHR, textStatus, errorThrown) {
                    MintUI.Toast(jqXHR.responseText);
                };
                //请求后端
                JfapiHelper.CommonCallServiceAuto(url,dataParams,cbSuccess,cbError,null,null);
            },
			goPage(type){
               this.$parent.changeSelectedPage(type);
            },
            ShowAreaSelect() {//选择地址打开
                this.isShow.IsshowArea = true;
                this.isShow.IsshowMask=true;
            },
            closeAdd: function() {//选择地址关闭
                this.isShow.IsshowArea = false;
                this.isShow.IsshowMask=false;
            },
            AreaDataFun: function() {
                var that = this;
                that.$set(that.addressData,'AreaString',that.addressData.ProvinceValue + that.addressData.CityValue + that.addressData.DistrictValue);
            },
            getProvinceId: function(code, input, index) {
                this.addressData.ProvinceCode = code;
                this.$set(this.BindDataModel,'AREAID',code);
                this.addressData.ProvinceValue = input;
                this.isShow.IsShowProvince = false;
                this.isShow.IsShowCity = true;
                this.isShow.IsShowDistrict = false;
                this._getCity(code, index);
                this.AreaDataFun();
            },
            provinceSelected: function() {
                // 清除市级和区级列表
                this.cityList = [];
                this.districtList = [];
                // 清除市级和区级选项
                this.addressData.CityValue = '';
                this.addressData.DistrictValue = '';
                this.addressData.DistrictCode = "";
                // 选项页面的切换
                this.isShow.IsShowProvince = true;
                this.isShow.IsShowCity = false;
                this.isShow.IsShowDistrict = false;
            },
            getCityId: function(code, input, index) {
                this.addressData.districtList = [];
                this.addressData.CityCode = code;
                this.$set(this.BindDataModel,'AREAID',code);
                this.addressData.CityValue = input;
                this.isShow.IsShowProvince = false;
                this.isShow.IsShowCity = false;
                this.isShow.IsShowDistrict = true;
                this.addressData.DistrictCode = "";
                this._getArea(code, index);
                this.AreaDataFun();
                // 选择当前添加active
                // this.showCityList.map( a => a.selected = false );
                // this.showCityList[index].selected = true;
            },
            citySelected: function() {
                this.isShow.IsShowProvince = false;
                this.isShow.IsShowCity = true;
                this.isShow.IsShowDistrict = false;
            },
            getDistrictId: function(code, input, index) {
                this.addressData.DistrictCode = code;
                this.$set(this.BindDataModel,'AREAID',code);
                this.addressData.DistrictValue = input;
                // 选择当前添加active
                // this.showDistrictList.map( a => a.selected = false );
                // this.showDistrictList[index].selected = true;
                // 选取市区选项之后关闭弹层
                // this.isShow.IsshowArea = false;
                // this.isShow.IsshowMask=false;
                this.AreaDataFun();
            },
            districtSelected: function() {
                this.isShow.IsShowProvince = false;
                this.isShow.IsShowCity = false;
                this.isShow.IsShowDistrict = true;
            },
            //得到省份数据
            _getProvince() {
                var that = this;
                var url = "/integral/GetAllProvinces";
                var dataParams = {};
                that.addressData.provinceList=[];
                var cbSuccess = function(res) {
                    if (res.flag) {
                    res.data.forEach(function(item, index) {
                        let obj = {};
                        obj.id = item.AreaId;
                        obj.name = item.AreaInfo;
                        if (obj.id == that.addressData.ProvinceCode) {
                        obj.selected = true;
                        that.addressData.ProvinceValue=obj.name;
                        }
                        that.addressData.provinceList.push(obj);
                    });
                    }
                };
                var cbError = function(jqXHR, textStatus, errorThrown) {
                    MintUI.Toast(jqXHR.responseText);
                };
                //请求后端
                JfapiHelper.CommonCallServiceAuto(url,dataParams,cbSuccess,cbError,null,null);
            },
            //根据省份得到城市数据
            _getCity(province, index) {
                var that = this;
                var url = "/integral/GetCityByProvince";
                var dataParams = { provinceId: province };
                that.addressData.cityList=[];
                var cbSuccess = function(res) {
                    if (res.flag) {
                    res.data.forEach(function(item, index) {
                        let obj = {};
                        obj.id = item.AreaId;
                        obj.name = item.AreaInfo;
                        if (obj.id == that.addressData.CityCode) {
                        obj.selected = true;
                        that.addressData.CityValue=obj.name;
                        }
                        that.addressData.cityList.push(obj);
                    });
                    }
                };
                var cbError = function(jqXHR, textStatus, errorThrown) {
                    MintUI.Toast(jqXHR.responseText);
                };
                //请求后端
                JfapiHelper.CommonCallServiceAuto(url,dataParams,cbSuccess,cbError,null,null);
            },
                //根据城市和省份得到区域数据
            _getArea(cityId, index) {
                var that = this;
                var url = "/integral/GetMunicipiosByCityId";
                var dataParams = { cityId: cityId };
                that.addressData.districtList=[];
                var cbSuccess = function(res) {
                    if (res.flag) {
                    res.data.forEach(function(item, index) {
                        let obj = {};
                        obj.id = item.AreaId;
                        obj.name = item.AreaInfo;
                        if (obj.id == that.addressData.DistrictCode) {
                        obj.selected = true;
                        that.addressData.DistrictValue=obj.name;
                        }
                        that.addressData.districtList.push(obj);
                    });
                    }
                };
                var cbError = function(jqXHR, textStatus, errorThrown) {
                    MintUI.Toast(jqXHR.responseText);
                };
                //请求后端
                JfapiHelper.CommonCallServiceAuto(url,dataParams, cbSuccess,cbError,null,null);
            },UpdateArea(){
                var that = this;
                if(that.BindDataModel.AREAID=="")
                {
                     MintUI.Toast("请选择省市区!");return false;
                }
                var url = "/integral/UpdateUserArea";
                var dataParams = { 
                    EnterpriseNo:that.loginUserInfo.EnterpriseNo,
                    LanguageType:JfapiHelper.GetLanguageType(),
                    UserToken:that.loginUserInfo.UserToken,
                    AreaId:that.BindDataModel.AREAID
                };
                var cbSuccess = function(res) {
                    if (res.flag) {
                         MintUI.Toast("修改成功!");
                        that.closeAdd();
                    }
                };
                var cbError = function(jqXHR, textStatus, errorThrown) {
                    MintUI.Toast(jqXHR.responseText);
                };
                //请求后端
                JfapiHelper.CommonCallServiceAuto(url,dataParams, cbSuccess,cbError,null,null);
            },
            setBirthday(){//设置生日
                this.$refs.birthday.open();
            },
            setSet(){//设置性别
                this.$set(this.isShow,'IsSex',true);
            },
            onSexChange(picker, values,column){//修改性别
                this.$set(this.sex,'sexValue',values);
            },
            setSexCancel(){
                this.$set(this.isShow,'IsSex',false);
            },
            //设置性别和年龄
            UpdateSexAndBirth(type){
                var that=this;
                var url = "/integral/UpdateSexAndBirth";
                var dataParams = {
                    EnterpriseNo:that.loginUserInfo.EnterpriseNo,
                    LanguageType:JfapiHelper.GetLanguageType(),
                    UserToken:that.loginUserInfo.UserToken,
                    UpdateType:type,//1修改性别  2修改年龄
                    DataValue:(type==2?utils.formatDate("yyyy.MM.dd",this.picker.birthday):that.sex.sexValue[0].key),//值
                };
                Indicator.open();
                var cbSuccess = function(res){
                    if (res.flag) {
                        var data=res.data;
                        if(type==2){
                            var birthday=utils.formatDate("yyyy.MM.dd",that.picker.birthday);
                            that.$set(that.picker,'birthdayFmt',birthday);
                        }else{
                            that.$set(that.isShow,'IsSex',false);
                            that.$set(that.sex,'sexVal',that.sex.sexValue[0].val);
                        }
                        MintUI.Toast(res.msg?res.msg:'操作成功');
                    }else
                    { 
                        MintUI.Toast(res.msg);
                    }
                    Indicator.close();
                };
                var cbError = function(jqXHR, textStatus, errorThrown){
                    Toast(jqXHR.responseText);
                };
                //请求后端
                channelHelper.CommonCallService(url,dataParams,cbSuccess,cbError,null,null);
            },
		},
		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 (!JfapiHelper.CheckLogin(this.$parent,eno)) {
                this.$parent.changeSelectedPage('C_Reg')
                return false;
            }
            that.BindAreaInfo();
		},
		mounted: function () {
            var birthday=utils.formatDate("yyyy.MM.dd",new Date(1991,2,16));
            console.log(birthday)
		}
	}
</script>
