<template>
	<view>
		<up-navbar bg-color="transparent" title="会员中心" @leftClick="back"></up-navbar>
		<view class="top">
			<view class="vip-box">
				<image class="bg" src="/user/static/Rectangle_25.png" mode=""></image>
				<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" style="position: relative">
					<view class="shop-name">{{ shopInfo.shopName }}</view>
					<view class="lv">{{ memberLevel ? memberLevel.name : '' }}</view>
					<view class="time" v-if="shopUserInfo.openType == 'PAY'">
						<text>{{ memberLevel ? dayjs(memberLevel.endTime).format('YYYY-MM-DD') : '' }}到期</text>
						<text style="margin-left: 8px;">{{ memberLevel ? memberLevel.memberCircleName : '' }}</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" v-if="shopUserInfo.openType == 'PAY'">立即续费</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 dayjs from 'dayjs';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import * as vipApi from '@/common/api/account/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}积分`;
			if (memberLevel.value.cycleRewardCouponList && memberLevel.value.cycleRewardCouponList.length) {
				modelContent.value += `,${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: '',
			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
		});
		
		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,
				memberCircleName:res1.memberCircleName,
				memberCircleReward:res1.memberCircleReward,
			};
			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;
		}
		if (res) {
			res.memberLevel.cycleRewardCouponList = res.memberLevel.cycleRewardCouponList || []
			res.memberLevel = res.memberLevel || {}
			Object.assign(state, res.memberConfig);
			memberLevelList.value = res.memberLevelList;
			pay_menus = pay_menus.filter(v => {
				if (!res.memberLevel.isCostRewardPoints && v.name == '消费送积分') {
					return false
				}
				if (!res.memberLevel.isCycleReward && v.name == '周期福利') {
					return false
				}
				if (!res.memberLevel.cycleRewardCouponList || res.memberLevel.cycleRewardCouponList.length <=
					0 && v.name == '优惠券') {
					return false
				}
				return true
			}).map((v) => {
				if (v.name == '赠送成长值' && res.memberLevel) {
					v.desc = `赠送${memberLevel.value.memberCircleReward}成长值`
				}
				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.filter(v => {
				if (!res.memberLevel.isCostRewardPoints && v.name == '消费送积分') {
					return false
				}
				if (!res.memberLevel.isCycleReward && v.name == '周期福利') {
					return false
				}
				if (!res.memberLevel.cycleRewardCouponList || res.memberLevel.cycleRewardCouponList.length <=
					0 && v.name == '优惠券') {
					return false
				}
				return true
			}).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 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;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

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