<template>
  <view class="detail-toolbar" :style="customStyle">
    <!-- 购买说明按钮 -->
    <view class="toolbar-item" @click="onRuleClick(getRuleId)">
      <image class="toolbar-img" 
        :src="$img1('common/gzsm.png')">
      </image>
    </view>
    
    <!-- 商品预览按钮 -->
    <view class="toolbar-item" @tap="onTabChange(1)">
      <image class="toolbar-img" :src="$img1(currentTab==1 ? 'common/spyl1.png' : 'common/spyl2.png')"></image>
    </view>
    
    <!-- 中赏记录按钮 -->
    <view class="toolbar-item" @tap="onTabChange(2)">
      <image class="toolbar-img" :src="$img1(currentTab==1 ? 'common/zsjl2.png' : 'common/zsjl1.png')"></image>
    </view>
    
    <!-- 换箱按钮 -->
    <view class="toolbar-item" @click="onChangeBox" v-if="!isWuxian">
      <image class="toolbar-img" :src="$img1('common/huanxiang.png')"></image>
    </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>
.detail-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0rpx 30rpx 0;
  width: 100%;
  box-sizing: border-box;
  
  .toolbar-item {
    width: 160rpx;
    height: 92rpx;
    margin: 0 8rpx;
    transition: transform 0.2s ease;
    
    &:active {
      transform: scale(0.95);
    }
    
    .toolbar-img {
      width: 100%;
      height: 100%;
    }
  }
}
</style> 