<!--
 * @Author: chris
 * @Date: 2025-08-18 09:24:37
 * @LastEditors: chris
 * @LastEditTime: 2025-08-18 14:41:04
-->
<script setup name="DeviceList">
const props = defineProps({
  devices: {
    type: Array,
    default: () => []
  }
})

const emits = defineEmits(['selected'])

const checkList = ref([]);

watch(() => checkList, (val) => {
  emits('selected', val);
})
</script>

<template>
  <div class="device-list">
    <el-card>
      <template #header>设备列表</template>
      <el-checkbox-group size="large" v-model="checkList">
        <el-checkbox v-for="item in props.devices" :label="item.name" :value="item.id" />
      </el-checkbox-group>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-checkbox-group) {
  @apply flex flex-col
}
</style>
