<template>
	<view class="container">
		<view class="list">
			<view class="item" v-for="(item, index) in tabList" :key="item.id"
				:class="{ 'active': index === activeIndex }" @click="onTabChange(index)">
				<view class="left">
					<view class="triangle-concave-transparent ">
					</view>
				</view>
				<view class="box" v-show="index != activeIndex">
					{{ item.label }} 
					<image class="closeImage" v-if="isHuise&&index==1" src="/static/image/template/close.png" mode=""></image>
				</view>
				<view class="box" v-show="index == activeIndex">
					<image class="titleImage" :src="item.icon" mode=""></image>
					<image class="vipImage" v-if="!isHuise||index!=1" src="/static/image/recharge/vip.png" mode=""></image>
					<image class="vipImage" v-else src="/static/image/template/close.png" mode=""></image>
				</view>
				<view class="right">
					<view class="triangle-concave-transparent leftBox">
					</view>
				</view>
			</view>
		</view> 
		<!-- :class="{'centerVip':activeIndex>0&&activeIndex<3,'leftVip':activeIndex==0,'rightVip':activeIndex==3}" -->
		<view class="vip-benefits-container">
			<template v-if="activeIndex == 0">
				<view class="benefit-item" v-for="(benefit, index) in wxList" :key="index">
					<image class="img" :src="benefit.url" mode=""></image>
					<view class="name">
						{{ benefit.name }}
					</view>
				</view>
			</template>
			<template v-else-if="activeIndex == 1">
				<view class="benefit-item" v-for="(benefit, index) in alList" :key="index">
					<image class="img" :src="benefit.url" mode=""></image>
					<view class="name">
						{{ benefit.name }}
					</view>
				</view>
			</template>
			<template v-else-if="activeIndex == 2">
				<view class="benefit-item" v-for="(benefit, index) in anyList" :key="index">
					<image class="img" :src="benefit.url" mode=""></image>
					<view class="name">
						{{ benefit.name }}
					</view>
				</view>
			</template>
			<template v-else>
				<image class="qydb" src="/static/image/recharge/qydb.png" mode="widthFix"></image>
			</template>
		</view>
	</view>
</template>

<script>

export default {
	name: 'custom-tab',
	props: {
		isHuise: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			tabActiveInd: 0,
			// 当前激活的tab索引
			activeIndex: 0,
			chunjie:{
				"wxList": [
					{
						"name": "AI聊天模板",
						"url": "/static/image/recharge/chunjie/mo.png"
					},
					{
						"name": "聊天转账",
						"url": "/static/image/recharge/chunjie/li.png"
					},
					{
						"name": "限额设置",
						"url": "/static/image/recharge/chunjie/wei.png"
					},
					{
						"name": "零钱修改",
						"url": "/static/image/recharge/chunjie/xing.png"
					},
					{
						"name": "零钱通",
						"url": "/static/image/recharge/chunjie/jin.png"
					},
					{
						"name": "分付",
						"url": "/static/image/recharge/chunjie/ma.png"
					},
					{
						"name": "账单",
						"url": "/static/image/recharge/chunjie/song.png"
					},
					{
						"name": "朋友圈",
						"url": "/static/image/recharge/chunjie/fu.png"
					}
				],
				"alList": [
					{
						"name": "余额模拟",
						"url": "/static/image/recharge/chunjie/mo.png"
					},
					{
						"name": "账单生成",
						"url": "/static/image/recharge/chunjie/li.png"
					},
					{
						"name": "理财",
						"url": "/static/image/recharge/chunjie/xiao.png"
					},
					{
						"name": "花呗",
						"url": "/static/image/recharge/chunjie/bao.png"
					},
					{
						"name": "账单详情",
						"url": "/static/image/recharge/chunjie/ma.png"
					},
					{
						"name": "逾期",
						"url": "/static/image/recharge/chunjie/yue.png"
					},
					{
						"name": "黑卡",
						"url": "/static/image/recharge/chunjie/xin.png"
					},
					{
						"name": "热门图标",
						"url": "/static/image/recharge/chunjie/nian.png"
					}
				],
				"anyList": [
					{
						"name": "无广告",
						"url": "/static/image/recharge/chunjie/2.png"
					},
					{
						"name": "无水印",
						"url": "/static/image/recharge/chunjie/0.png"
					},
					{
						"name": "专属客服",
						"url": "/static/image/recharge/chunjie/2.png"
					},
					{
						"name": "多设备",
						"url": "/static/image/recharge/chunjie/6.png"
					},
					{
						"name": "朋友圈素材",
						"url": "/static/image/recharge/chunjie/gong.png"
					},
					{
						"name": "豪车视频",
						"url": "/static/image/recharge/chunjie/he.png"
					},
					{
						"name": "小决定",
						"url": "/static/image/recharge/chunjie/xin.png"
					},
					{
						"name": "随机数",
						"url": "/static/image/recharge/chunjie/zhu.png"
					}
				]
			 
			},
			anyList:[
				{
					name: "无广告",
					url: "/static/image/recharge/icon1.png"
				},
				{
					name: "无水印",
					url: "/static/image/recharge/icon2.png"
				},
				{
					name: "专属客服",
					url: "/static/image/recharge/icon3.png"
				},
				{
					name: "多设备",
					url: "/static/image/recharge/icon4.png"
				},
				{
					name: "朋友圈素材",
					url: "/static/image/recharge/icon12.png"
				},
				{
					name: "豪车视频",
					url: "/static/image/recharge/icon20.png"
				},
				{
					name: "小决定",
					url: "/static/image/recharge/icon19.png"
				},
				{
					name: "随机数",
					url: "/static/image/recharge/icon18.png"
				}
			],
			alList:[],
			qrj:{
				"wxList": [
					{
						"name": "AI聊天模板",
						"url": "/static/image/recharge/214/icon5.png"
					},
					{
						"name": "聊天转账",
						"url": "/static/image/recharge/214/icon6.png"
					},
					{
						"name": "限额设置",
						"url": "/static/image/recharge/214/icon7.png"
					},
					{
						"name": "零钱修改",
						"url": "/static/image/recharge/214/icon8.png"
					},
					{
						"name": "零钱通",
						"url": "/static/image/recharge/214/icon9.png"
					},
					{
						"name": "分付",
						"url": "/static/image/recharge/214/icon10.png"
					},
					{
						"name": "账单",
						"url": "/static/image/recharge/214/icon11.png"
					},
					{
						"name": "朋友圈",
						"url": "/static/image/recharge/214/icon12.png"
					}
				],
				"anyList": [
					{
						"name": "无广告",
						"url": "/static/image/recharge/214/icon1.png"
					},
					{
						"name": "无水印",
						"url": "/static/image/recharge/214/icon2.png"
					},
					{
						"name": "专属客服",
						"url": "/static/image/recharge/214/icon3.png"
					},
					{
						"name": "多设备",
						"url": "/static/image/recharge/214/icon4.png"
					},
					{
						"name": "朋友圈素材",
						"url": "/static/image/recharge/214/icon12.png"
					},
					{
						"name": "豪车视频",
						"url": "/static/image/recharge/214/icon20.png"
					},
					{
						"name": "小决定",
						"url": "/static/image/recharge/214/icon19.png"
					},
					{
						"name": "随机数",
						"url": "/static/image/recharge/214/icon18.png"
					}
				],
				"alList": [
					{
						"name": "余额模拟",
						"url": "/static/image/recharge/214/icon8.png"
					},
					{
						"name": "账单生成",
						"url": "/static/image/recharge/214/icon11.png"
					},
					{
						"name": "理财",
						"url": "/static/image/recharge/214/icon17.png"
					},
					{
						"name": "花呗",
						"url": "/static/image/recharge/214/icon16.png"
					},
					{
						"name": "账单详情",
						"url": "/static/image/recharge/214/icon21.png"
					},
					{
						"name": "逾期",
						"url": "/static/image/recharge/214/icon13.png"
					},
					{
						"name": "黑卡",
						"url": "/static/image/recharge/214/icon14.png"
					},
					{
						"name": "热门图标",
						"url": "/static/image/recharge/214/icon15.png"
					}
				]
				
			},
			alListZC:[
				{
					name: "余额模拟",
					url: "/static/image/recharge/icon8.png"
				},
				{
					name: "账单生成",
					url: "/static/image/recharge/icon11.png"
				},
				{
					name: "理财",
					url: "/static/image/recharge/icon17.png"
				},
				{
					name: "花呗",
					url: "/static/image/recharge/icon16.png"
				},
				{
					name: "账单详情",
					url: "/static/image/recharge/icon21.png"
				},
				{
					name: "逾期",
					url: "/static/image/recharge/icon13.png"
				},
				{
					name: "黑卡",
					url: "/static/image/recharge/icon14.png"
				},
				{
					name: "热门图标",
					url: "/static/image/recharge/icon15.png"
				}
			],
			alListHS:[
				{
					name: "余额模拟",
					url: "/static/image/recharge/huise/icon8.png"
				},
				{
					name: "账单生成",
					url: "/static/image/recharge/huise/icon11.png"
				},
				{
					name: "理财",
					url: "/static/image/recharge/huise/icon17.png"
				},
				{
					name: "花呗",
					url: "/static/image/recharge/huise/icon16.png"
				},
				{
					name: "账单详情",
					url: "/static/image/recharge/huise/icon21.png"
				},
				{
					name: "逾期",
					url: "/static/image/recharge/huise/icon13.png"
				},
				{
					name: "黑卡",
					url: "/static/image/recharge/huise/icon14.png"
				},
				{
					name: "热门图标",
					url: "/static/image/recharge/huise/icon15.png"
				}
			],
			wxList: [
				{
					name: "AI聊天模板",
					url: "/static/image/recharge/icon5.png"
				},
				{
					name: "聊天转账",
					url: "/static/image/recharge/icon6.png"
				},
				{
					name: "限额设置",
					url: "/static/image/recharge/icon7.png"
				},
				{
					name: "零钱修改",
					url: "/static/image/recharge/icon8.png"
				},
				{
					name: "零钱通",
					url: "/static/image/recharge/icon9.png"
				},
				{
					name: "分付",
					url: "/static/image/recharge/icon10.png"
				},
				{
					name: "账单",
					url: "/static/image/recharge/icon11.png"
				},
				{
					name: "朋友圈",
					url: "/static/image/recharge/icon12.png"
				}
			],
			// tab数据列表
			tabList: [
				{ label: '微信特权', icon: '/static/image/recharge/weixin.png' },
				{ label: '小宝特权', icon: '/static/image/recharge/aili.png' },
				{ label: '通用特权', icon: '/static/image/recharge/tytq.png' },
				{ label: '权益对比', icon: '/static/image/recharge/qy.png' }
			]
		};
	},
	watch: {
		isHuise(newValue, oldValue) {
			console.log(newValue)
			console.log(this.alList[0].url.indexOf('recharge/huise/icon')!=-1)
				this.alList.forEach(element => {
					if(element.url.indexOf('recharge/huise/icon')!=-1){
						if(!newValue) {
							// element.url = element.url.replace('recharge/huise/icon','recharge/icon');
							const config = uni.getStorageSync('config').config
							const themeConfig = config?.['client.uniapp.theme']
							if(themeConfig?.enable){
								if(themeConfig?.theme=='0214'){
									this.alList= this.qrj.alList
								}else if(themeConfig?.theme=='0217'){
									this.alList= this.chunjie.alList
								}
							}else{
								this.alList=this.alListZC
							}
						}
					}else{
						if(newValue) {
							// element.url = element.url.replace('recharge/icon', 'recharge/huise/icon');
							this.alList=this.alListHS
						}
						
					}
					
				});
		}
	},
	mounted() {
		this.alList=this.alListZC
		const config = uni.getStorageSync('config').config
		console.log("config",config)
		const themeConfig = config?.['client.uniapp.theme']
		console.log("themeConfig",themeConfig)
		if(themeConfig?.enable){
			if(themeConfig?.theme=='0214'){
				this.wxList= this.qrj.wxList
				this.alList= this.qrj.alList
				this.anyList= this.qrj.anyList
			}else if(themeConfig?.theme=='0217'){
				this.wxList= this.chunjie.wxList
				this.alList= this.chunjie.alList
				this.anyList= this.chunjie.anyList
			}
		}
		if(this.isHuise) {
			this.alList=this.alListHS
			// this.alList.forEach(element => {
			// 	element.url = element.url.replace('recharge/icon', 'recharge/huise/icon');
			// });
		}
	},
	methods: {
		// tab切换事件
		onTabChange(index) {
			this.activeIndex = index;
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	margin:0 20px 20px 20px;
	overflow: hidden;
}

.list {
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url('/static/image/recharge/tabBg.png');
	background-size: 100% 68px;
	background-position: 0 5px;
	background-repeat: no-repeat;
	.item {
		width: 100%;
		height: 42px;
		// background-color: #;
		border-radius: 14px 14px 0 0;
		position: relative;
		line-height: 47px;
		text-align: center;
		font-size: 12px;
		color: #fff;
		// transition: all 0.3s ease-in-out;
		cursor: pointer;
		.box{
			display: flex;
			align-items: center;
			justify-content: center;
			.titleImage{
				width: 45px;
				height: 11px;
				margin-top: 16px;
			}
			.vipImage{
				margin-top: 15px;
				width: 12px;
				height: 12px;
			}
			.closeImage{
				width: 12px;
				height: 12px;
			}
			
		}



		.left {
			display: none;
			position: absolute;
			bottom: 0;
			left: -25px;
			// transition: all 0.3s ease-in-out;
			transform-origin: right center;
			// transform: scaleX(0);
		}

		.right {
			display: none;
			position: absolute;
			bottom: 0;
			right: -25px;
			// transition: all 0.3s ease-in-out;
			transform-origin: left center;
			// transform: scaleX(0);
		}
	}

	.active {
		background-color: #fff;
		color: #000;
		// transition: all 0.3s ease-in-out;

		.left {
			display: block;
			// transform: scaleX(1);
		}

		.right {
			display: block;
			// transform: scaleX(1);
		}
	}

	.triangle-concave-transparent {
		transform: rotate(180deg);
		width: 25px;
		height: 25px;
		position: relative;
		background-color: #fff;

		/* 创建直角三角形遮罩 */
		mask:
			/* 步骤1：先创建一个直角三角形区域 */
			linear-gradient(315deg,
				transparent 0%,
				transparent calc(50% - 1px),
				black 50%,
				black 100%),
			/* 步骤2：从右下角创建一个径向渐变来切割出凹陷 */
			radial-gradient(circle at 100% 100%,
				transparent calc(50.5% + 7px),
				/* 控制凹陷深度，值越大凹陷越深 */
				black calc(50.5% + 7px));

		mask-composite: intersect;
		-webkit-mask-composite: source-in;
		mask-size: 100% 100%;
		mask-position: 0 0;
		mask-repeat: no-repeat;
	}

	.leftBox {
		transform: rotate(270deg);
	}
}
.leftVip{
	border-radius:0 14px 14px 14px !important;
}
.rightVip{
	border-radius:14px 0 14px 14px !important;
}
.centerVip{
	border-radius: 14px !important;
}
.vip-benefits-container {
	border-radius:0 0 14px 14px;
	background-color: #FFFFFF;
	padding: 16px 0px 0 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	background-color: #FFFFFF;
	animation: fadeInUp2 0.6s ease-out;

	.benefit-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 16px;
		transition: all 0.3s ease-in-out;
		animation: fadeInUp 0.3s ease-out;

		// 为每个item添加延迟动画
		@for $i from 1 through 12 {
			&:nth-child(#{$i}) {
				animation-delay: #{$i * 0.1}s;
				animation-fill-mode: both;
			}
		}

		// 悬停效果
		&:hover {
			// transform: translateY(-4px);
			// box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}

		.img {
			width: 76rpx;
			height: 76rpx;
			transition: all 0.3s ease-in-out;
		}

		.name {
			font-size: 10px;
			margin-top: 16rpx;
			transition: all 0.3s ease-in-out;
		}
	}
	.qydb{
		margin: 10px;
		width: calc(100% - 20px);
		// transition: all 0.3s ease-in-out;
		animation: fadeInUp 0.3s ease-out;
	}

}

// 淡入上移动画
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
// 淡入上移动画
@keyframes fadeInUp2 {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}
</style>