# 老虎机抽奖组件使用指南

## 组件简介

本组件是一个整合了1列、3列和5列老虎机功能的抽奖组件，可根据传入的参数动态切换不同列数的老虎机模式。

## 使用方法

### 1. 引入组件

```vue
import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";

export default {
  components: { 
    DetailLucky 
  }
}
```

### 2. 在模板中使用

```vue
<template>
  <DetailLucky ref="luckySlot" :mode="3"></DetailLucky>
</template>
```

### 3. 组件属性

| 属性名 | 类型 | 默认值 | 说明 |
|-------|------|-------|------|
| mode  | Number/String | 1 | 老虎机模式，可选值：1, 3, 5 |

### 4. 组件方法

#### 初始化老虎机

```js
// 初始化老虎机，传入奖品列表和模式
this.$refs.luckySlot.init(prizeList, mode);

// 例如：初始化3列老虎机
this.$refs.luckySlot.init(myPrizes, 3);

// 也可以仅传入奖品列表，使用组件默认的模式
this.$refs.luckySlot.init(myPrizes);
```

#### 开始抽奖

```js
// 开始抽奖，可选传入回调函数
this.$refs.luckySlot.startDraw(() => {
  console.log('老虎机开始旋转');
});
```

#### 停止抽奖并指定中奖结果

```js
// 停止抽奖，传入中奖索引数组
// 对于1列老虎机，传入1个索引
this.$refs.luckySlot.stopDraw([5]);

// 对于3列老虎机，传入3个索引
this.$refs.luckySlot.stopDraw([3, 2, 8]);

// 对于5列老虎机，传入5个索引
this.$refs.luckySlot.stopDraw([1, 2, 3, 4, 5]);

// 也可以不传入索引，组件会随机生成
this.$refs.luckySlot.stopDraw();
```

#### 其他方法

```js
// 强制结束抽奖
this.$refs.luckySlot.forceEndDraw();

// 隐藏老虎机
this.$refs.luckySlot.hide();

// 显示老虎机
this.$refs.luckySlot.show();

// 重置组件状态
this.$refs.luckySlot.reset();
```

### 5. 组件事件

| 事件名 | 说明 | 返回值 |
|-------|------|-------|
| start | 开始抽奖时触发 | - |
| end   | 结束抽奖时触发 | 中奖信息对象 |

### 使用示例

```vue
<template>
  <view>
    <button @click="startLottery">开始抽奖</button>
    <DetailLucky ref="luckySlot" :mode="slotMode"></DetailLucky>
  </view>
</template>

<script>
import DetailLucky from "@/components/detail-lucky/detail-lucky.vue";

export default {
  components: { DetailLucky },
  data() {
    return {
      slotMode: 3,
      prizeList: [] // 奖品列表
    }
  },
  mounted() {
    // 获取奖品列表
    this.getPrizeList();
  },
  methods: {
    // 获取奖品列表
    async getPrizeList() {
      // 这里可以从API获取奖品列表
      this.prizeList = [...]; // 示例奖品列表
    },
    
    // 开始抽奖
    startLottery() {
      // 初始化老虎机
      this.$refs.luckySlot.init(this.prizeList, this.slotMode);
      
      // 开始抽奖
      this.$refs.luckySlot.startDraw();
      
      // 模拟3秒后停止抽奖
      setTimeout(() => {
        // 这里可以调用API获取中奖结果
        const winIndex = Math.floor(Math.random() * this.prizeList.length);
        
        // 停止抽奖并指定中奖索引
        if (this.slotMode === 1) {
          this.$refs.luckySlot.stopDraw([winIndex]);
        } else if (this.slotMode === 3) {
          this.$refs.luckySlot.stopDraw([winIndex, winIndex, winIndex]);
        } else {
          this.$refs.luckySlot.stopDraw([winIndex, winIndex, winIndex, winIndex, winIndex]);
        }
      }, 3000);
    }
  }
}
</script>
```

## 注意事项

1. 使用前必须先调用`init`方法初始化组件
2. 中奖索引数组的长度应与当前模式的列数匹配，如果不匹配会自动补足或截取
3. 组件高度会根据模式自动调整
4. 如果不传入奖品列表，将使用默认的奖品列表