<template>
	<view class="toolbar-wrapper">
		<view class="detail-toolbar" :style="customStyle">
			<!-- 购买说明按钮 -->
			<view class="toolbar-item center" @click="onRuleClick(getRuleId)">
				<!--  <image class="toolbar-img" 
        :src="$img1('common/gzsm.png')">
      </image> -->
				规则说明
			</view>

			<!-- 商品预览按钮 -->
			<view class="toolbar-item center" :class="currentTab == 1 ? 'act' : 'unact'" @tap="onTabChange(1)">
				商品预览
			</view>

			<!-- 中赏记录按钮 -->
			<view class="toolbar-item center" :class="currentTab == 2 ? 'act' : 'unact'" @tap="onTabChange(2)">
				中奖记录
			</view>

			<!-- 换箱按钮 -->
			<view class="toolbar-item center" @click="onChangeBox" v-if="!isWuxian">
				换箱
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'DetailToolbar',
		props: {
			goodsType: {
				type: [Number, String],
				default: 0
			},
			currentTab: {
				type: [Number, String],
				default: 1
			},
			customStyle: {
				type: String,
				default: ''
			},
			isWuxian: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			getRuleId() {
				// 根据商品类型返回对应的规则ID
				const typeRuleMap = {
					5: 13,
					6: 18
				};
				return typeRuleMap[this.goodsType] || 7;
			}
		},
		methods: {
			onRuleClick(ruleId) {
				this.$emit('rule-click', ruleId, '购买说明');
			},
			onTabChange(tabId) {
				this.$emit('tab-change', tabId);
			},
			onChangeBox() {
				this.$emit('change-box');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.toolbar-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50rpx 0 0;
		width: 100%;
	}

	.detail-toolbar {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 20rpx;
		border-radius: 54rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;

		.toolbar-item {
			width: 156rpx;
			height: 64rpx;
			margin: 0 8rpx;
			transition: transform 0.2s ease, background-color 0.2s ease;
			font-size: 24rpx;
			border-radius: 32rpx;

			&.center {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			// 选中状态
			&.act {
				background-color: #FFED94;
			}

			// 未选中状态
			&.unact {
				background-color: transparent;
			}

			&:active {
				transform: scale(0.95);
			}

			.toolbar-img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>