<template>
	<view class="container">
		<view class="header">
			<text class="back-link" @click="goBack">⬅ 返回</text>
			<text class="title">配送/对接配置中心</text>
		</view>

		<!-- 环境选择 -->
		<view class="card">
			<view class="card-header">
				<text class="card-title">运行环境</text>
				<switch :checked="isTestMode" @change="toggleTestMode" color="#409eff" />
			</view>
			<view class="env-info">
				<text class="env-tag" :class="isTestMode ? 'tag-orange' : 'tag-blue'">{{ isTestMode ? '测试 (MOCK 模式开启)' : '生产 (已连接真实承运商)' }}</text>
			</view>
		</view>

		<!-- Mock Server 配置 -->
		<view v-if="isTestMode" class="card">
			<view class="card-title">MOCK 服务配置</view>
			<view class="form-group">
				<text class="label">Server 地址</text>
				<input v-model="config.mockUrl" class="input" placeholder="http://192.168..." />
			</view>
			<view class="form-group">
				<text class="label">Webhook 接收密钥 (Secret)</text>
				<input v-model="config.webhookSecret" class="input" password placeholder="HMAC Secret" />
			</view>
			<view class="form-group">
				<text class="label">自动推送场景</text>
				<checkbox-group @change="onScenarioChange">
					<label class="checkbox-item">
						<checkbox value="auto" :checked="config.autoPush" /> 揽收后自动触发生命周期
					</label>
				</checkbox-group>
			</view>
		</view>

		<!-- 承运商列表 -->
		<view class="card">
			<view class="card-header">
				<text class="card-title">已接入承运商</text>
				<text class="add-link">+ 新增</text>
			</view>
			<view v-for="(carrier, index) in carriers" :key="index" class="carrier-item">
				<view class="carrier-info">
					<text class="carrier-name">{{ carrier.name }} ({{ carrier.code }})</text>
					<text class="carrier-meta">回调: {{ carrier.callback_status ? '在线' : '离线' }} | 轮询: {{ carrier.polling ? '开' : '关' }}</text>
				</view>
				<switch :checked="carrier.enabled" color="#409eff" />
			</view>
		</view>

		<button class="save-btn" @click="saveConfig">保存配置</button>
	</view>
</template>

<script uts>
	import { mockService, LogisticsConstants } from './mock-service.uts'

	export default {
		data() {
			return {
				isTestMode: mockService.isTestMode,
				config: {
					mockUrl: mockService.mockUrl,
					webhookSecret: '********',
					autoPush: mockService.autoPush
				},
				carriers: LogisticsConstants.CARRIERS.map((c : UTSJSONObject) : UTSJSONObject => {
					return {
						name: c['label'],
						code: c['value'],
						enabled: true,
						callback_status: true,
						polling: false
					} as UTSJSONObject
				})
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			toggleTestMode(e: any) {
				const val = e.detail.value as boolean
				this.isTestMode = val
				mockService.isTestMode = val // 同步到 Mock 服务
			},
			onScenarioChange(e: any) {
				const isAuto = e.detail.value.includes('auto')
				this.config.autoPush = isAuto
				mockService.autoPush = isAuto // 同步到 Mock 服务
			},
			saveConfig() {
				uni.showLoading({ title: '保存中...' })
				setTimeout(() => {
					mockService.mockUrl = this.config.mockUrl
					uni.hideLoading()
					uni.showToast({ title: '全局配置已同步' })
				}, 1000)
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 24rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}
	.header {
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 20rpx;
	}
	.back-link {
		font-size: 26rpx;
		color: #409eff;
		cursor: pointer;
	}
	.title {
		font-size: 34rpx;
		font-weight: bold;
		color: #303133;
	}
	.card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
	}
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.card-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #606266;
	}
	.env-tag {
		font-size: 24rpx;
		padding: 6rpx 20rpx;
		border-radius: 4rpx;
	}
	.tag-orange { background-color: #fdf6ec; color: #e6a23c; }
	.tag-blue { background-color: #ecf5ff; color: #409eff; }
	
	.form-group {
		margin-bottom: 24rpx;
	}
	.label {
		font-size: 26rpx;
		color: #909399;
		margin-bottom: 12rpx;
		display: block;
	}
	.input {
		border: 1rpx solid #dcdfe6;
		padding: 16rpx;
		border-radius: 8rpx;
		font-size: 26rpx;
	}
	.checkbox-item {
		font-size: 26rpx;
		color: #606266;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	.add-link {
		font-size: 24rpx;
		color: #409eff;
	}
	.carrier-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f2f6fc;
	}
	.carrier-name {
		font-size: 28rpx;
		color: #303133;
		display: block;
	}
	.carrier-meta {
		font-size: 22rpx;
		color: #909399;
	}
	.save-btn {
		background-color: #409eff;
		color: #fff;
		margin-top: 40rpx;
		border-radius: 12rpx;
	}
</style>
