<template>
	<view class="container">
		<form @submit="onSubmit">
			<view class="page-block">
				<view class="page-title-block">
				</view>
				<view class="content">
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>商家id</text>
						</view>
						<view class="desc">
							<input type="text" disabled :value="info.admin_id" class="input-box"
								placeholder-class="desc-placeholder">
						</view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>平台名称</text>
						</view>
						<view class="desc">
							<input type="text" :value="info.name" name="name" class="input-box" placeholder="请输入"
								placeholder-class="desc-placeholder">
						</view>
					</view>
					
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>平台风格颜色</text>
						</view>
						<view class="desc flex-y-center box-pack-between">
							<input type="text" @input="bindColor" :value="info.color" name="color" class="input-box" placeholder="请输入"
								placeholder-class="desc-placeholder">
								<view class="rund" :style="{background:setColor}"></view>
						</view>
					</view>
					
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>联系电话</text>
						</view>
						<view class="desc">
							<input type="text" :value="info.tel" name="tel" class="input-box" placeholder="请输入"
								placeholder-class="desc-placeholder">
						</view>
					</view>

				</view>
			</view>

			<view class="page-block">
				<view class="page-title-block">
					<view class="title">达达配送信息</view>
				</view>
				
				<view class="content">
					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>达达key</text>
						</view>
						<view class="desc">
							<input type="text" name="app_key" :value="info.app_key" class="input-box" placeholder="请输入"
								placeholder-class="desc-placeholder">
						</view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>达达secret</text>
						</view>
						<view class="desc">
							<input type="text" name="app_secret" :value="info.app_secret" class="input-box"
								placeholder="请输入" placeholder-class="desc-placeholder">
						</view>
					</view>
					<view class="red" @click="copyText(1)">
						*点击复制去http://newopen.imdada.cn申请
					</view>
					
					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>高德地图key</text>
						</view>
						<view class="desc">
							<input type="text" name="map_key" :value="info.map_key" class="input-box" placeholder="请输入"
								placeholder-class="desc-placeholder">
						</view>
					</view>
					<view class="red" @click="copyText(2)">
						*点击复制去https://lbs.amap.com/申请
					</view>
					
					
				</view>
			</view>
			
			
			
			
			<view class="page-block" >
				
				<view class="page-title-block">
					<view class="title">支付宝消费券</view>
				</view>
				
				<view class="content">
					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>支付宝消费券</text>
						</view>
						<view class="desc flex-center ">
							<view class="checklist-box " @click="choicemenber(index)"
								v-for="(item,index) of ali_arr" :key='index' :class="is_coupon==index?'actt':''">
								<view class="radio__inner" :class="is_coupon==index?'act_border':''">
									<view :class="is_coupon==index?'is-default-checked':''"
										class="radio__inner-icon radio__inner-icon ">
									</view>
								</view>
								<text class="checklist-text">{{item}}</text>
							</view>
						</view>
					</view>
					
					<view class="cell flex flex-y-center" v-if="is_coupon==1">
						<view class="title-block">
							<text>支付宝领取权益ID</text>
						</view>
						<view class="desc">
							<input type="text" name="app_secret" :value="info.consumer_coupon" class="input-box"
								placeholder="请输入" placeholder-class="desc-placeholder">
						</view>
					</view>
					
					<view class="red" @click="copyText(3)">
						*点击复制去https://opendocs.alipay.com/mini/operation/benefit-plugin报名开通
					</view>
				</view>
			</view>
			
			
			<view class="page-block" >
				
				<view class="page-title-block">
					<view class="title">花呗分期</view>
				</view>
				
				<view class="content">
					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>商家承担花呗分期手续费</text>
						</view>
						<view class="desc flex-center ">
							<view class="checklist-box " @click="choiceFlowers(index)"
								v-for="(item,index) of flowers_arr" :key='index' :class="cost==index?'actt':''">
								<view class="radio__inner" :class="cost==index?'act_border':''">
									<view :class="cost==index?'is-default-checked':''"
										class="radio__inner-icon radio__inner-icon ">
									</view>
								</view>
								<text class="checklist-text">{{item}}</text>
							</view>
						</view>
					</view>
					
					<view class="cell flex flex-y-center" >
						<view class="title-block">
							<text>花呗分期金额门槛</text>
						</view>
						<view class="desc">
							<input type="digit" name="money" :value="info.money" class="input-box"
								placeholder="请输入" placeholder-class="desc-placeholder">
						</view>
					</view>
					
	
				</view>
			</view>
			
			<button class="sub-btn" hover-class="none" form-type="submit">
				立即提交
			</button>
			
			<!-- <view class="sub-btn">立即提交</view> -->
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				
				ali_arr: [
					'关闭', '开启'
				],
				is_coupon:0,
				setColor:"",
				flowers_arr:['关闭', '开启'],
				cost:0,
			}
		},

		onLoad() {
			this.getdata();
		},
		
		methods: {		
			
			bindColor(e){
			    this.setColor=e.detail.value;
			},
			
			choicemenber(index) {
				this.is_coupon = index;
			},
			choiceFlowers(index) {
				this.cost = index;
			},
			getdata(e) {
				this.request({
					url: "Smdcshop/setting_index",
					data: {
						admin_id: uni.getStorageSync("admin_id")
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.info = res.data;
						this.is_coupon=res.data.is_coupon;
						this.setColor=res.data.color;
						this.cost=res.data.cost;
					}
				});
			},

			copyText(e) {
				let a = e == 1 ? 'http://newopen.imdada.cn' : e==3?'https://opendocs.alipay.com/mini/operation/benefit-plugin':'https://lbs.amap.com';
				uni.setClipboardData({
					data: a,
					success: function() {
						console.log('success');
					}
				});
			},

			onSubmit(e) {
				let data = e.detail.value;
				data.admin_id = uni.getStorageSync("admin_id");
				data.id = this.info.id;
				data.is_coupon=this.is_coupon;
				data.cost=this.cost;
				uni.showModal({
					title: '提示',
					content: '是否要修改？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: r => {
						if (r.confirm) {
							this.request({
								url: "Smdcshop/setting_update",
								data: data,
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: res.message,
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 2000)
								}
							}).catch((res) => {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							})
						}
					}

				});
			}

		}
	}
</script>

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

	page .page-block .content {
		background-color: #F4F5F7;
		padding: 0;
	}

	page .page-block .cell {
		background-color: #FFF;
		padding: 0 25rpx;
	}
	.rund{
		width: 40rpx;
		height: 40rpx;
	}
	.red {
		color: red;
		padding: 10rpx 25rpx;
		font-size: 26rpx;
	}

	page {
		background-color: #F4F5F7;
	}


	.sub-btn {
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		/* position: fixed; */
	/* 	left: 50%;
		bottom: 70rpx; */
		/* transform: translateX(-50%); */
		margin: 0 auto;
		margin-top: 30px;
	}	
	.checklist-box {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		margin: 5px 0;
		margin-right: 22px;
	}

	.radio__inner {
		-webkit-flex-shrink: 0;
		flex-shrink: 0;

		display: -webkit-box;
		display: -webkit-flex;
		display: flex;

		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: relative;
		border: 1px solid #DCDFE6;
		border-radius: 2px;
		box-sizing: border-box;
		width: 16px;
		height: 16px;
		border-radius: 16px;
		background-color: #fff;
		z-index: 1;
		-webkit-transition: border-color .3s;
		transition: border-color .3s;
	}

	.radio__inner-icon {
		width: 8px;
		height: 8px;
		border-radius: 10px;
		opacity: 0;
		-webkit-transition: -webkit-transform .3s;
		transition: -webkit-transform .3s;
		transition: transform .3s;
		transition: transform .3s, -webkit-transform .3s;
	}

	.is-default-checked {
		opacity: 1;
		background-color: #007aff;
		-webkit-transform: rotate(45deg) scaleY(1);
		transform: rotate(45deg) scaleY(1);
	}
	.act_border{
			border:1rpx solid #007aff;
	}
	.checklist-text {
		font-size: 28rpx;
		margin-left: 5px;
		-webkit-transition: color 0.2s;
		transition: color 0.2s;
		color: #000;
	}
</style>
