<template>
	<view>
		<view class="step">
			<uni-steps active-color="#3387FF" :options="[{title: '扫码授权',url:'./qrCode'}, {title: '小程序配置',url:'./deploy'}, 
			{title: '提交版本',url:'./addVersion'},
		    {title: '提交审核',url:'./addExamine'},{title: '版本管理',url:'./Versioning'} ]" :active="1"></uni-steps>
		</view>
		<view  style="height: 130rpx;"></view>
		
		<view class="home">
			<view class="box-pack-between item flex-y-center border-b">
				<text>小程序APPID</text>
				<view  @click="copy(appid)">{{appid||''}} <text class="ft26" style="color:#3387FF;margin-left: 20rpx;">复制</text></view>
			</view>

			<view class="box-pack-between item flex-y-center">
				<text>体验版成员</text>
				<button class="deploy-add flex-center" hover="true" hover-class="detail-hover" @click="open">新增</button>
			</view>

			<view class="deploy-list" v-if="deplist.length>0">
				<view class="item-bg" >
					<view class="box-pack-between mar64 flex-y-center" v-for="(item,index) of deplist" :key='index'>
						<view class="flex-y-center flex-grow-1 pdr-20">
							<view class="deploy-list-nick text-1">
								{{item.nick_name}}
							</view>
							<view class="deploy-list-logon text-1">
								{{item.logon_id}}
							</view>

							{{item.status}}
						</view>
						<view class="iconfont iconshanjian item-del" @click="del(index)"></view>
					</view>
				</view>
			</view>
			
		</view>

		<view class="home">

			<view class="box-pack-between item flex-y-center pd20">
				<text>二维码规则配置</text>
				<view class="flex">
				<!-- 	<button class="deploy-add flex-center" hover="true" hover-class="detail-hover"
						@click="ConfigRule">配置规则</button> -->
					<button class="deploy-add flex-center" hover="true" hover-class="detail-hover"
						@click="AppendRule">配置规则</button>
				</view>
			</view>

			<view class="flex-y-center box-pack-between ft28 border-b pd2-3" v-for="(item,index) of linkArr"
				:key='index'>
				<view class="word">
					<view class="qr_link">
						地址：{{item.https}}
					</view>
					<view class="qr_link">
						路径：{{item.pages}}
					</view>
				</view>
				<view class="iconfont iconshanjian item-del" @click="DelRule(index)"></view>
			</view>
		</view>

		<!-- 纵向排列 -->
		<uni-popup ref="popup" type="center">
			<view class="model">
				<form @submit="addDeploy">
					<view class="model-refund-title ft28">
						请输入支付宝账号（体验者账号）
					</view>
					<view style="padding: 20rpx;">
						<view class="amount-input">
							<input type="text" name="logon_id" placeholder="请输入支付宝账号" />
						</view>
					</view>
					<view class="flex-y-center model-refund-btn">
						<view class="flex-grow-1 flex-center cancel" @click="cancel">
							取消
						</view>
						<button hover-class="none" form-type="submit" class="flex-grow-1 flex-center submit ft28">
							添加
						</button>
					</view>
				</form>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appid: "",
				deplist: [],
				linkArr: [],
			}
		},
		onLoad() {
			this.getAppid();
			this.alipay_MiniUserlist();
			this.ewmguizhe();
		},
		methods: {
			
			open() {
				this.$refs.popup.open();
			},
			cancel() {
				this.$refs.popup.close();
			},
	
			copy(appid) {
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
					data:appid,
					success: function() {
						console.log('success');
					}
				});
				// #endif

				// #ifdef H5
				let content = appid;
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("input")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				textarea.remove();
				uni.showToast({
					title: "复制成功",
					icon: 'none'
				})
				return result
				// #endif
			},
			// 删除支付宝体验者
			del(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除用户吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.request({
								url: 'setting/delMiniUser',
								data: {
									admin_id: uni.getStorageSync("admin_id"),
									user_id: this.deplist[index].user_id,
								}
							}).then(res => {

								uni.showToast({
									title: res.message,
									icon: 'none'
								})
								this.deplist.splice(index, 1);
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 新增规则
			ConfigRule(e) {
				this.request({
					url: 'setting/oldaddqrcode',
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					}
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(()=>{
							this.ewmguizhe();
						},2000)
					}
				})
			},
			// 追加规则
			AppendRule(e) {
				this.request({
					url: 'setting/addqrcode',
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					}
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(()=>{
							this.ewmguizhe();
						},2000)
					}
				})
			},
			// 删除规则
			DelRule(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除规则吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.request({
								url: 'setting/delewmgz',
								data: {
									admin_id: uni.getStorageSync("admin_id"),
									id: this.linkArr[index].id,
								}
							}).then(res => {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
								
								this.linkArr.splice(index, 1);
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 规则列表
			ewmguizhe(e) {
				this.request({
					url: 'setting/ewmguizhe',
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					}
				}).then(res => {
					if (res.code == 200) {
						this.linkArr = res.data;
					}
				})
			},
			
			// 添加支付宝体验者
			addDeploy(e) {
				let {
					logon_id
				} = e.detail.value;
				this.request({
					url: 'setting/addMiniUser',
					data: {
						admin_id: uni.getStorageSync("admin_id"),
						logon_id: logon_id,
					}
				}).then(res => {
					if (res.code == 200) {
						this.alipay_MiniUserlist();
						this.$refs.popup.close();
					}
				})
			},
			// 获取appid
			getAppid() {
				this.request({
					url: 'setting/alipay_Appid',
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					}
				}).then(res => {
					if (res.code == 200) {
						this.appid = res.data.appid;
					}
				})
			},
			// 获取体验者
			alipay_MiniUserlist() {
				this.request({
					url: 'setting/alipay_MiniUserlist',
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					}
				}).then(res => {
					if (res.code == 200) {
						this.deplist = res.data;
					}
				})
			},
		}
	}
</script>

<style>
	@import url("../css/style.css");

	page .detail-hover {
		opacity: 0.6;
		transform: scale(0.8, 0.8);
		/*缩放*/
		/* background-color: #999999; */
		/* color: #999999; */
	}

	.pd20 {
		padding: 20rpx;
	}

	.pd2-3 {
		padding: 20rpx 30rpx;
	}

	.step {
		padding: 20rpx 0;
		position: fixed;
		width: 100%;
		background: #FFFFFF;
		z-index: 999;
	}

/* 	.home {
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.item {
		height: 100rpx;
		padding: 0 20rpx;
	} */

	.deploy-add {
		padding: 0 22rpx;
		height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
		font-size: 28rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		margin-left: 20rpx;
	}

	.deploy-list {
		padding: 24rpx;

	}

	.item-bg {
		background: #f6f8fe;
		border-radius: 12rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
		padding: 36rpx 32rpx;
	}

	.item-del {
		color: red;
	}

	.item-bg-32 {
		margin-right: 32rpx;
	}

	.item-bg .mar64:last-child {
		margin-bottom: 0rpx;
	}

	.deploy-list-nick {
		width: 150rpx;
		margin-right: 20rpx;
	}

	.deploy-list-logon {
		width: 180rpx;
		margin-right: 30rpx;
	}

	.mar64 {
		margin-bottom: 64rpx;
	}

	.amount-input {
		padding: 20rpx;
		border: 1rpx solid #F1F1F1;
	}

	.model {
		background: #FFFFFF;
		border-radius: 10rpx;
		width: 600rpx;
		overflow: hidden;
	}

	.model-refund-title {
		text-align: center;
		padding: 20rpx 0;
	}

	.model-refund-btn {
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;

	}

	.model-refund-btn .cancel {
		height: 90rpx;
	}

	.model-refund-btn .submit {

		height: 90rpx;
		border-left: 1rpx solid #f1f1f1;
		border-radius: 0;
	}

	button {
		background-color: #fff;
		padding: 0;
		margin: 0;
		line-height: 1rpx;
		/* border: 1px solid #cccccc; */
		min-height: 0;
		font-size: 28rpx;
		background: #fff;
		border-radius: none;
	}

	button::after {
		border: none;
	}

	.qr_link {
		margin-bottom: 10rpx;
	}
</style>
