<template>
	<u-popup :show="showExitPopup" @close="closeExitPopup" closeOnClickOverlay>
		<view class="exit_popup df_flex df__direction_column ">
			<view class="popup-header">
				<u-icon name="warning" size="60rpx" color="#E33C3C"></u-icon>
				<view class="popup-title">退出登录</view>
			</view>
			<view class="df_flex df_justify_center name">{{nick || '--'}}</view>
			<view class="popup-content">确定要退出当前账号吗？</view>
			<view class="df_flex">
				<u-button class="custom_btn" text="退出登录" @tap="logOut"></u-button>
				<u-button class="cancel_btn" text="取 消" @tap="closeExitPopup"></u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	// import {
	// 	mapGetters
	// } from 'vuex'
	export default {
		name: "exitPopup",
		// computed: {
		// 	...mapGetters(['showExitPopup', 'nick'])
		// },
		data() {
			return {
				showExitPopup: false,
				nick: ''
			}
		},
		onload() {
			this.nick = this.$store.state.user.nick
			this.showExitPopup = this.$store.state.user.showExitPopup
		},
		methods: {
			closeExitPopup() {
				this.$store.commit('SET_SHOWEXITPOPUP', false)
			},
			// 退出
			logOut() {
				this.$store.dispatch('LogOut').then((res) => {
					this.closeExitPopup()
					uni.navigateTo({
						url: '/pages/login/login-one'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.exit_popup {
		padding: 48rpx 60rpx 60rpx 60rpx;
		background: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);

		&>view {
			width: 100%;
		}

		.popup-header {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 32rpx;
			
			.popup-title {
				margin-top: 16rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.popup-content {
			text-align: center;
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 48rpx;
			line-height: 1.5;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.name {
			margin: 16rpx auto 32rpx auto;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.custom_btn {
			margin: 16rpx;
			color: #ffffff;
			border: none;
			border-radius: 12rpx;
			background: linear-gradient(135deg, #E33C3C 0%, #ff4757 100%);
			box-shadow: 0 4rpx 12rpx rgba(227, 60, 60, 0.3);
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
				box-shadow: 0 2rpx 8rpx rgba(227, 60, 60, 0.4);
			}
		}

		.cancel_btn {
			margin: 16rpx;
			color: #666666;
			border: 2rpx solid #e5e5e5;
			border-radius: 12rpx;
			background-color: #ffffff;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
				background-color: #f8f9fa;
			}
		}
	}
</style>
