<template>
	<view>
		<page-title :showBack="true" backUrl="/pages/my/index">个人设置</page-title>
		<view class="settingDetail">
			<view class="setInfoItem">
				<view class="u-demo-block">
					<text class="u-demo-block__title">基础信息</text>
					<view class="u-demo-block__content">
                        <u-cell-group >
							<u-cell title="头像" :isLink="true" @click="updateHeadImg">
								<u-avatar v-if="userInfoObj.account.avatar!=''" slot="value"  @click="updateHeadImg" shape="circle" size="58pt" :src="imgurl"></u-avatar>
							</u-cell>
                        	<u-cell title="姓名" v-model="userInfoObj.name"></u-cell>
                        	<u-cell title="性别" v-model="userInfoObj.gender==1?'男':'女'"></u-cell>
                        	<!-- <u-cell title="邮箱" v-model="userInfoObj.account.email"></u-cell> -->
                        	<!-- <u-cell title="身份证" v-model="userInfoObj.idNumber"></u-cell> -->
							<u-cell title="生日" v-model="userInfoObj.birthday"></u-cell>
                        	<u-cell title="手机号" v-model="userInfoObj.account.mobile"></u-cell>
                        	<!-- <u-cell @click="toRouter('nickName')" title="昵称" :isLink="true" arrow-direction="left" v-model="userInfoObj.account.nickName"></u-cell> -->
                        	<!-- <u-cell @click="toRouter('newBirt')" title="生日" :isLink="true" arrow-direction="left" v-model="userInfoObj.birthday"></u-cell> -->
                        	<!-- <u-cell @click="toRouter('indLabels')" title="个人标签" :isLink="true" arrow-direction="left" v-model="userInfoObj.rank"></u-cell> -->
                        </u-cell-group>
					</view>
				</view>
            </view>
				<!-- 企业信息 -->
				<view class="setInfoItem">
					<view class="u-demo-block">
						<text class="u-demo-block__title">企业信息</text>
						<view class="u-demo-block__content">
                            <u-cell-group>
								<!-- 内容为姓名的话代表没有对应字段 -->
								<!-- 语言设置和位置设置个人觉得应该有进行选择的功能 -->
								<!-- 个人标签的字段也存在问题，rank是职级标签，没有对应字段 -->
                            	<!-- <u-cell title="企业名称" v-model="userInfoObj.companyName"></u-cell>
                            	<u-cell title="所属区域" v-model="userInfoObj.name"></u-cell> -->
								<u-cell title="邮箱" v-model="userInfoObj.account.email"></u-cell>
                            	<u-cell title="部门" v-model="userInfoObj.departName"></u-cell>
								<u-cell title="岗位" v-model="userInfoObj.duty"></u-cell>
                            </u-cell-group>
						</view>
					</view>
				</view>
				<!-- 其他设置 -->
				<view class="setInfoItem">
					<view class="u-demo-block">
						<text class="u-demo-block__title">其他设置</text>
						<view class="u-demo-block__content">
                            <u-cell-group>
                            	<!-- <u-cell title="语言设置" v-model="userInfoObj.name"></u-cell>
                            	<u-cell title="位置" v-model="userInfoObj.name"></u-cell> -->
                            	<u-cell @click="toRouter('next')" title="修改密码" :isLink="true" arrow-direction="left" v-model="userInfoObj.account.passValue"></u-cell>
                            </u-cell-group>
						</view>
					</view>
				</view>
			<u-button type="error" text="退  出"  @click="logout()"></u-button>
		</view>
		<u-modal :show="clearShow" @confirm="confirmClear" @cancel="clearShow=false" 
		:showCancelButton="true" ref="uModal" content="您确认要退出当前账号吗？" :asyncClose="true"></u-modal><view style="height: 50upx;"></view>
	</view>
</template>
<script>
	import userApi from "@/api/system/user";
	import apiUserbasic from '@/api/boe/userbasic.js'
	import uploadUtil from '@/utils/upload.js'
	import accountApi from '@/api/account';
	import config from '@/config/index.js'
	import cropper from "@/components/x-cropper/x-cropper.vue"
	import { mapGetters } from 'vuex';
	import {getToken} from '@/utils/token.js'
	export default {
		components: {cropper},
		data() {
			return {
				fileUrl:this.$config.fileUrl,
				aid:'',
				userInfoObj:{
					account:{nickName:'',mobile:'',avatar:'',email:'',passValue:'',sex:''},
				},
				clearShow:false,
				imgurl:"",
			}
		},
		computed: {
		    ...mapGetters(['userInfo'])
		},
		onShow(){
			this.$store.dispatch('GetUserInfo').then(rs=>{
				this.aid=rs.aid;
				this.imgurl = rs.avatar;
				this.load();
			})
		},
		onLoad(){
			//this.load()
		},
		methods: {
			logout() {
				this.clearShow=true;
			},
			updateHeadImg() {
				let self=this;
				if (this.fSelecting) return;
				this.fSelecting = true;
				setTimeout(() => {
					this.fSelecting = false;
				}, 500);
			
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'],
					success: (r) => {
						uni.showLoading({
							mask: true
						});
						
						uploadUtil.uploadFile(r.tempFilePaths[0]).then(rs=>{
							if(rs.status==200){
								this.imgurl = rs.result.httpPath;
								accountApi.updateAvatar({id:this.aid,avatar:rs.result.filePath}).then(rs2=>{
									if(rs2.status == 200){
										// 更新下页面缓存
										this.$store.dispatch('InitData');
										// uni.navigateBack(-1);
										uni.showToast({
											title:'更新成功',
											image:'../../static/images/icon/ok-icon.png'
										})
										//同步保存到用户中心的数据库
										let upinfo={
										  aid:this.aid,
										  sign:'',
										  avatar:rs.result.filePath
										}
										apiUserBasic.updateUser(upinfo).then(rs=>{
										  if(rs.status!=200){
										    console.error('更新用户中心用户像头失败');
										  }
										})
									} else {
										uni.showToast({
											title:'更新失败'
										})
									}
								})
								
							}
						});
						uni.hideLoading(); 
					}
				})
			},
			confirmClear(){
				let that = this;
				that.$store.dispatch("LogOut").then(rs =>{
					that.clearShow=false;
					if(rs.status==200){
						let loginPath=this.$config.loginPath;
						if(loginPath.startsWith('http')){
							// #ifdef APP-PLUS
							plus.runtime.openURL(loginPath) //这里默认使用外部浏览器打开而不是内部web-view组件打开
							// #endif
							// #ifdef H5
							//window.open(loginPath)
							location.href=loginPath;
							// #endif
						}else{
							uni.redirectTo({
								url:loginPath
							})
						}
					}else{
						that.$refs.loginToast.show({message:'退出失败',type:'error'});
					}
				}).catch(() => {
				  that.clearShow=false;
				});				
			},
			// 跳转到对应修改页面
			toRouter(name) {
				let router={
					nickName:'nickName',
					newBirt:'newBirt',
					indLabels:'indLabels',
					next:'next'
				}
				if(name==='headimg'){
					uni.navigateTo({
						url: '/pages/my/headimg'
					})
				}else{
					uni.navigateTo({
						url: `/pages/login/${router[name]}`
					})
				}
			},
			async load(){
				uni.showLoading({ title: '加载中...' });
				await userApi.detail(this.aid).then(res=>{
					if(res.status==200){
						if(res.result.account.avatar){
							res.result.account.avatar=this.$config.fileUrl+res.result.account.avatar
						}
						this.userInfoObj=res.result
					}else{
						uni.showToast({
						title: "获取数据失败",
						icon:'none' 
						});
					}
				})
				uni.hideLoading();
			}
		},
	};
</script>

<style lang="scss" scoped>
	/deep/ .u-modal{
		width: 288px !important;
		border-radius: 28upx;
	}
	/deep/ .u-modal__content{
		text-align: center;
		font-size: 36upx;
		font-weight: 600;
		color: #333333;
		padding: 33px 25px 33px 25px;
	}
	.uavatar{
		border:1px solid #73adfe;
		color:#73adfe;
		text-align: center;
		font-size: 6pt;
		line-height: 20px;
		vertical-align: middle;
		width: 40px;
		height: 40px;
		border-radius: 20px;
	}
	.settingDetail {
        
        .u-demo-block__content{
            margin-top: 10px;
			font-family: PingFangSC-Regular;
        }
        
        /deep/.u-cell__body{
            padding: 17px 18px;
        }

		/deep/.u-form-item__body__left__content__label {
			width: 100px;
		}

		.u-input {
			margin-left: 50px;
		}

		.setInfoItem {
			// padding: 0 20px;
			padding-top: 20px;
            background: white;
			
            .u-demo-block__title{
				margin-left: 35upx;
                font-size: 18px;
                color: rgba(51, 51, 51, 1);
				font-family: PingFangSC-Medium;
            }

			text {
				font-weight: 600;
			}

			>view {
				margin: 10px 2px;
                

				>text {
					font-weight: 400;
				}

				view {
					text {
						color: #101010;
						font-weight: 400;
						align-items: center;
					}

					text:last-of-type {
						// margin-left: 6px;
					}

					.hideStyle {
						font-size: 12px;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.arrow-right {
						margin-top: 6px;
					}
				}
			}

			//虚线
			// >view:not(:last-of-type) {
			// 	border-bottom: 1px solid #eaecef;
			// }
		}

		.u-button {
			//background-color: blue;
		}

		.exitBtn {
			padding-top: 25upx;
		}
	}
</style>
