<script setup>
import { getProductList } from '@/api/base'

const options = ref([])
async function fetchList() {
  const res = await getProductList({ page: 1, 'per-page': 1000 })
  options.value = res.data.list?.map((item) => {
    const picture_addreses = JSON.parse(item.picture_addreses) || []
    const [picture] = picture_addreses
    return {
      ...item,
      picture_url: picture?.url,
    }
  })
}
watchEffect(() => {
  fetchList()
})
</script>

<template>
  <el-select-v2
    :options="options"
    placeholder="请选择"
    style="width: 100%"
    value-key="id"
    filterable
    :item-height="60"
    :props="{ label: 'title', value: 'id' }">
    <template #default="{ item }">
      <div class="custom-item">
        <el-image :src="item.picture_url" style="width: 40px; height: 40px" />
        <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ item.title }}</span>
        <span style="color: var(--el-text-color-secondary); font-size: 13px">{{
          item.live_commodity_type_full_name
        }}</span>
      </div>
    </template>
  </el-select-v2>
</template>

<style>
.custom-item {
  padding: 10px 0;
  gap: 10px;
  display: flex;
  align-items: center;
}
</style>
