<template>
	<view class="container">
		<!-- 域名列表 -->
		<view class="domain-list" v-if="configList.length">
			<view 
				class="domain-item" 
				:class="{'domain-item-active': configIndex === index}"
				v-for="(item, index) in configList" 
				:key="item.id" 
				@click="changeConfig(index)"
			>
				<view class="domain-item-content">
					<!-- 单选按钮 -->
					<view class="radio-wrapper">
						<u-radio-group v-model="configIndex">
							<u-radio 
								:name="index" 
								size="40"
								shape="circle"
								activeColor="#2979ff"
							></u-radio>
						</u-radio-group>
					</view>
					
					<!-- 协议标签 -->
					<view :class="['protocol-tag', item.protocol.includes('https') ? 'https' : 'http']">
						<text>{{ item.protocol.includes('https') ? 'HTTPS' : 'HTTP' }}</text>
					</view>
					
					<!-- 域名 -->
					<view class="domain-name">
						<text>{{ item.address }}</text>
					</view>
					
					<!-- 操作按钮 -->
					<view @click.stop="openEdit(index)" class="domain-item-btn">
						<u-icon name="edit-pen" color="#2979ff" size="40"></u-icon>
					</view>
					<view @click.stop="delConfig(index)" class="domain-item-btn">
						<u-icon name="trash" color="#fa3534" size="40"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<u-empty margin-top="200" v-else text="没有域名,请添加" mode="list"></u-empty>
		
		<!-- 添加域名按钮 -->
		<view class="add-button-wrapper">
			<u-button 
				type="primary" 
				@click="openAdd"
			>+ 添加域名</u-button>
		</view>
		
		<!-- 添加/编辑域名弹窗 -->
		<u-modal v-model="show" width="700" :title="form.id ? '编辑域名' : '添加域名'" ref="uModal" :show-cancel-button="true" :mask-close-able="true" @confirm="addConfig">
			<view class="slot-content">
				<!-- 网络协议选择 -->
				<view class="form-item">
					<view class="form-label">
						网络协议
					</view>
					<view class="form-value" @click="protocolShow=true">
						{{ form.protocol ? form.protocol : '请选择' }}
						<view class="arrow-icon">
							<u-icon name="arrow-down" size="28"></u-icon>
						</view>
					</view>
				</view>
				
				<!-- 域名输入 -->
				<view class="form-item">
					<view class="form-label">
						域名
					</view>
					<view class="form-value">
						<input type="text" v-model="form.address" placeholder="请输入域名">
					</view>
				</view>
			</view>
		</u-modal>
		
		<!-- 协议选择器 -->
		<u-select v-model="protocolShow" :list="protocolList" @confirm="confirmProtocol"></u-select>
		
		<!-- 提示框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				configIndex: 0,
				configList: [],
				form: {
					id: '',
					protocol: '',
					address: '',
				},
				protocolShow: false,
				protocolList: [
					{
						value: 'https://',
						label: 'HTTPS'
					},
					{
						value: 'http://',
						label: 'HTTP'
					}
				],
				show: false,
			};
		},
		onLoad() {
			// 小程序只使用https
			// #ifdef MP-WEIXIN
			// this.protocolList = [
			// 	{
			// 		value: 'https://',
			// 		label: 'HTTPS'
			// 	}
			// ]
			// #endif
			this.getConfigList();
		},
		methods: {
			getConfigList() {
				uni.getStorage({
					key: 'configList',
				}).then(res => {
					// 如果返回数组为两位就是正确
					if (res.length == 2) {
						this.configList = res[1].data;
					}
					return uni.getStorage({
						key: 'configIndex',
					})
				}).then(res => {
					console.log("configIndex", res)
					if (res.length == 2) {
						this.configIndex = res[1].data;
					}
				})
			},
			changeConfig(i) {
				console.log("index", i)
				if (i !== this.configIndex) {
					this.configIndex = i;
					uni.setStorage({
						key: 'configIndex',
						data: i,
					}).then(res => {
						console.log("修改索引")
					})
				}
			},
			verification() {
				if (!this.form.protocol) {
					this.$refs.uToast.show({
						title: '请先选择协议!',
						type: 'error'
					})
					return false;
				} else if (!this.form.address) {
					this.$refs.uToast.show({
						title: '请先输入地址',
						type: 'error',
					})
					return false;
				} else if (!this.$u.test.url(this.form.protocol + this.form.address)) {
					this.$refs.uToast.show({
						title: '请确认输入地址正确',
						type: 'error',
					})
					return false;
				} else {
					return true;
				}
			},
			openAdd() {
				if (this.configList.length == 0) {
					this.form = {
						id: '',
						protocol: 'http://',
						address: '192.168.1.17:8848',
					}
				} else {
					this.form = {
						id: '',
						protocol: '',
						address: '',
					}
				}

				this.show = true;
			},
			addConfig() {
				console.log("添加页面", this.form)
				if (this.verification()) {
					if (this.form.id === '') {
						// 新增
						this.configList.push({
							id: this.$u.guid(32),
							protocol: this.form.protocol,
							address: this.form.address,
						})
						uni.setStorage({
							key: 'configList',
							data: this.configList,
						}).then(res => {
							this.$refs.uToast.show({
								title: '新增成功',
								type: 'success',
							})
						})
						if (this.configList.length == 1) {
							uni.setStorage({
								key: 'configIndex',
								data: 0,
							}).then(res => {
								console.log("添加第一个域名索引为0")
							})
						}
						this.show = false;
						this.getConfigList()
						console.log("configList", this.configList)
					} else {
						// 编辑
						this.configList.map(item => {
							if (item.id == this.form.id) {
								item.protocol = this.form.protocol;
								item.address = this.form.address;
							}
							return item;
						})
						uni.setStorage({
							key: 'configList',
							data: this.configList,
						}).then(res => {
							this.$refs.uToast.show({
								title: '编辑成功',
								type: 'success',
							})
						})
						this.show = false;
						this.getConfigList()
					}
				} else {
					this.$refs.uModal.clearLoading();
				}
			},
			confirmProtocol(e) {
				this.form.protocol = e[0].value;
			},
			openEdit(index) {
				console.log("编辑",index)
				this.form = JSON.parse(JSON.stringify(this.configList[index]));
				this.show = true;
			},
			delConfig(index) {
				uni.showModal({
					title: '提示',
					content: '确认要删除域名吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');

							this.configList.splice(index, 1);
							uni.setStorage({
								key: 'configList',
								data: this.configList,
							}).then(res => {
								this.$refs.uToast.show({
									title: '删除成功',
									type: 'success',
								})
							})
							if (this.configIndex < index) {
							} else {
								if (this.configIndex > index) {
									this.configIndex = this.configIndex - 1;
								} else if (this.configIndex == index) {
									if (this.configList.length == 0) {
										this.configIndex = -1;
									} else {
										this.configIndex = 0;
									}
								}
								uni.setStorage({
									key: 'configIndex',
									data: this.configIndex,
								}).then(res => {
									console.log("修改索引")
								})
							}
							this.getConfigList();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F7FA;
	}

	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #F5F7FA;
		padding: 20rpx;
	}

	.domain-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 120rpx; // 为底部按钮留出空间
	}

	.domain-item {
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		&-content {
			display: flex;
			align-items: center;
			padding: 35rpx 30rpx;
		}
		
		&-active {
			background-color: #f0f7ff;
			border: 1rpx solid #2979ff;
		}
		.domain-item-btn{
			margin-left: 30rpx;
		}
	}

	.radio-wrapper {
		margin-right: 0rpx;
	}

	.protocol-tag {
		padding: 4rpx 12rpx;
		border-radius: 6rpx;
		margin-right: 20rpx;
		font-size: 26rpx;
		&.https {
			background-color: rgba(41, 121, 255, 0.1);
			
			text {
				color: #2979ff;
			}
		}
		
		&.http {
			background-color: rgba(255, 152, 0, 0.1);
			
			text {
				color: #ff9800;
			}
		}
	}

	.domain-name {
		flex: 1;
		
		text {
			font-size: 28rpx;
		}
	}

	.action-buttons {
		display: flex;
		gap: 30rpx;
		view {
			padding: 10rpx;
		}
	}

	.add-button-wrapper {
		padding: 30rpx 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.slot-content {
		padding: 20rpx 30rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
		
		.form-label {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
		}
		
		.form-value {
			background-color: #f5f5f5;
			border-radius: 8rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			position: relative;
			
			input {
				width: 100%;
				height: 100%;
			}
			
			.arrow-icon {
				position: absolute;
				right: 20rpx;
			}
		}
	}
</style>