<template>
	<view>
		<view class="mine-header">
			<view class=" flex im-space-between im-align-items-center" style="margin-bottom: 1.5625rem;">
				 <!-- bg-white mb-10 padding -->
				<view class="flex justify-start" @tap="editInfo()">
					 <!-- bg-white -->
					<!-- #ifdef APP-PLUS -->
					<block v-for="(items,indexs) in imglist" :key="indexs" v-if="network_log == 'none'">
						<view class='cu-avatar lg mr-15'  v-if="loginStore.userInfo.imgname === items.name" :class="appSetting.circleAvatar?'round':'radius'" :style="[{backgroundImage:'url('+items.path+')'}]"></view>
					</block>
					<view v-else class='cu-avatar lg mr-15'  :class="appSetting.circleAvatar?'round':'radius'" :style="[{backgroundImage:'url('+loginStore.userInfo.avatar+')'}]"></view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class='cu-avatar lg mr-15'  :class="appSetting.circleAvatar?'round':'radius'" :style="[{backgroundImage:'url('+loginStore.userInfo.avatar+')'}]"></view>
					<!-- #endif -->
					<view class='im-flex im-justify-content-start im-columns'>
						<view class="mb-5 f-18 mb-10 im-flex im-align-items-center">
							<view class="textwhite">{{loginStore.userInfo.realname}}</view>
							<view class='cu-tag ml-10  round light' :class="loginStore.userInfo.is_auth ? 'bg-orange' : 'bg-grey'">{{loginStore.userInfo.is_auth ? '已认证' : '未认证'}}</view>
						</view>
						<view class="text-white mb-10">{{loginStore.userInfo.account}}</view>
					</view>
				</view>
				<view class="cuIcon-qrcode f-24 text-white" @tap="openQr"></view>
			</view>
		</view>
		
		<view class="mine-header-arc"></view>
		
		<view class="mine-card mine-card-top">
			<view class="mine-list-item" @tap="scan">
				<view class="mine-list-icon" style="background: linear-gradient(135deg, rgb(255, 153, 102), rgb(255, 94, 98));">
					<text class="cuIcon-scan text-white"></text>
				</view>
				<view class="mine-list-title">扫一扫</view>
				<view class="mine-list-arrow cuIcon-right"></view>
			</view>
		</view>
		
		<view class="mine-card">
			<view class="mine-list-item" @tap="showSetting">
				<view class="mine-list-icon" style="background: linear-gradient(135deg, rgb(161, 140, 209), rgb(251, 194, 235));">
					<text class="cuIcon-settings text-white"></text>
				</view>
				<view class="mine-list-title">通用设置</view>
				<view class="mine-list-arrow cuIcon-right"></view>
			</view>
			<view class="mine-list-item" @tap="showsecure">
				<view class="mine-list-icon" style="background: linear-gradient(135deg, rgb(67, 206, 162), rgb(24, 90, 157));">
					<text class="cuIcon-safe text-white"></text>
				</view>
				<view class="mine-list-title">账号安全</view>
				<view class="action">
					<text class="text-grey cuIcon-right"></text>
				</view>
			</view>
			<view class="mine-list-item" @click="toFriendsCircle">
				<view class="mine-list-icon" style="background: linear-gradient(135deg, rgb(233, 229, 92), rgb(95, 249, 87));">
					<uni-icons type="pyq" size="18" color="#ffffff"></uni-icons>
				</view>
				<view class="mine-list-title">朋友圈</view>
				<view class="action">
					<text class="text-grey cuIcon-right"></text>
				</view>
			</view>
			<view class="mine-list-item" @tap="showDoc">
				<view class="mine-list-icon" style="background: linear-gradient(135deg, rgb(54, 209, 196), rgb(30, 144, 255));">
					<text class="cuIcon-question text-white"></text>
				</view>
				<view class="mine-list-title">帮助中心</view>
				<view class="action">
					<text class="text-grey cuIcon-right"></text>
				</view>
			</view>
			<view class="mine-list-item" @tap="wanttogo">
				<view class="mine-list-icon" style="background: linear-gradient(135deg, rgb(255, 33, 81), rgb(255, 255, 28));">
					<text class="cuIcon-qrcode text-white"></text>
				</view>
				<view class="mine-list-title">邀请好友</view>
				<view class="action">
					<text class="text-grey cuIcon-right"></text>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="mine-list-item" @click="checkVersion()">
				<view class="mine-list-icon" style="background: linear-gradient(135deg, rgb(247, 151, 30), rgb(255, 210, 0));">
					<text class="cuIcon-question text-white"></text>
				</view>
				<view class="mine-list-title">检查更新</view>
				<view class="action">
					<text class="text-grey">{{verisonName}} </text>
					<text class="text-grey cuIcon-right"></text>
				</view>
			</view>
			<!-- #endif -->
			<view class="mine-list-item" @click="about()" v-if="globalConfig.demon_mode">
				<view class="mine-list-icon" style="background: linear-gradient(135deg, rgb(67, 233, 123), rgb(56, 249, 215));">
					<text class="cuIcon-question text-white"></text>
				</view>
				<view class="mine-list-title">关于IM</view>
				<view class="action">
					<text class="text-grey cuIcon-right"></text>
				</view>
			</view>
			
		</view>
		
		<view></view>
	</view>
</template>

<script>
	import { useloginStore } from '@/store/login'
	import pinia from '@/store/index'
	import scan from '@/common/scan.js'
	// #ifdef APP-PLUS
	import appUpdate from '@/common/appUpdate.js';
	import {getSavedImages} from '@/utils/LocalFileSystemURL.js'
	// #endif
	import { storeToRefs } from 'pinia';
	import { useMsgStore } from '@/store/message';
	const loginStore = useloginStore(pinia)
	const userStore = useloginStore(pinia)
	const msgStore = useMsgStore(pinia)
	const {network_log} = storeToRefs(msgStore);
	export default {
		data() {
			return {
				loginStore:loginStore,
				globalConfig:loginStore.globalConfig,
				appSetting:loginStore.appSetting,
				userInfo:userStore.userInfo,
				versionCode:'',
				verisonName:'',
				imglist:[],
				network_log:network_log
			}
		},
		created() {
			// #ifdef APP-PLUS
				this.getImagePath()
			// #endif
		},
		mounted() {
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid,(inf) => {
				this.versionCode = inf.versionCode
				this.verisonName = inf.version
			});
			// #endif
		}, 
		methods: {
			async getImagePath(){
				this.imglist = await getSavedImages()
				this.imglist.map(item => {
				  item.path = plus.io.convertLocalFileSystemURL(item.path)
				});
				// console.info(this.imglist,'读取地址');
			},
			logout(){
				let client_id=uni.getStorageSync('client_id');
				this.$api.LoginApi.logout({client_id:client_id}).then(res => {
					if (res.code == 0) {
						loginStore.logout()
					}
				})
				
			},
			about(){
				if(this.globalConfig && this.globalConfig.demon_mode){
					uni.navigateTo({
						url:"/pages/mine/about"
					})
				}else{
					uni.navigateTo({
						url:"/pages/mine/about"
					})
				}
				
			},
			showSetting(){
				uni.navigateTo({
					url:"/pages/mine/setting"
				})
			},
			showsecure(){
				uni.navigateTo({
					url:"/pages/mine/secure"
				})
			},
			showDoc(){
				uni.navigateTo({
					url:"/pages/mine/doc"
				})
			},
			wanttogo(){
				this.$api.msgApi.getMoveInviteLink({}).then(res => {
					// console.log(res);
					if(res.code==0){
						uni.setClipboardData({
						  data: res.data,
						  success: () => {
						    uni.showToast({
						      title: '复制成功',
						      icon: 'none'
						    });
						  },
						  fail: (err) => {
						    uni.showToast({
						      title: '复制失败',
						      icon: 'none'
						    });
						    console.error(err);
						  }
						});
					}
				})
			},
			editInfo(){
				uni.navigateTo({
					url:"/pages/mine/profile"
				})
			},
			scan(){
				scan.scanQr();
			},
			openQr(){
				uni.navigateTo({
					url:"/pages/index/qrcode"
				})
			},
			toFriendsCircle(){
				uni.navigateTo({
					url:"/pages/compass/personalcircleoffriends?user_id="+this.userInfo.user_id+"&avatar="+this.userInfo.avatar+"&realname="+this.userInfo.realname
				})
			},
			checkVersion(){
				appUpdate(true);
			}
		}
	}
</script>

<style scoped lang="scss">
.mine-header{
	position: relative;
	background-color: #0389fb;
	padding: .625rem .9375rem .15625rem;
	margin-bottom: 0;
	overflow: visible;
}
.textwhite{
	color: #fff;
	font-weight: bold;
}
.mine-header-arc{
	position: relative;
	width: 100%;
	height: 3.125rem;
	margin-top: -1.25rem;
	left: 0;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
}
.mine-header-arc:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3.125rem;
	background-color: #0389fb;
	border-radius: 0 0 80% 80% / 0 0 100% 100%;
	transform: scaleY(1.4);
}
.mine-card{
	background: #fff;
	border-radius: .75rem;
	margin: 0 .75rem 1rem;
	box-shadow: 0 .125rem .75rem rgba(0, 0, 0, .06);
	padding: 0;
}
.mine-card-top{
	margin-top: -2.5rem;
	z-index: 3;
	position: relative;
	margin-left: 1rem;
	margin-right: 1rem;
	border-radius: 1rem;
	box-shadow: 0 .375rem 1rem rgba(3, 137, 251, .15), 0 .125rem .75rem rgba(0, 0, 0, .08);
	.mine-list-item:last-child{
		border-bottom: none;
	}
}
.mine-list-item{
	display: flex;
	align-items: center;
	padding: 1rem;
	border-bottom: .03125rem solid #f3f8fc;
	position: relative;
}
.mine-list-icon{
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: .75rem;
	font-size: 1.125rem;
	color: #fff;
}
.mine-list-title{
	font-size: .9375rem;
	color: #222;
	flex: 1;
}
.mine-list-arrow{
	font-size: 1rem;
	color: #bbb;
}
</style>
