<template>
	<view>
		<image src="/static/equityBei.png" style="width: 750rpx; height: 768rpx; position: absolute; top: 0; left: 0; z-index: -1" mode="widthFix"></image>
		<wd-navbar title="权益包" :bordered="false" left-arrow custom-style="background-color: transparent !important;" safeAreaInsetTop @click-left="back"></wd-navbar>

		<view style="padding: 35rpx 80rpx; position: relative">
			<image src="/static/equity_pack.png" style="width: 593rpx; height: 345rpx" mode="widthFix" v-if="!userInfo.userRights"></image>
			<image src="/static/equity/s1.png" style="width: 593rpx; height: 345rpx" mode="widthFix" v-if="userInfo.userRights && userInfo.userRights.rightsLevel == 1"></image>
			<image src="/static/equity/s2.png" style="width: 593rpx; height: 345rpx" mode="widthFix" v-if="userInfo.userRights && userInfo.userRights.rightsLevel == 2"></image>
			<image src="/static/equity/s3.png" style="width: 593rpx; height: 345rpx" mode="widthFix" v-if="userInfo.userRights && userInfo.userRights.rightsLevel == 3"></image>

			<view
				v-if="userInfo.userRights"
				:style="{
					color:
						userInfo.userRights.rightsLevel == 1 ? '#754023' : userInfo.userRights.rightsLevel == 2 ? '#3874AF' : userInfo.userRights.rightsLevel == 3 ? '#AF3838' : ''
				}"
				style="position: absolute; top: 120rpx; left: 280rpx; font-size: 28rpx"
			>
				{{ userInfo.userRights.rightsDiscount / 10 }}折
			</view>
			<view
				v-if="userInfo.userRights"
				:style="{
					color:
						userInfo.userRights.rightsLevel == 1 ? '#754023' : userInfo.userRights.rightsLevel == 2 ? '#3874AF' : userInfo.userRights.rightsLevel == 3 ? '#AF3838' : ''
				}"
				style="position: absolute; top: 180rpx; left: 140rpx; font-size: 28rpx; font-weight: bold"
			>
				抵扣卷剩余：{{ userInfo.userRights.pice }}
			</view>

			<button class="equity_kf" open-type="contact">
				<image src="/static/icons/kf.png" style="width: 48rpx; height: 48rpx; margin-right: 10rpx"></image>
				联系客服
			</button>
		</view>

		<view style="padding: 0 30rpx">
			<view>
				<text style="font-weight: bold; font-size: 32rpx; color: #754023">权益包等级</text>
				<text style="font-size: 24rpx; color: #7e7e7e; margin-left: 10rpx">点击下方卡片选择开通等级</text>
			</view>

			<view
				v-for="(item, index) in list"
				:key="index"
				@click="current = index"
				style="position: relative; width: 690rpx; height: 224rpx; padding: 24rpx 30rpx; margin-top: 30rpx"
			>
				<image :src="item.qy" style="width: 128rpx; position: absolute; top: 0; right: 12rpx" mode="widthFix"></image>

				<image v-if="current == index" src="/static/icons/gou.png" style="width: 40rpx; height: 40rpx; position: absolute; top: 20rpx; right: 60rpx"></image>

				<image :src="item.bei" style="width: 690rpx; height: 224rpx; position: absolute; z-index: -1; top: 0; left: 0"></image>
				<view style="display: flex; align-items: center; margin-bottom: 12rpx">
					<image :src="item.icon" style="width: 104rpx; height: 44rpx"></image>
					<!-- <view>{{ item.name }}</view> -->
				</view>
				<view style="width: 100%; background-color: #fff; border-radius: 8rpx; padding: 24rpx 40rpx; position: relative">
					<view style="font-weight: bold; font-size: 24rpx; color: #232323; margin-bottom: 8rpx">{{ item.info }}</view>
					<view style="font-weight: 400; font-size: 28rpx; color: #232323">{{ item.text }}</view>
					<view
						style="
							width: 222rpx;
							height: 42rpx;
							position: absolute;
							right: 0;
							bottom: 0;
							z-index: 10;
							text-align: right;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							padding: 0 10rpx;
						"
					>
						<!-- <image :src="item.qy"></image> -->
						<view style="font-weight: bold; font-size: 24rpx; color: #ffffff">{{ item.name }}特权</view>
					</view>
					<image style="width: 222rpx; height: 42rpx; position: absolute; right: 0; bottom: 0; z-index: 9" :src="item.img"></image>
				</view>
			</view>

			<view
				style="
					width: 690rpx;
					height: 82rpx;
					background: linear-gradient(180deg, #ffc786 0%, #e99332 100%);
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 50rpx;
					color: #fff;
					font-size: 30rpx;
					font-weight: bold;
				"
				@click="toCon"
			>
				立即开通
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { Store } from '@/store';
const store = Store();

const userInfo = computed(
	() =>
		store.userInfo || {
			inviteCode: '',
			nickname: '',
			mobile: '',
			avatar: '',
			paywallet: {
				balance: 0
			}
		}
);

onShow(async () => {
	await store.usersGetInfo();
});

const list = [
	{
		name: '加盟',
		info: '购买、批发商品享5折折扣',
		text: '赠送货值抵扣券10000元',
		icon: '/static/equity/icon1.png',
		bei: '/static/equity/bei1.png',
		img: '/static/equity/img1.png',
		qy: '/static/equity/iconY1.png',
		discount: 0.5,
		debitVoucher: 10000
	},
	{
		name: '总代',
		info: '购买、批发商品享3.5折折扣',
		text: '赠送货值抵扣券40000元',
		icon: '/static/equity/icon2.png',
		bei: '/static/equity/bei2.png',
		img: '/static/equity/img2.png',
		qy: '/static/equity/iconY2.png',
		discount: 0.35,
		debitVoucher: 40000
	},
	{
		name: '官方',
		info: '购买、批发商品享2.5折折扣',
		text: '赠送货值抵扣券100000元',
		icon: '/static/equity/icon3.png',
		bei: '/static/equity/bei3.png',
		img: '/static/equity/img3.png',
		qy: '/static/equity/iconY3.png',
		discount: 0.25,
		debitVoucher: 100000
	}
];

const current = ref<number>(0);

const back = () => {
	uni.navigateBack();
};

const toCon = () => {
	uni.showModal({
		title: '提示',
		content: '请联系客服开通权益包',
		showCancel: false
	});
};
</script>

<style lang="scss" scoped>
.equity {
	display: flex;
	align-items: center;
	&_kf {
		position: absolute;
		top: 60rpx;
		right: 0;
		background: rgba(255, 255, 255, 0.68);
		border-radius: 30rpx 0rpx 0rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #232323;
		padding: 5rpx 30rpx 5rpx 30rpx;
	}
}

button {
	all: unset;
}

button::after {
	all: unset;
}
</style>
