<!-- 产品选择器组件 -->
<template>
  <el-select
    :model-value="modelValue"
    @update:model-value="handleChange"
    placeholder="请选择产品"
    filterable
    clearable
    class="w-full"
    :loading="productLoading"
  >
    <el-option
      v-for="product in productList"
      :key="product.id"
      :label="product.name"
      :value="product.id"
    >
      <div class="flex items-center justify-between w-full py-4px">
        <div class="flex-1">
          <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">
            {{ product.name }}
          </div>
          <div class="text-12px text-[var(--el-text-color-secondary)]">
            {{ product.productKey }}
          </div>
        </div>
        <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="product.status" />
      </div>
    </el-option>
  </el-select>
</template>

<script setup lang="ts">
import { ProductApi } from '@/api/iot/product/product'
import { DICT_TYPE } from '@/utils/dict'

/** 产品选择器组件 */
defineOptions({ name: 'ProductSelector' })

defineProps<{
  modelValue?: number
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value?: number): void
  (e: 'change', value?: number): void
}>()

const productLoading = ref(false) // 产品加载状态
const productList = ref<any[]>([]) // 产品列表

/**
 * 处理选择变化事件
 * @param value 选中的产品 ID
 */
const handleChange = (value?: number) => {
  emit('update:modelValue', value)
  emit('change', value)
}

/** 获取产品列表 */
const getProductList = async () => {
  try {
    productLoading.value = true
    const res = await ProductApi.getSimpleProductList()
    productList.value = res || []
  } catch (error) {
    console.error('获取产品列表失败:', error)
    productList.value = []
  } finally {
    productLoading.value = false
  }
}

// 组件挂载时获取产品列表
onMounted(() => {
  getProductList()
})
</script>
