<!-- 文件职责：订单大厅工具栏（门店选择 + 渠道筛选 + 声音开关 + 连接状态）。 -->
<script setup lang="ts">
import type { BoardChannelFilter } from '../types';

import { CHANNEL_OPTIONS } from '../composables/order-board-page/constants';

const {
  channel = 'all',
  isConnected = false,
  isSoundEnabled = true,
  storeId = '',
} = defineProps<{
  channel: BoardChannelFilter;
  isConnected: boolean;
  isSoundEnabled: boolean;
  storeId: string;
}>();

const emit = defineEmits<{
  'update:channel': [value: BoardChannelFilter];
  'update:isSoundEnabled': [value: boolean];
  'update:storeId': [value: string];
}>();
</script>

<template>
  <div class="ob-toolbar">
    <!-- 1. 门店 ID 输入 -->
    <div class="ob-toolbar__store">
      <span class="ob-toolbar__label">门店ID:</span>
      <a-input
        :value="storeId"
        placeholder="输入门店 ID"
        style="width: 200px"
        @change="(e: any) => emit('update:storeId', e.target.value)"
      />
    </div>

    <!-- 2. 渠道筛选 -->
    <div class="ob-toolbar__channel">
      <a-radio-group
        :value="channel"
        button-style="solid"
        size="small"
        @change="(e: any) => emit('update:channel', e.target.value)"
      >
        <a-radio-button
          v-for="opt in CHANNEL_OPTIONS"
          :key="opt.value"
          :value="opt.value"
        >
          {{ opt.label }}
        </a-radio-button>
      </a-radio-group>
    </div>

    <!-- 3. 声音开关 + 连接状态 -->
    <div class="ob-toolbar__right">
      <a-switch
        :checked="isSoundEnabled"
        checked-children="声音开"
        un-checked-children="声音关"
        @change="(val: boolean) => emit('update:isSoundEnabled', val)"
      />
      <span
        class="ob-toolbar__status"
        :class="[
          isConnected ? 'ob-toolbar__status--on' : 'ob-toolbar__status--off',
        ]"
      >
        {{ isConnected ? '已连接' : '未连接' }}
      </span>
    </div>
  </div>
</template>
