<template>
	<view class="container">
		<HeaderCustom title="我的"></HeaderCustom>
		<div class="titleBox">
			<div class="avatar">
				<img class="img" src="/static/imgs/avatar.png" alt="">
			</div>
			<div class="name" v-if="authStore?.isLoggedIn">{{userStore.userInfo.nickname}}</div>
			<div class="name" v-else @click="handleLogin">登录/注册</div>
		</div>
		<div class="cellBox">
			<uv-cell-group :customStyle="{backgroundColor:'#fff'}">
				<uv-cell icon="server-fill" title="联系客服" isLink></uv-cell>
				<uv-cell icon="more-circle-fill" title="加盟卡叔" url="/pagesA/JoiningUs/JoiningUs" isLink></uv-cell>
				<uv-cell v-if="userStore.userInfo.identitys && userStore.userInfo.identitys.some(item => item.code==='superadmin' || item.code==='enterprise')" icon="order" title="企业门店列表" url="/pagesA/StoreManage/StoreList" isLink></uv-cell>
				<uv-cell v-if="userStore.userInfo.identitys && userStore.userInfo.identitys.some(item => item.code==='superadmin' || item.code==='enterprise') && userStore.userInfo.jurisdictions && userStore.userInfo.jurisdictions.some(item => item.code==='superadmin')" icon="calendar" title="企业门店审核" url="/pagesA/StoreManage/StoreReview" isLink></uv-cell>
				<!-- <uv-cell icon="edit-pen-fill" title="公司简介" isLink></uv-cell> -->
				<!-- <uv-cell icon="file-text-fill" title="文件管理" isLink></uv-cell> -->
				<uv-cell icon="empty-news" title="隐私政策" url="/pagesA/privacy-policy/privacy-policy" isLink></uv-cell>
				<uv-cell icon="empty-order" title="用户协议" url="/pagesA/user-agreement/user-agreement" isLink></uv-cell>
				<uv-cell icon="chat-fill" title="关于我们" isLink></uv-cell>
			</uv-cell-group>
		</div>
		<uv-button v-if="authStore?.isLoggedIn" type="error" text="退出登录" customStyle="margin-top: 20px" @click="() => modal.open()"></uv-button>
		<uv-modal ref="modal" showCancelButton content='确认退出登录？' @confirm="logout"></uv-modal>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import HeaderCustom from '/components/HeaderCustom/HeaderCustom.vue'
	import {
		useAuthStore,
		useUserStore
	} from "@/store";
	import RPC from "@/utils/request";
	
	const modal = ref(null)

	const authStore = useAuthStore()
	const userStore = useUserStore()
	
	const logout = () => {
		authStore.signOut()
		userStore.setUserInfo({username: "",})
		modal.value.close()
	}

	const handleLogin = () => {
		uni.showLoading({
			title: "登录中...",
		});
		uni.login({
			success: function(loginRes) {
				console.log('loginRes', loginRes);
				RPC.post('/account/miniprogram/phonelogin', {
					code: loginRes.code
				}).then(res => {
					console.log('phonelogin', res)
					uni.showToast({
						title: "登录成功",
						icon: "success",
					});
					authStore.setAccessToken(res.token)
					userStore.setUserInfo(res)
				}).catch(() => {
					uni.showToast({
						title: "登录失败",
						icon: "error",
					});
				})
			},
			fail: () => {
				uni.hideLoading();
			}
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.titleBox {
		height: 90px;
		display: flex;
		align-items: center;
		padding-left: 5vw;
		background-color: #fff;
		margin-bottom: 10px;

		.avatar {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			margin-right: 3vw;
			background-color: #f8f8f8;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;

			.img {
				width: 80%;
				height: 80%;
			}
		}

		.name {
			font-size: 20px;
			font-weight: 700;
		}
	}

	.cellBox {
		:deep(.uv-cell__body) {
			padding: 20px 5vw;
		}

		:deep(.uv-cell__title-text) {
			color: #000;
			font-weight: 400;
			margin-left: 10px;
		}
	}
</style>