<template>
	<view class="user-content">
		<view class="status_bar" :style="`background:${$config('primaryColor')}`">
		  <!-- 这里是状态栏 -->
	    </view>
		<!-- 头部 -->
		<view class="user-head" :style="`background:${$config('primaryColor')}`">
			<view class="user-photo">
				<u-avatar :src="userAvatarUrl" size="100" class="avatar"></u-avatar>
			</view>
			<view class="user-info">
				<text class="user-name">{{userData.orgName}}</text>
				<text class="user-phone">{{userData.username}}</text>
			</view>
			<view class="user-org" @click="show = true" v-if="orglist&&orglist.length">
				切换 <u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<!-- 列表 -->
		<view class="user-list">
			<u-cell-group>
				<u-cell-item icon="lock" icon-size="38" :icon-style="{color:'#00aaff'}" index="2" @click="toPage(1)" title="修改密码"></u-cell-item>
				<u-cell-item icon="volume-up" icon-size="38" :icon-style="{color:'#00aaff'}" index="1" @click="toPage(3)" title="消息">
					<u-badge :count="noReadNums" :absolute="false" slot="right-icon"></u-badge>
				</u-cell-item>
			</u-cell-group>
			<u-cell-group>
				<u-cell-item icon="info-circle" icon-size="38" :icon-style="{color:'#00aaff'}" index="1" @click="toPage(2)" :value="curVer.version" title="版本检查"></u-cell-item>
				<!-- <u-cell-item icon="info-circle" icon-size="38" :icon-style="{color:'#55aa00'}" index="1" @click="toPage" title="关于我们"></u-cell-item> -->
				<u-cell-item icon="file-text" icon-size="38" :icon-style="{color:'#00aaff'}" index="0" @click="toPage(0)" title="服务协议及隐私政策"></u-cell-item>
			</u-cell-group>
		</view>
		<!-- 退出 -->
		<view class="user-btn">
			<u-button type="success" :custom-style="{background:$config('primaryColor')}" hover-class="none" @click="quitOutSys" shape="circle">退出登录</u-button>
		</view>
		<u-action-sheet :list="orglist" v-model="show" @click="changeAcount" :tips="tips" :cancel-btn="true"></u-action-sheet>
	</view>
</template>

<script>
	import { getUserInfo, logout, login, getUnreadCount } from '@/api/user.js'
	import { getSysVersion } from '@/api/data.js'
	import { checkVersionToLoadUpdate, clzConfirm } from '@/libs/tools';
	import market from "@/js_sdk/dc-market/market.js"
	export default {
		data() {
			return {
				isRemember: false,
				show:false,
				tips: {
					text: '切换账户',
					color: '#999',
					fontSize: 32
				},
				userInfoData: null,  //  用户信息
				userAvatarUrl: ''  ,//  用户头像
				curVer: null,
				noReadNums: 0
			};
		},
		onShow() {
			this.getUnread()
			console.log(this.userData)
		},
		computed: {
			orglist() {
				// 当前连锁账户
				const orgs = this.$store.state.vuex_authOrgs;
				const user = this.$store.state.vuex_userData;
				if(orgs){
					orgs.map(item => {
						item.text = item.orgName
					})
				}
				return orgs ? orgs.filter(item => item.orgSn != user.orgSn) : []
			},
			userData () {
				return this.$store.state.vuex_userData;
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$config('primaryColor')
			})
			this.isRemember = this.$store.state.vuex_isRemember;
			this.curVer = getApp().globalData.version;
		},
		methods:{
			// 未读消息
			getUnread(){
				getUnreadCount().then(res => {
					this.noReadNums = res.data.no_read_count || 0
				})
			},
			// 过滤权限code
			fiterAuthCode(data) {
				data.permCodes = data.permCodes.filter(item => item.indexOf('_mobile') > 0);
				return data;
			},
			// 切换账户
			changeAcount(index){
				const _this = this
				const item = this.orglist[index]
				console.log(index,item)
				this.$store.state.vuex_changeOrg = item.orgSn
				this.$set(getApp().globalData,'changeOrg',item.orgSn)
				setTimeout(()=>{
					//  登录
					login({ username: '', password: '' }).then(res => {
						console.log(res)
						uni.hideLoading();
						if (res.status == 200) {
							_this.$u.vuex('vuex_userData', _this.fiterAuthCode(res.data.auth_user));
							_this.$u.vuex('vuex_token', res.data.access_token);
							_this.$u.vuex('vuex_authOrgs',res.data.auth_orgs);
							getApp().globalData.token = res.data.access_token;
							uni.setStorageSync('loginTimeOut', 'NO');
							this.toMain()
							uni.$emit("refreshSalesHomeBL")
							uni.showToast({ icon: 'none', title: '切换成功！' });
						}else{
							uni.showToast({ icon: 'none', title: res.message });
						}
					});
				},100)
			},
			// 跳转到首页
			toMain() {
				uni.switchTab({
					url: '/pages/sales/index'
				});
			},
			// 打开对应的页面
			toPage(index){
				let pageUrl=[
					'/pages/login/userAuthYs?fromPage=usercenter',
					'/pages/userCenter/changePwd',
					'getVersion',
					'/pages/xtNotice/xtNotice'
					]
				if(index != 2){
					uni.navigateTo({
						url: pageUrl[index]
					})
				}else{
					this[pageUrl[index]]()
				}
			},
			// 退出登录确认弹框
			quitOutSys() {
				const _this = this;
				clzConfirm({
					title: '提示',
					content: '确定退出登录？',
					success: function(res) {
						if (res.confirm || res.index == 0) {
							_this.quitSys();
						}
					}
				});
			},
			// 退出登录，返回登录页
			quitSys() {
				logout().then(res => {
					console.log(res);
					if (res.status == 200) {
						// this.$store.commit("$closeWebsocket")
						this.$store.state.vuex_token = '';
						this.$store.state.vuex_userData = '';
						this.$u.vuex('vuex_authOrgs','');
						getApp().globalData.token = '';
						this.$set(getApp().globalData,'changeOrg','')
						uni.setStorageSync('setStatusIndexFunc', 0);
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 500);
					}
				});
			},
			// 获取最新版本信息
			getVersion() {
				let version = getApp().globalData.version
				console.log(version)
				getSysVersion({versionType:version.platform=='android'?'ANDROID':'IOS'}).then(ret => {
					console.log(JSON.stringify(ret))
					if(ret.status == 200){
						console.log(ret.data)
						this.$store.state.vuex_versionInfo = ret.data
						//进行版本型号的比对 以及下载更新请求
						checkVersionToLoadUpdate(ret.data, 1, market); 
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-content{
		width: 100%;
		.user-head{
			display: flex;
			align-items: center;
			padding: 80rpx 35rpx;
			.user-photo{
				flex-shrink: 0;
				margin-right: 5rpx;
			}
			.user-org{
				color: #fff;
			}
			.user-info{
				flex-grow: 1;
				padding: 0 20rpx;
				color: #FFFFFF;
				.user-name{
					display: block;
					font-size: 36rpx;
					margin-bottom: 10rpx;
				}
				.user-phone{
					display: block;
					font-size: 28rpx;
				}
			}
		}
		.user-list{
			padding: 0 20upx;
			> view{
				margin: 20upx 0;
				border-radius: 15upx;
				box-shadow: 0upx 3upx 6upx #eee;
				overflow: hidden;
			}
		}
		.user-btn{
			padding: 85rpx 200rpx;
		}
	}
</style>
