<template>
	<view>
		<up-navbar bg-color="transparent" title="会员中心" @leftClick="back"></up-navbar>
		<view class="top">
			<view class="vip-box" style="	background-image: url(/user/static/Rectangle_25.png);">
				<view class="icon">
					<image src="/user/static/image_21.png" class="huangguan" mode=""></image>
				</view>
				<view class="tag">当前等级</view>
				<view class="u-p-l-22">
					<view class="shop-name">{{shopInfo.shopName}}</view>
					<view class="lv">{{memberLevel?memberLevel.name:''}}</view>
					<view class="time">
						<text>{{memberLevel?memberLevel.endTime:''}}到期 </text>
						<text>{{memberLevel?memberLevel.memberName:''}}</text>
					</view>
					<view class="rule u-m-t-40 u-flex u-flex-between u-flex-y-center">
						<text class="color-one ">
							<text class="font-16">{{memberLevel? memberLevel.experience:''}}</text>
							<text class="font-12">经验值</text>
						</text>
						<text class="desc" @click="modelShow('等级说明')">等级说明</text>
					</view>
					<view class="progress">
						<view class="block" :style="{width:expProgress+'%'}"></view>
					</view>
					<view class="u-m-t-12 next-tips" v-if="expProgress*1<100&&nextName">
						还差{{memberLevel?memberLevel.nextExperienceValue:''}}成长值可以升级到{{nextName}}</view>
				</view>

			</view>
		</view>
		<view class="vip-quanyi">
			<view class="u-flex u-flex-between">
				<text class="color-2 font-14 font-700">会员权益</text>
				<view class="u-flex">
					<text class="color-666 u-m-r-4 font-12">会员说明</text>
					<up-icon name="question-circle" size="12" @click="modelShow('会员说明')"></up-icon>
				</view>
			</view>
			<view class="u-m-t-32">
				<view class="menus" :class="state.openType=='CONDITION'?'menus-tiaojian' :'menus-pays'">
					<view class="item " v-for="(item,index) in menus" :key="index">
						<view class="u-flex u-flex-x-center u-m-t-4 u-flex-center">
							<image :src="item.icon" mode="" style="width: 100rpx;height: 100rpx;"></image>
						</view>
						<view class="font-14 color-333 text-center u-m-t-4 u-flex u-flex-center">
							<text class="no-wrap u-m-r-4">{{item.name}}</text>
							<up-icon @click="modelShow(item.name)" size="12" name="question-circle" color="#333"
								v-if="showQuestion(index)"></up-icon>
						</view>
						<view class="font-12 color-666 text-center">{{item.desc}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="u-p-l-30 u-p-r-30">
			<view class="color-333 font-700 font-14">升级规则</view>
			<view class="color-666 font-14 u-m-t-16">
				每消费1元获得{{state.costReward||''}}成长值
			</view>
			<view class="color-666 font-14 u-m-t-16">
				每充值1元获得{{state.rechargeReward||''}}成长值
			</view>
		</view>

	<button class="buy-btn" @click="toXufei">立即续费</button>

		<up-popup :show="model.show" mode="center" round="16rpx" close-on-click-overlay @close="model.show=false">
			<view class="model-box">
				<view class="u-flex u-flex-between">
					<text class="color-000 font-700 font-16">{{model.title}}</text>
					<up-icon name="close-circle" color="#666" size="28rpx" @click="modelHide"></up-icon>
				</view>
				<view class="u-m-t-18 up-content">
					<up-parse :content="modelContent"></up-parse>
				</view>
			</view>
		</up-popup>

	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import * as vipApi from '@/common/api/market/vip.js'
	import {
		APIusershopInfodetail,
		APIshopUserInfo
	} from '@/common/api/member.js'
	import {
		ref,
		reactive,
		computed
	} from "vue"
	const model = reactive({
		show: false,
		title: ''
	})

	function modelHide() {
		model.show = false;
	}
	
	function toXufei(){
		uni.navigateTo({
			url:'/user/vip/buy-vip?shopId='+option.shopId
		})
	}

	function modelShow(name) {
		if (name == '消费送积分') {
			model.title = '消费送积分'
			modelContent.value = `每消耗1元赠送${memberLevel.value.costRewardPoints}积分`
		}
		if (name == '周期福利') {
			model.title = '周期福利'
			modelContent.value =
				`每${memberLevel.value.cycleUnit}赠送${memberLevel.value.cycleRewardPoints}积分,${memberLevel.value.cycleRewardCouponList.length}张优惠券`
		}
		if (name == '会员说明') {
			model.title = '会员说明'
			modelContent.value = state.remark
		}
		if (name == '等级说明') {
			model.title = '等级说明'
			modelContent.value = memberLevel.value.remark||''
		}
		model.show = true;
	}
	const modelContent = ref(``)
	const state = reactive({
		openType: 'CONDITION'
	})

	let pay_menus = [{
			name: '赠送成长值',
			desc: '',
			icon: '/user/static/Frame_220.png',
		},
		{
			name: '优惠券',
			desc: '每月赠送2张优惠券',
			icon: '/user/static/Frame_221.png'
		},
		{
			name: '享会员价',
			desc: '全店会员价',
			icon: '/user/static/Frame_222.png'
		},
		{
			name: '会员折扣',
			desc: '',
			icon: '/user/static/Frame_223.png'
		},
		{
			name: '消费送积分',
			desc: '',
			icon: '/user/static/Frame_224.png'
		},
		{
			name: '周期福利',
			desc: '',
			icon: '/user/static/Frame_225.png'
		}
	]

	let tiaojian_menus = [{
			name: '享会员价',
			desc: '全店会员价',
			icon: '/user/static/Frame_222.png'
		},
		{
			name: '会员折扣',
			desc: '',
			icon: '/user/static/Frame_223.png'
		},
		{
			name: '消费送积分',
			desc: '',
			icon: '/user/static/Frame_224.png'
		},
		{
			name: '周期福利',
			desc: '',
			icon: '/user/static/Frame_225.png'
		}

	]

	const menus = ref([])

	function showQuestion(index) {
		const len = menus.value.length
		if (index >= len - 2) {
			return true
		}
		return false
	}

	function back() {
		uni.navigateBack()
	}


	const option = reactive({
		shopId: ''
	})

	const memberLevel = ref(null)
	const shopInfo = reactive({})
	const shopUserInfo = ref({})
	const memberLevelList=ref([])
	onLoad((opt) => {
		Object.assign(option, opt)
		console.log(option);
		let shopId = option.shopId
		init(shopId)
	})
	const expProgress = ref(0)
	async function init(shopId) {
		const userRes = await APIshopUserInfo({
			shopId
		})
		if (userRes) {
			shopUserInfo.value = userRes
		}
		const shopRes = await APIusershopInfodetail({
			shopId
		})
		if (shopRes) {
			Object.assign(shopInfo, shopRes.shopInfo)
		}
		const res = await vipApi.config({
			shopId: shopId
		})
		if (res) {
			Object.assign(state, res.memberConfig)
			memberLevelList.value=res.memberLevelList
			pay_menus = pay_menus.map(v => {
				if (v.name == '优惠券') {
					if(res.memberLevel.cycleRewardCouponList.length){
						v.desc = `每${res.memberLevel.cycleUnit}赠送${res.memberLevel.cycleRewardCouponList.length}张优惠券`
					}else{
						v.desc=''
					}
				}
				if (v.name == '会员折扣') {
					v.desc = '全店折扣'+(res.memberLevel.discount/10)+'折'
				}
				return v
			})
			tiaojian_menus=tiaojian_menus.map(v=>{
				if (v.name == '优惠券') {
					if(res.memberLevel.cycleRewardCouponList.length){
						v.desc = `每${res.memberLevel.cycleUnit}赠送${res.memberLevel.cycleRewardCouponList.length}张优惠券`
					}else{
						v.desc=''
					}
				}
				if (v.name == '会员折扣') {
					v.desc = '全店折扣'+(res.memberLevel.discount/10)+'折'
				}
				return v
			})
			if (res.memberConfig.openType == 'PAY') {
				menus.value = pay_menus
			} else {
				menus.value = tiaojian_menus
			}
		}
		const res1 = await vipApi.detail({
			shopId: shopId
		})
		if (res1) {
			memberLevel.value = {
				...res1.memberLevel,
				endTime: res1.endTime,
				memberName:res1.memberName,
				experience: res1.experience,
				nextExperienceValue: res1.nextExperienceValue
			}
			const total = res1.experience * 1 + res1.nextExperienceValue * 1
			const percent = (res1.experience * 1 / total) * 100
			if (total <= 0 || res1.experience * 1 <= 0) {
				expProgress.value = 100
			}
			expProgress.value = percent

		}
	}
	
	const nextName=computed(()=>{
		if(memberLevelList.value.length<=0||!memberLevel.value){
			return null
		}
		
		const index=memberLevelList.value.findIndex(v=>v.id==memberLevel.value.id)
		if(index==-1||index>=memberLevelList.value.length-1){
			return null
		}
		const next=memberLevelList.value[index+1]
		return next.name
	})
</script>


<style>
	page {
		background: #F9F9F9;
	}
</style>

<style lang="scss" scoped>
	.font-700 {
		font-weight: 700;
	}

	.color-one {
		color: #558ABF;
	}

	.color-2 {
		color: #273d7a;
	}

	.top {
		background: linear-gradient(283deg, #A9CBF8 11.62%, #E5E7EB 74.58%);
	}

	.top {
		padding: 208rpx 30rpx 78rpx 30rpx;
	}

	.vip-box {

		background-size: cover;
		position: relative;
		border-radius: 12px;
		overflow: hidden;
		padding-left: 6px;
		padding-right: 64rpx;
		padding-bottom: 24rpx;

		.icon {
			position: absolute;
			right: 42rpx;
			top: 0;

			.huangguan {
				width: 214rpx;
				height: 206rpx;
			}
		}

		.tag {
			position: absolute;
			top: 0;
			font-size: 12px;
			color: #46739F;
			padding: 2px 12px;
			background: #c7d0da;
			border-radius: 0 0 12px 0;
		}

		.shop-name {
			margin-top: 23px;
			color: #6988AB;
			font-size: 16px;
		}

		.lv {
			color: #273d7a;
			font-weight: 700;
			font-size: 64rpx;
			letter-spacing: 4rpx;
			transform: skewX(-10deg);
		}

		.time {
			color: #6988ab;
			font-size: 24rpx;
			font-weight: 400;
		}

		.rule {
			.exp {}

			.desc {
				color: #273d7a;
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		.next-tips {
			color: #6988ab;
			font-size: 24rpx;
			font-weight: 400;
		}
	}



	.progress {
		margin-top: 8rpx;
		background-color: #BDD5E9;
		height: 10rpx;
		border-radius: 10rpx;

		.block {
			height: 100%;
			border-radius: 10rpx;
			background: linear-gradient(90deg, #F9FBFA 0.03%, #334783 115.59%);
		}
	}

	.vip-quanyi {
		background-color: #fff;
		padding: 36rpx 18rpx 42rpx 38rpx;
		border-radius: 40rpx 40rpx 0 0;
		transform: translateY(-40rpx);
	}

	.menus-pays {
		display: grid;
		/* 每行显示3列，每列宽度相等 */
		grid-template-columns: repeat(3, 1fr);
		/* 列间距 */
		column-gap: 10px;
		/* 行间距 */
		row-gap: 10px;
		/* 可以添加容器的内边距 */
	}

	.menus-tiaojian {
		display: grid;
		/* 每行显示3列，每列宽度相等 */
		grid-template-columns: repeat(4, 1fr);
		/* 列间距 */
		column-gap: 10px;
		/* 行间距 */
		row-gap: 32rpx;
		/* 可以添加容器的内边距 */
	}

	.model-box {
		padding: 32rpx 56rpx;
		width: 702rpx;
	}

	.up-content {
		color: #999;
		font-size: 12px;
	}
	.buy-btn {
		
		margin: 98rpx 48rpx 48rpx 48rpx;
		padding: 32rpx 32rpx;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		border-radius: 80rpx;
		line-height: 1;
		background: linear-gradient(98deg, #fe6d1100 40.64%, #FFD1B4 105.2%), linear-gradient(259deg, #FE6D11 50.14%, #FFD1B4 114.93%);
		box-shadow: 0 14rpx 30.4rpx 0 #fe8b435e;
	}
</style>