<template>
	<view class="config-box">
		<view class="config-list" v-if="configList.length">
			<view class="config-item" v-for="(item,index) in configList" :key="item.id" @click="changeConfig(index)">
				<!-- <u-icon v-if="configIndex==index" class="icon-checkbox-mark" name="checkbox-mark" color="#ff0000" size="50"></u-icon> -->
				<view class="acitve-box" v-if="configIndex==index">
					已选择
				</view>
				<view class="congfig-txt">
					{{item.protocol+item.address}}
				</view>
				<view class="operate-box">
					<view class="iconfont icon-bianji1 color-blue" @click.stop="openEdit(index)"></view>
					<view class="iconfont icon-shanchu color-red" @click.stop="delConfig(index)"></view>
				</view>
			</view>
		</view>
		<u-empty margin-top="200" v-else text="没有域名,请添加" mode="list"></u-empty>
		<view class="btn-box">
			<button type="primary" @tap="openAdd">添加域名</button>
		</view>
		<u-modal v-model="show" width="700" title="新增/修改域名" 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="iconfont icon-xiangyou1"></view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						域名或ip：
					</view>
					<view class="form-value">
						<input type="text" v-model="form.address" placeholder="请输入地址如:192.168.0.1">
					</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: 'http://',
						label: 'http://'
					},
					{
						value: 'https://',
						label: 'https://'
					}
				],
				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:'https://',
						address:'cloud.iot-fast.com',
					}
				}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){
				this.form = 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>
	page{
		background: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.color-blue{
		color: $mainColor;
	}
	.color-red{
		color: red;
	}
	.config-box{
		.config-list{
			.config-item{
				background: #fff;
				// border-radius: 10rpx;
				padding: 30rpx 20rpx;
				padding-left: 70rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				border-bottom: 1px solid #f5f5f5;
				overflow: hidden;
				.acitve-box{
					z-index: 888;
					position: absolute;
					top: -16rpx;
					left: -76rpx;
					width: 200rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					transform: rotate(-40deg) ;
					padding-top: 30rpx;
					color: #fff;
					background: $mainColor;
					font-size: 26rpx;
				}
				.icon-checkbox-mark{
					position: absolute;
					top:20rpx;
					left:10rpx;
				}
				.operate-box{
					display: flex;
					align-items: center;
					.iconfont{
						font-weight: bold;
						margin-left: 20rpx;
						font-size: 40rpx;
					}
				}
			}
		}
	}
	
	.slot-content{
		padding: 20rpx 30rpx;
		.form-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10rpx;
			
			.form-label{
				width: 170rpx;
			}
			.form-value{
				flex: 1;
				background: #f0f0f0;
				border-radius: 8rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				padding-right: 20rpx;
				input{
					width: 100%;
					padding-left: 20rpx;
				}
			}
			&:first-child{
				.form-value{
					// justify-content: flex-end;
					padding-left: 20rpx;
					position: relative;
					padding-right: 40rpx;
					.iconfont{
						position: absolute;
						right: 6rpx;
						top: 19rpx;
						font-size: 37rpx;
						color: #8a8c90;
						
					}
				}
			}
		}
	}
	
	.btn-box{
		position: fixed;
		width: 100%;
		height: 130rpx;
		padding: 10rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		button{
			width: 95%;
			background-color: $mainColor;
			color: #fff;
		}
		.bg-grey{
			background: #e7e7e7;
			color: #8a8c90;
		}
	}
</style>
