<template>
	<view class="page_container">
		<view class="self_info_row"></view>

		<view class="info_card">
			<my-avatar :src="selfInfo.faceURL" :desc="selfInfo.nickname" size="46" />

			<view class="id_row">
				<text class="nickname">{{ selfInfo.nickname }}</text>
				<view class="id_row_copy" @click="copy">
					<text class="id">{{ selfInfo.userID }}</text>
					<image style="width: 32rpx; height: 32rpx" src="@/static/images/id_copy.png" mode="" />
				</view>
			</view>

			<view class="qr" @click="toSelfQr">
				<img src="static/images/self_info_qr.png" alt="" />
				<img src="static/images/common_right.png" alt="" />
			</view>
		</view>

		<view class="action_box">
			<view @click="profileMenuClick(item)" class="profile_menu_item" v-for="item in profileMenus"
				:key="item.idx">
				<view class="menu_left">
					<image style="width: 48rpx; height: 48rpx" :src="item.icon" mode="" />
					<text>{{ item.title }}</text>
				</view>
				<u-icon name="arrow-right" size="16" color="#999"></u-icon>
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import IMSDK from "openim-uniapp-polyfill";
	import MyAvatar from "@/components/MyAvatar/index.vue";
	export default {
		components: {
			MyAvatar,
		},
		data() {
			return {
				profileMenus: [{
						idx: 0,
						title: "我的信息",
						icon: require("static/images/profile_menu_info.png"),
					},
					{
						idx: 2,
						title: "账号设置",
						icon: require("static/images/profile_menu_account.png"),
					},
					{
						idx: 3,
						title: "关于我们",
						icon: require("static/images/profile_menu_about.png"),
					},
					{
						idx: 4,
						title: "退出登录",
						icon: require("static/images/profile_menu_logout.png"),
					},
				],
			};
		},
		computed: {
			selfInfo() {
				return this.$store.getters.storeSelfInfo;
			},
		},
		methods: {
			copy() {
				console.log(this.selfInfo)
				uni.setClipboardData({
					showToast: false,
					data: this.selfInfo.userID,
					success: function() {
						uni.showToast({
							icon: "none",
							title: "复制成功",
						});
					},
				});
			},
			logoutConfirm() {
				console.log(1)
				IMSDK.asyncApi(IMSDK.IMMethods.Logout, IMSDK.uuid()).then(() => {
					console.log(2)
					uni.removeStorage({
						key: "IMToken",
					});
					uni.removeStorage({
						key: "BusinessToken",
					});
				}).catch((err) => {
					console.log(3)
					console.log(err)
				}).finally(() => {
					console.log(4)
					uni.$u.route("/pages/login/index");
				});
			},
			profileMenuClick({idx}) {
				switch (idx) {
					case 0:
						uni.navigateTo({
							url: "/pages/profile/selfInfo/index",
						});
						break;
					case 1:
						uni.navigateTo({
							url: "/pages/profile/messageNotification/index",
						});
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/profile/accountSetting/index",
						});
						break;
					case 3:
						uni.navigateTo({
							url: "/pages/profile/about/index",
						});
						break;
					case 4:
						uni.showModal({
							title: "提示",
							content: "确定要退出当前账号吗？",
							confirmText: "确认",
							cancelText: "取消",
							success: (res) => {
								if (res.confirm) {
									this.logoutConfirm();
								}
							},
						});
						break;
					default:
						break;
				}
			},
			toSelfQr() {
				uni.navigateTo({
					url: `/pages/common/userOrGroupQrCode/index`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page_container {
		background-color: #f8f9fa;

		.self_info_row {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			width: 100%;
			height: 276rpx;
			background-image: url("@/static/images/profile_top_bg.png");
			background-repeat: round;
		}

		.info_card {
			width: 640rpx;
			height: 196rpx;
			border-radius: 6px;
			background: #fff;
			margin: -120rpx auto 0 auto;
			padding: 0 36rpx;
			color: #0c1c33;
			display: flex;
			align-items: center;

			.id_row {
				@include vCenterBox();
				display: flex;
				height: 46px;
				margin-left: 16rpx;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				flex: 1;
				font-size: 28rpx;

				&_copy {
					@include vCenterBox();
				}

				.nickname {
					@include nomalEllipsis();
					max-width: 400rpx;
					font-weight: 500;
					font-size: 34rpx;
				}

				.id {
					color: #8e9ab0;
				}
			}

			img {
				width: 18px;
				height: 18px;
			}
		}

		.action_box {
			margin: 24rpx 24rpx 0 24rpx;
			background: #fff;
			border-radius: 6px;
		}

		.profile_menu_item {
			@include btwBox();
			padding: 24rpx 36rpx;

			.menu_left {
				@include vCenterBox();
				color: $uni-text-color;

				image {
					margin-right: 24rpx;
				}
			}
		}
	}
</style>