<template>
	<view class="settings-page">
		<custom-navbar title="消息设置" :showBack="true"></custom-navbar>
		<view class="settings-title">
			APP关闭时
		</view>
		<view class="settings-cards">
			<view class="settings-card card-line">
				<view class="card-heard flex-row-center-between">
					<view class="card-heard-left flex-row-center">
						<text class="card-heard-left-text">新消息系统通知</text>
					</view>
					<view class="card-heard-right flex-row-center" @click="goPermissions">
						<text class="card-heard-right-text color-red">{{isEnabledValue}}</text>
						<image
							src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/01aff5d8-de48-4c53-9425-53a9b4da3dbc.png"
							class="arrow-right" mode="aspectFit"></image>
					</view>

				</view>
				<view class="card-tip"> 在系统中开启，可以收到订单、聊天等消息通</view>
			</view>
			<view class="settings-card card-line flex-row-center-between">
				<view>
					<view class="card-heard flex-row-center-between">
						<view class="card-heard-left flex-row-center">
							<text class="card-heard-left-text">新消息系统通知</text>
						</view>
					</view>
					<view class="card-tip"> 开启语音提示避免落单</view>
				</view>
				<uv-switch v-model="value" @change="changeVoice" activeColor="#E8101E"></uv-switch>
			</view>
		</view>

		<view class="settings-title">
			按消息类型设置
		</view>

		<view class="settings-cards">
			<view class="settings-card card-line" @click="navigateTo(`/pages/message/message_setting`)">
				<view class="card-heard flex-row-center-between">
					<view class="card-heard-left flex-row-center">
						<image class="card-heard-left-icon1" mode="heightFix"
							src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b37e9054-c368-4463-a058-5262148b44dd.png">
						</image>
						<text class="card-heard-left-text">订单消息</text>
					</view>
					<view class="card-heard-right flex-row-center">
						<image
							src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/51f48a77-82f6-4952-9983-5a52401123b5.png"
							class="arrow-right" mode="aspectFit"></image>
					</view>

				</view>
				<view class="card-tip"> 订单动态、履约信息等内容</view>
			</view>
			<!-- <view class="settings-card card-line" @click="navigateTo(`/pages/message/active_setting`)">
				<view class="card-heard flex-row-center-between">
					<view class="card-heard-left flex-row-center">
						<image class="card-heard-left-icon2" mode="heightFix"
							src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/468b55e0-6ef2-4abf-9c0c-f015557061ec.png">
						</image>
						<text class="card-heard-left-text">活动优惠</text>
					</view>
					<view class="card-heard-right flex-row-center">
						<image
							src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/51f48a77-82f6-4952-9983-5a52401123b5.png"
							class="arrow-right" mode="aspectFit"></image>
					</view>

				</view>
				<view class="card-tip"> 福利促销、互动玩法等热门活动咨询</view>
			</view> -->
			<!-- 点击触发弹窗 -->
			<!-- <view class="settings-card card-line" @click="showTestDialog = true">
				<view class="card-heard flex-row-center-between">
					<view class="card-heard-left flex-row-center">

						<text class="card-heard-left-text">收不到推送消息？</text>
					</view>
					<view class="card-heard-right flex-row-center">
						<text class="card-heard-right-text">立即测试</text>
						<image
							src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/51f48a77-82f6-4952-9983-5a52401123b5.png"
							class="arrow-right" mode="aspectFit"></image>
					</view>

				</view>
			</view> -->
		</view>

		<!-- 弹窗组件 -->
		<view v-if="showTestDialog" class="dialog-mask" @click="closeDialog" @touchmove.prevent>
			<view class="dialog-container" :class="{ 'dialog-show': showTestDialog, 'dialog-hide': !showTestDialog }"
				:style="{ backgroundImage: `url(${dialogBgImage})` }" @click.stop>
				<view class="dialog-title">温馨提示</view>
				<view class="dialog-content">
					测试已提交，若5分钟后仍未收到推送消息，请联系官方客服进行处理。
				</view>
				<view class="dialog-btn" @click.stop="closeDialog">
					<text class="dialog-btn-text">好的</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import request from '@/utils/request'
	import {
		isNotificationsEnabled,
		permissions
	} from '@/utils/AS-NotifyTheAuthority.js'
	export default {
		data() {
			return {
				isAppSettingReturn:false,//是否进入app设置页
				showTestDialog: false,
				value: true,
				isEnabled: true,
				stateList: [],
				dialogBgImage: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dc1ad615-54be-4274-9fd8-e13a9b15b8db.png"
			}
		},
		async onShow() {
			await this.getReceiveState()
			this.isEnabled = isNotificationsEnabled()
			if(this.isAppSettingReturn){
				this.showChangeState()
				this.isAppSettingReturn = false
			}
			
			// #ifdef APP-PLUS

			// #endif
		},
		onLoad() {

		},
		computed: {
			isEnabledValue() {
				return this.isEnabled ? "已开启" : "前往开启"
			},
		},
		methods: {
			closeDialog() {
				try {
					this.showTestDialog = false;
				} catch (err) {
					console.error('关闭弹窗失败:', err);
					// 兜底处理：强制置为 false
					this.$set(this, 'showTestDialog', false);
				}
			},
			async getReceiveState(){
				await request.post('/sj/push/getReceiveState').then(result => {
					this.stateList = result.data.list
					this.value = this.stateList[1].state ==1 ? true:false
				})
			},
			showChangeState(){
				//如果系统通知状态和后台通知状态不一致
				let isSatae = this.isEnabled ? 1 : 2
				console.log("state", this.stateList[0].state,isSatae)
				if(this.stateList[0].state != isSatae){
					request.post('/sj/push/setReceiveState', {
						message_type_id: -1,
						message_kind_id: 0,
						state: isSatae
					}).then(result => {
						console.log("setReceiveState", result)
					})
				}
			},
			changeVoice(e) {
				let isSatae = e ? 1 : 2
				request.post('/sj/push/setReceiveState', {
					message_type_id: -2,
					message_kind_id: 0,
					state: isSatae
				}).then(result => {
					console.log("setReceiveState", result)
				})
			},
			// 页面导航
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			//去app通知页
			goPermissions() {
				if (!this.isEnabled) {
					permissions(true)
					this.isAppSettingReturn = true
				}

			}
		}
	};
</script>

<style lang="less">
	.settings-page {
		padding: 20rpx;

		.settings-title {
			font-weight: 500;
			font-size: 22rpx;
			color: #979797;
			line-height: 30rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 20rpx;
		}

		.settings-cards {
			box-sizing: border-box;
			width: 710rpx;
			padding: 0rpx 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 40rpx;

			.settings-card {
				padding: 30rpx 0rpx 36rpx 0rpx;

				.card-heard {
					.card-heard-left {
						display: flex;
						align-items: center;
						gap: 8rpx;

						.card-heard-left-icon {
							height: 32rpx;
						}

						.card-heard-left-icon1 {
							width: 32rpx;
							height: 34rpx;
						}

						.card-heard-left-icon2 {
							width: 32rpx;
							height: 29rpx;
						}

						.card-heard-left-text {
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							text-align: left;
							font-style: normal;
						}
					}

					.card-heard-right {
						gap: 10rpx;

						.card-heard-right-text {
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;
							text-align: left;
							font-style: normal;
						}

						.arrow-right {
							width: 8rpx;
							height: 16rpx;
						}
					}

				}

				.card-tip {
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #979797;
					line-height: 30rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.card-line {
				border-bottom: 1rpx solid #F5F5F5;
			}
		}

		.color-red {
			color: #E8101E !important;
		}

		// 弹窗遮罩
		.dialog-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1000;
		}

		// 弹窗容器
		.dialog-container {
			height: 526rpx;
			width: 582rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center;
			padding: 80rpx 40rpx 60rpx 40rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			min-height: 400rpx;
		}

		.dialog-title {
			font-weight: 500;
			font-size: 38rpx;
			color: #333333;
			line-height: 53rpx;
			text-align: left;
			font-style: normal;
			margin-top: 30rpx;
		}

		.dialog-content {
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			line-height: 50rpx;
			text-align: left;
			font-style: normal;
			margin-top: 50rpx;
			margin-bottom: 70rpx;
		}

		.dialog-btn {
			width: 400rpx;
			height: 88rpx;
			background: #E8101E;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: opacity 0.1s;
		}

		.dialog-btn-text {
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			letter-spacing: 2rpx;
		}

		// 平滑过渡动画
		.fade-scale-enter-active,
		.fade-scale-leave-active {
			transition: all 0.3s ease;
		}

		.fade-scale-enter {
			opacity: 0;
			transform: scale(0.9);
		}

		.fade-scale-leave-to {
			opacity: 0;
		}
	}
	
	.dialog-container {
		// 基础样式保留，新增过渡属性
		transition: all 0.3s ease;
		opacity: 0;
		transform: scale(0.9);
	}
	.dialog-show {
		opacity: 1;
		transform: scale(1);
	}
	.dialog-hide {
		opacity: 0;
		transform: scale(0.9);
	}
</style>