# 组件使用说明

## smoke-record-dialog - 抽烟记录弹框组件

这是一个可复用的底部弹框组件，用于记录抽烟或抵抗记录。

### 特性

- ✨ 从底部弹出，半屏展示
- 🎨 明亮主题设计
- 📱 支持日期时间选择
- 🔢 支持数量调整和烟瘾等级选择
- 📝 支持备注输入
- 🔄 全局可复用（已配置 easycom 自动导入）

### 使用方法

#### 方式一：easycom 自动导入（推荐）

无需手动导入，直接在模板中使用即可：

```vue
<template>
  <view>
    <!-- 触发按钮 -->
    <button @tap="openDialog">记录抽烟</button>
    
    <!-- 弹框组件 - 自动导入，无需 import -->
    <smoke-record-dialog 
      v-model:show="showDialog" 
      :type="dialogType"
      @submit="handleSubmit"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import * as api from '@/api'

const showDialog = ref(false)
const dialogType = ref('smoke') // 'smoke' 或 'resisted'

function openDialog() {
  dialogType.value = 'smoke' // 或 'resisted'
  showDialog.value = true
}

async function handleSubmit(data) {
  try {
    await api.createLog(data)
    uni.showToast({ title: '记录成功', icon: 'success' })
    // 更新数据...
  } catch (e) {
    console.error('提交失败:', e)
  }
}
</script>
```

#### 方式二：手动导入（可选）

```vue
<script setup>
import smokeRecordDialog from '@/components/smoke-record-dialog/smoke-record-dialog.vue'
// 其他代码...
</script>
```

### Props

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| show | Boolean | false | 控制弹框显示/隐藏 |
| type | String | 'smoke' | 记录类型：'smoke'(抽烟) 或 'resisted'(忍住) |

### Events

| 事件名 | 参数 | 说明 |
|--------|------|------|
| update:show | Boolean | 弹框显示状态变化时触发 |
| submit | Object | 提交表单时触发，返回表单数据 |

### 提交数据格式

```javascript
{
  smoke_time: "2025-12-31",        // 日期
  smoke_at: "2025-12-31 08:30:00", // 完整时间
  remark: "压力大",                 // 备注
  level: 2,                         // 烟瘾等级（1-5）
  num: 3                            // 数量（忍住时为0）
}
```

### 示例场景

#### 场景1：记录抽烟

```vue
<button @tap="recordSmoke">记录抽烟</button>

<smoke-record-dialog 
  v-model:show="showDialog" 
  type="smoke"
  @submit="handleSmokeSubmit"
/>
```

#### 场景2：记录忍住

```vue
<button @tap="recordResisted">想抽忍住了</button>

<smoke-record-dialog 
  v-model:show="showDialog" 
  type="resisted"
  @submit="handleResistedSubmit"
/>
```

### 样式定制

组件内部样式已设置为 `scoped`，如需自定义样式，可以通过以下方式：

1. 修改组件内部样式文件
2. 使用深度选择器覆盖样式（不推荐）

### 注意事项

1. 组件使用 v-model:show 双向绑定显示状态
2. type 为 'resisted' 时，num 自动设置为 0
3. 表单数据会在打开弹框时自动初始化为当前时间
4. 提交后弹框会自动关闭