<template>
	<view class="container">
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="content" style="border-bottom: 1rpx solid #f1f1f1;">
					
					<view class="box-pack-between flex-y-center">
						<view class="cell flex flex-y-center">
												<view class="title">缴纳费用：</view>
												<view class="desc" style="color:#FEAF44">
													￥{{item.money}}
												</view>
						</view>
						<view class="flex-y-center ft26">
							<text style="margin-right: 15rpx;">状态</text>
							<switch :checked="item.status==1?true:false" @change.stop="onTypeChange" :data-index="index"
							color="#247EFF" class="type-btn" />
						</view>
					</view>
					<view class=""  @click="orderDetail(item.id)">
						
					
					<view class="box-pack-between">
						<view class="cell flex flex-y-center">
							<view class="title">等级：</view>
							<view class="desc">{{item.shared_level}}级</view>
						</view>
						<view class="cell flex flex-y-center">
							<view class="title">等级名称：</view>
							<view class="desc">{{item.name}}</view>
						</view>
					</view>

					<view class="box-pack-between">
						<view class="cell flex flex-y-center">
							<view class="title">赠送积分：</view>
							<view class="desc">{{item.integral}}</view>
						</view>
						<view class="cell flex flex-y-center">
							<view class="title">赠送余额：</view>
							<view class="desc">{{item.balance}}</view>
						</view>
					</view>	

					<view class="cell flex flex-y-center" v-if="item.type!=3">
						<view class="title">礼盒数量：</view>
						<view class="desc">
							{{item.gift}}
						</view>
					</view>
					
					
					<view class="cell flex flex-y-center" v-if="item.type!=3">
						<view class="title">直接佣金比例(%)：</view>
						<view class="desc">
							{{item.direct_commission}}
						</view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title">间接佣金比例(%) ：</view>
						<view class="desc">{{item.indirect_commission}}</view>
					</view>
				</view>

				<view class="goods_list flex" v-for="(items,index) of item.goods_list" :key='index'>
					<view class="goods_list-title flex-grow-1 box-pack-between">
						<view class="">
							{{items.name}} ×{{items.num}}
						</view>
						<view class="goods_list-price">
							￥{{items.total_price}}
						</view>
					</view>
				</view>
				</view>
			</view>
			<view class="no-more">
				---没有更多了---
			</view>
		</view>


		<view class="footer-bar">
			<view class="content flex flex-center">
				<navigator url="./addPartner" class="btn">+添加合伙人等级</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				URL: getApp().globalData.URL,
				store_id: "",
				list: [],
				page: 1,
				is_bottom: false,			
			}
		},
		onLoad(options) {
			this.store_id = uni.getStorageSync("store_id");
			this.getData(1);
		},
		onReachBottom() {
			if (!this.is_bottom) {
				this.getData(this.page + 1)
			}
		},
		methods: {
			onTypeChange(e) {
				console.log(e)
				let a = e.detail.value ? 1 : 0;
				this.checked(a, e.currentTarget.dataset.index);
			},
			
			checked(a, index) {
				this.request({
					url: 'smdcshop/shared_level_status',
					data: {
						is_show: a,
						id: this.list[index].id,
					},
				}).then(res => {
					if (res.code == "200") {
						uni.showToast({
							title: "修改成功",
							icon: "none",
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
					})
					this.$nextTick(() => {
						this.list[index].state = 2
					})
				});
			},
			
			//详情
			orderDetail(id){
				uni.navigateTo({
					url:'./orderDetail?id='+id
				})
			},
			
			
			getData(page) {
				if (page == 1) {
					this.list = []
					this.page = 1
					this.is_bottom = false
				}
				this.request({
					url: 'smdcshop/shared_level_index',
					data: {
						admin_id: uni.getStorageSync("admin_id"),
						page,
						limit: 10,
					}
				}).then(res => {
					if (res.code == 200 && res.data.length) {
						this.list = this.list.concat(res.data)
						this.page = page
					} else {
						this.is_bottom = true
					}
				})
			}
		},


	}
</script>
<style lang="scss">
	 .type-btn {
		zoom: 0.7;
		margin-right: 25rpx;
	}
	.search-content {
		padding: 20rpx 0;
		background: #FFFFFF;
		font-size: 28rpx;

		.search {
			width: 80%;
			border: 1rpx solid #F1F1F1;
			margin-right: 15rpx;
			padding: 10rpx;
			border-radius: 4rpx;

			icon {
				margin-right: 15rpx;
			}
		}
	}

	.model {
		width: 100%;
		z-index: 10;
		background: #FFFFFF;
		padding-bottom: 20rpx;

		.model-date {
			width: 100%;
			padding: 20rpx 80rpx;
			border-bottom: 1rpx solid #F1F1F1;

			.model-item {
				width: 352rpx;
				text-align: center;
				font-size: 28rpx;
				color: #999;
				position: relative;
				padding: 10rpx 0;
				text-align: center;
				border-radius: 8rpx;
				border: 1rpx solid #999;
			}

			// .act {
			// 	color: #FFFFFF;
			// 	background: #FFBE2C;
			// 	border: 1rpx solid #FFBE2C;
			// }
		}

		.model-btn {
			border-radius: 8rpx;
			box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
			margin: 0 auto;
			margin-top: 20rpx;
			text-align: center;
			width: 41%;
			height: 80rpx;
			border-radius: none;
		}

		.model-btn-close {
			border: 1rpx solid #F1F1F1;
			color: #000;
		}

		.model-btn-success {
			color: #FFFFFF;
			background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);

		}
	}

	page {
		background-color: #F4F5F7;
	}

	.showpay .active {
		color: red
	}

	.header-hg100 {
		height: 100rpx;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		background: #fff;
	}

	.list {
		// padding: 110rpx 25rpx 0;
		padding: 25rpx 25rpx 0;
	}

	.list .item {
		background-color: #fff;
		border-radius: 8rpx;
		overflow: hidden;
		padding: 0 25rpx;
		margin-bottom: 30rpx;
		box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(213, 213, 213, 0.04);
	}

	.list .item .top {

		padding: 20rpx 0;

		border-bottom: 1rpx solid #f5f5f5;
	}

	.list .item .top .pay-info {
		flex: none;
	}

	.list .item .top .pay-type-icon {
		display: block;
		width: 28rpx;
		height: 28rpx;
		flex: none;
		margin-right: 8rpx;
		border-radius: 100px;
	}

	.list .item .top .pay-status {
		font-size: 28rpx;
		color: #464646;
	}

	.list .item .content {
		padding: 20rpx 0;
	}

	.list .content .cell {
		margin-bottom: 16rpx;
		font-size: 26rpx;
		color: #99A0AD;
	}

	.list .content .cell:last-child {
		margin-bottom: 0;
	}

	.list .content .cell .title {
		color: #99A0AD;
	}

	.list .content .cell .desc {
		color: #666;
	}

	.header-text {
		text-align: center;
	}

	.box-li {
		background-color: #fff;
		text-align: center;
		border-bottom: 1rpx solid #f1f1f1;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
	}

	.goods_list {
		font-size: 28rpx;
	}

	.goods_list-title {
		padding: 20rpx 0;
	}


	.goods_list-price {
		font-size: 26rpx;
		color: red;
	}

	.goods_list-num {
		font-size: 26rpx;
	}

	.d3 {
		width: 0;
		height: 0;
		border-width: 12rpx;
		border-style: solid;
		border-color: #000 transparent transparent transparent;
		margin-top: 14rpx;
	}

	.avatar-img {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		border-radius: 100px;
	}

	.avatar-title {
		font-size: 26rpx;
	}

	.footer-bar {
		height: 160rpx;
		/*兼容 IOS<11.2*/
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}

	.footer-bar .content {
		width: 100%;
		height: 160rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
		/*兼容 IOS<11.2*/
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		box-shadow: 0 -5rpx 10rpx #eee;
	}

	.footer-bar .content .btn {
		width: 700rpx;
		height: 100rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}

	.footer-bar .content .detail-btn {
		width: 50%;
		height: 40rpx;
	}

	.footer-bar .content .detail-btn .btn-icon {
		flex: none;
		display: block;
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}
</style>
