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

const emits = defineEmits(['selected', 'update:modelValue'])

const list = ref([]);

const checkList = computed({
  set: (val) => {
    list.value = val;
    emits('update:modelValue', val)
    emits('selected', val);
  },
  get: () => list.value
})

watch(() => props.modelValue, (val) => {
  list.value = val;
}, { immediate: false })
</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.model" :value="item.id" />
      </el-checkbox-group>
    </el-card>
  </div>
</template>

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