<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">
							<text>业务开通状态</text>
						</view>
						<view class="desc">
							<text style="color: red;">
								<block v-if="openType == 1">已开通</block>
								<block v-else>未开通</block>
							</text>
						</view>
					</view>

					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>分佣方式</text>
						</view>
						<view class="desc flex-center ">
							<view class="checklist-box " @click="chooseFy(index)" v-for="(item,index) of fyway_arr"
								:key='index' :class="fyIndex==index?'actt':''">
								<view class="radio__inner" :class="fyIndex==index?'act_border':''">
									<view :class="fyIndex==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-show="fyIndex == 0">
						<view class="title-block required">
							<text>订单分佣比例</text>
						</view>
						<view class="desc">
							<input type="digit" name="proportion" :value="info.proportion" class="input-box"
								placeholder="请输入订单分佣比例" placeholder-class="desc-placeholder">
						</view>
					</view>

					<view class="red" v-show="fyIndex == 0">
						*订单分佣比例%
					</view>


					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>消费门槛</text>
						</view>
						<view class="desc">
							<input type="digit" name="consumption" :value="info.consumption" class="input-box"
								placeholder="请输入消费门槛" placeholder-class="desc-placeholder">
						</view>
					</view>

					<view class="red">
						*合伙人自己每消费满x元，获赠1份邀请礼盒
					</view>

					<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 deductFy_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" v-show="cost == 0">
						<view class="title-block required">
							<text>流水分佣手续费</text>
						</view>
						<view class="desc">
							<input type="digit" name="is_rate_bili" :value="info.is_rate_bili" class="input-box"
								placeholder="请输入流水分佣手续费" placeholder-class="desc-placeholder">
						</view>
					</view>
					<view class="red" v-show="cost == 0">
						*流水分佣手续费比例%
					</view>



					<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">
						<view class="title-block required">
							<text>冻结时间(小时)</text>
						</view>
						<view class="desc">
							<input type="digit" name="freezing" :value="info.freezing" class="input-box"
								placeholder="请输入冻结时间" placeholder-class="desc-placeholder">
						</view>
					</view>
					<view class="red">
						*超过冻结时间，解除冻结金额，解冻金额后方可进行提现，冻结时间之前发生退款会扣除对应用户、合伙人佣金
					</view>


					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>提现门槛</text>
						</view>
						<view class="desc">
							<input type="digit" name="withdrawal" :value="info.withdrawal" class="input-box"
								placeholder="请输入提现门槛" placeholder-class="desc-placeholder">
						</view>
					</view>

					<view class="red">
						*合伙人最低可提现的金额，界面显示单位：元
					</view>

					<view class="cell flex flex-y-center">
						<view class="title-block">
							<text>打款方式</text>
						</view>
						<view class=" flex-center ">
							<view class="checklist-box " @click="remits(index)" v-for="(item,index) of playManner_arr"
								:key='index' :class="playMannerIndex==index?'actt':''">
								<view class="radio__inner" :class="playMannerIndex==index?'act_border':''">
									<view :class="playMannerIndex==index?'is-default-checked':''"
										class="radio__inner-icon radio__inner-icon ">
									</view>
								</view>
								<text class="checklist-text">{{item}}</text>
							</view>
						</view>
					</view>
					
					<view class="red">
					  *线下打款：分佣方式设置可超过20%，不能超过100%，客户发起提现后，商家线下打款给客户；
					</view>


					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>分享名称</text>
						</view>
						<view class="desc">
							<input type="digit" name="shared_title" :value="info.shared_title" class="input-box"
								placeholder="请填写分享名称" placeholder-class="desc-placeholder">
						</view>
					</view>
					
					
				 <view class="cell flex flex-y-center box-pack-between" @click="ChooseImage">
						<view class="title-block required">
							<text>分享图片</text>
						</view>
						<view class="">
							<image mode="aspectFit" class="icon_un_icon" :src="URL+thumb" v-if="thumb"></image>
							<image mode="aspectFit" class="icon_un_icon" src="../static/images/icon_18.png" v-else></image>
						</view>
					</view>

					<view class=" page-block" style="background-color: #FFF;padding: 20rpx 25rpx; margin-top: 10px;">
						<view class="flex box-pack-between">
							<view class="title-block required"
								style="font-size: 30rpx;color: #333;font-weight: 600;padding-right: 20rpx;">
								<text>合伙人内容</text>
							</view>
							<view class="flex-center" @click="getEnit">
								<text style="color: #007AFF;">{{isrichText?'取消编辑':'编辑'}}</text>
								<text class="iconfont icongengduo"></text>
							</view>
						</view>

						<view class="desc">
							<view style="padding: 40rpx 0;">
								<block v-if="isrichText">
									<textarea type="text" maxlength="-1" :value="info.content" name="content"
										class="input-box flex-grow-1" placeholder="请输入"
										placeholder-class="desc-placeholder"></textarea>
								</block>
								<block v-else>
									<rich-text :nodes="info.content"></rich-text>
									<textarea type="text" :value="info.content" name="content" style="display: none;"
										class="input-box" placeholder=""
										placeholder-class="desc-placeholder"></textarea>

								</block>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view style="height:230rpx;"></view>
			<button class="sub-btn" hover-class="none" form-type="submit">
				立即提交
			</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openType: '', //开通情况 /1=已开通，否则未开通
				fyway_arr: [
					'订单分期',
					'商品分期',
					'关闭'
				],
				fyIndex: 0, //分佣方式索引
				deductFy_arr: ['是', '否'],
				deductFyIndex: 0,
				playManner_arr: ['线下打款','分账打款'],
				playMannerIndex: 0,
				ali_arr: ['开启', '关闭'],
				is_coupon: 0, //充值返佣开关
				flowers_arr: ['关闭', '开启'],
				cost: 1,
				info: {}, //详细参数
				isrichText: false, //编辑富文本和显示富文本
				URL: getApp().globalData.URL,
				thumb:''
			}
		},

		onLoad() {
			this.getdata();
		},

		methods: {
			
			ChooseImage(e) {
				let type = e.currentTarget.dataset.type;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(res)
						res.tempFilePaths.forEach((v, i) => {
							this.Upload({
								url: "Smdcshop/upload",
								data: {
									url: v,
									type: "",
									token: "",
									admin_id: uni.getStorageSync("admin_id")
								}
							}).then(res => {
								console.log(res, "res")
								this.imgid = res.id;
								this.thumb = res.src;
							}).catch(err => {
								uni.showToast({
									title: err.message,
									icon: 'none'
								})
							});
						})
					},
				});
			},
			
			//选择分佣方式
			chooseFy(e) {
				this.fyIndex = e;
			},
			//扣除手续费进行分佣
			choiceFlowers(index) {
				this.cost = index;
			},

			//打款
			remits(e) {
				this.playMannerIndex = e;
			},

			//返佣充值开关
			choicemenber(index) {
				this.is_coupon = index;
			},

			//切换编辑
			getEnit() {
				this.isrichText = !this.isrichText
			},

			getdata(e) {
				this.request({
					url: "smdcshop/shared_setting_info",
					data: {
						admin_id: uni.getStorageSync("admin_id")
					},
				}).then(res => {
					console.log(res.data, "res")
					if (res.code === '200') {
						this.thumb = res.data.web_config.shared_img;
						this.info = res.data.web_config; //详细
						this.openType = res.data.is_shared; //开通情况
						this.is_coupon = Number(res.data.web_config.is_commission) - 1; //充值返佣开关 1开启，2关闭
						this.fyIndex = Number(res.data.web_config.is_sub_commission) - 1; //分佣方式 
						this.playMannerIndex = res.data.web_config.pay_type == 3 ? 2 : res.data.web_config.pay_type;
						this.playMannerIndex = this.playMannerIndex - 1; //打款方式
						this.cost = Number(res.data.web_config.is_rate) - 1; //扣除手续费进行分佣
						
					}
				});
			},

			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 = Number(this.cost) + 1;
				data.is_sub_commission = Number(this.fyIndex) + 1;
				data.is_rate = Number(this.cost) + 1; //扣除手续费后分佣
				data.is_commission = Number(this.is_coupon) + 1;
				data.pay_type = Number(this.playMannerIndex) + 1;
				data.pay_type = data.pay_type == 2? 3:data.pay_type;
				
				data.shared_img = this.thumb;
				
				uni.showModal({
					title: '提示',
					content: '是否要修改？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: r => {
						if (r.confirm) {
							this.request({
								url: "smdcshop/shared_setting",
								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("../../saomaDiancan/static/css/common.css");

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

	page .page-block .cell {
		background-color: #FFF;
		padding: 0 25rpx;
	}
	.icon_un_icon{
		width: 150rpx;
		height: 150rpx;

	}
	.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;
		z-index: 999;
	}

	.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;
	}

	.texteares {
		width: 100%;
		padding: 30rpx;
	}
</style>
