<template>
	<view class="container">
		<!-- 门店信息 -->
		<view class="store" :style="{background: $config('topBarBackground')}">
			<view class="storeInfo">
				<image :src="personIcon" class="personImg"></image>
				<view class="storeName">
					<view>{{ pageData ? pageData.userNameCN : '-' }}</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="list">
			<view
				hover-class="navigator-hover"
				v-for="(item, index) in list"
				:key="index"
				@click="goToInfo(item)"
				:class="item.type != 'line' ? 'listItem' : 'lineItem'"
				v-if="item.auth"
			>
				<view class="listItemLeft" v-if="item.type != 'line'">
					<view class="leftImg">
						<u-icon custom-prefix="xd-icon" :name="item.icon" size="45" :color="item.color"></u-icon>
					</view>
					<text>{{ item.title }}</text>
				</view>
				<view v-if="item.type != 'line'">
					<text class="number">{{ item.number }}</text>
					<text class="banbenhao">{{ item.banbenhao }}</text>
					<u-icon name="icon-xian-11" custom-prefix="xd-icon" size="32" color="#888888"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { logout } 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() {
		const curVer = getApp().globalData.version;
		return {
			list: [
				{
					title: '个人信息',
					auth: this.$hasPermissions("M_userInfoView_mobile"),
					url: '/pages/userCenter/personInfo',
					icon: 'tarenxundian',
					color: '#55aaff'
				},
				{
					title: '修改密码',
					auth: this.$hasPermissions("M_editUserPws_mobile"),
					url: '/pages/userCenter/changePwd',
					icon: 'mimaxiugai',
					color: '#ff5500'
				},
				{ type: 'line', auth: true },
				{
					title: '关于我们',
					auth: true,
					url: '/pages/userCenter/aboutUs',
					icon: 'guanyuwomen1',
					color: '#00aaff'
				},
				{
					title: '用户协议及隐私保护政策',
					auth: true,
					url: '/pages/login/userAuthYs',
					icon: 'xieyi1',
					color: '#07b584'
				},
				{
					title: '版本检查',
					auth: true,
					banbenhao: curVer.version,
					fun: 'getVersion',
					icon: 'banben',
					color: '#ff8c57'
				},
				{ type: 'line', auth: true },
				{
					title: '退出登录',
					auth: true,
					fun: 'quitOutSys',
					icon: 'tuichuxitong',
					color: '#ff0000'
				}
			],
			pageData: null, // 门店信息
			personIcon: '/static/defaultMe.png' // 默认门店图片
		};
	},
	onShow() {
		this.pageData = this.$store.state.vuex_userData
	},
	methods: {
		// 拨打电话
		call() {
			console.log('联系公司');
		},
		// 点击我的页面列表
		goToInfo(item) {
			if (item.url && item.url != '') {
				uni.navigateTo({
					url: item.url
				});
			}
			if (item.fun) {
				this[item.fun]();
			}
		},
		// 退出登录确认弹框
		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);
				uni.showToast({
					icon: 'none',
					title: res.message
				});
				if (res.status == 200) {
					this.$store.commit("$closeWebsocket")
					this.$store.state.vuex_token = '';
					this.$store.state.vuex_userData = '';
					uni.setStorageSync('setStatusIndexFunc', 0);
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}, 1000);
				}
			});
		},
		// 获取最新版本信息
		getVersion() {
			//最新版本
			getSysVersion().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="less">
.container {
	background: #fff;
	font-size: 28rpx;
	box-sizing: border-box;
	height: calc(100vh - var(--window-top) - var(--window-bottom) - 55px);
	overflow: auto;
	color: #666;
	// 头部门店信息
	.store {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background: rgb(11, 108, 224);
		color: #fff;
		.storeInfo {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			.storeName {
				view {
					padding: 6upx 0;
					&:first-child {
						font-weight: bold;
					}
				}
				.font28 {
					color: #666;
				}
			}
			.personImg {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				border-radius: 100rpx;
			}
			.storeRightIcon {
				line-height: 58rpx;
			}
		}
	}
	// 我的页面列表
	.lineItem {
		padding: 10upx;
		background-color: #f8f8f8;
	}
	.listItem {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #efefef;
		align-items: center;
		color: #666;
		.listItemLeft {
			display: flex;
			align-items: center;
		}
		.leftImg {
			flex-grow: 1;
			padding: 10upx;
		}
		.number {
			display: inline-block;
			width: 32rpx;
			border-radius: 50%;
			color: #ffffff;
			font-size: 24rpx;
			background-color: red;
			text-align: center;
			line-height: 32rpx;
			position: relative;
			bottom: 8rpx;
			right: 20rpx;
		}
		.banbenhao {
			position: relative;
			bottom: 8rpx;
			right: 20rpx;
		}
	}
	.listItem:last-child {
		margin-bottom: 40rpx;
	}
	// logo 联系方式
	.logoContent {
		margin: 100upx 0;
		text-align: center;
		.logoImg {
			.logo {
				width: 300rpx;
				height: 105rpx;
			}
		}
		.phone {
			margin-top: 20upx;
			color: #989898;
			.phoneImg {
				position: relative;
				bottom: 8rpx;
			}
		}
	}
}
</style>