<template>
	<view class="push-message-page">
		<div class="top-div">
			<div></div>
			<tn-button width="80px" height="32px" :plain="true" text-color="#0099ff" @click="backToIndex">
				<uni-icons type="arrow-left" size="18" color="#0099ff" style="margin-right: 5px;"></uni-icons>返回
			</tn-button>
		</div>
		<view class="page-content">
			<!-- 推送目标选择 -->
			<view class="section">
				<view class="section-title">推送目标</view>
				<tn-radio-group v-model="pushForm.targetType">
					<tn-radio label="all" value="all">全部</tn-radio>
					<tn-radio label="ios" value="ios">呼号端</tn-radio>
					<tn-radio label="android" value="android">自助机</tn-radio>
					<tn-radio label="specific" value="specific">综合屏</tn-radio>
				</tn-radio-group>

				<!-- 指定设备输入 -->
				<view class="specific-device">
					<tn-input v-model="pushForm.deviceId" placeholder="请输入设备ID" border></tn-input>
				</view>
			</view>

			<!-- 消息内容编辑 -->
			<view class="section">
				<view class="section-title">推送内容</view>
				<TnInput v-model="pushForm.title" placeholder="请输入推送标题" border class="input-field"></TnInput>
				<TnInput v-model="pushForm.content" placeholder="请输入推送内容" border
					class="textarea-field"></TnInput>
			</view>

			<!-- 推送按钮 -->
			<view class="button-section">
				<tn-button @click="handlePush" :loading="loading" class="push-button">
					{{ loading ? '推送中...' : '立即推送' }}
				</tn-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import TnInput from '@/uni_modules/tuniaoui-vue3/components/input/src/input.vue'

	// 表单数据
	const pushForm = reactive({
		targetType: 'all',
		deviceId: '',
		title: '',
		content: ''
	})

	const loading = ref(false)

	// 处理推送
	const handlePush = () => {
		// 表单验证
		if (!pushForm.title.trim()) {
			uni.showToast({
				title: '请输入推送标题',
				icon: 'none'
			})
			return
		}
		if (!pushForm.content.trim()) {
			uni.showToast({
				title: '请输入推送内容',
				icon: 'none'
			})
			return
		}
		if (pushForm.targetType === 'specific' && !pushForm.deviceId.trim()) {
			uni.showToast({
				title: '请输入设备ID',
				icon: 'none'
			})
			return
		}

		// 确认推送
		uni.showModal({
			title: '确认推送',
			content: '确定要发送这条推送消息吗？',
			success: (res) => {
				if (res.confirm) {
					sendPushMessage()
				}
			}
		})
	}

	// 发送推送消息
	const sendPushMessage = () => {
		console.log('pushing...')
	}
	
	const backToIndex = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
	.push-message-page {
		min-height: 100vh;
		background-color: #fff;
		
		.top-div {
			display: flex;
			justify-content: space-between;
			padding: 6vh 20px 1vh 20px;
		}

		.page-content {
			padding: 10px;
		}

		.section {
			background-color: #fff;
			border-radius: 3px;
			padding: 10px;
			margin-bottom: 10px;
			// box-shadow: 10px;

			.section-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #dddddd;
				margin-bottom: 10px;
				border-left: 8rpx solid 10px;
				padding-left: 10px;
			}
		}

		.specific-device {
			margin-top: 10px;
		}

		.input-field {
			margin-bottom: 10px;
		}

		.textarea-field {
			margin-top: 10px;
		}

		.button-section {
			margin-top: 20px;
			text-align: center;

			.push-button {
				width: 80%;
				height: 40px;
				font-weight: 600;
			}
		}
	}

	/* 响应式设计 */
	@media (min-width: 768px) {
		.push-message-page {
			.page-content {
				max-width: 600px;
				margin: 0 auto;
			}
		}
	}
</style>