<template>
  <el-popover placement="right" width="500" trigger="click">
    <template #reference>
      <el-button  link type="primary" @click="getHandler">点击查看</el-button>
    </template>
    <el-table :data="gridData">
      <el-table-column width="150" property="productName" label="品种名称" />
      <el-table-column width="150" property="packageName" label="包装信息" />
      <el-table-column width="200" property="specification" label="规格" />
    </el-table>
  </el-popover>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
import {ProductApi} from "@/api/visit/product";

const props = defineProps({
  ids: {
    type: String,
    required: true
  }
})
interface Product {
  productName: string
  packageName: string
  specification: string
}

const gridData = ref<Product[]>([])

// 修正5：添加函数返回值类型
const getHandler = async (): Promise<void> => {
  try {
    gridData.value = await ProductApi.getProductByIds(props.ids) // 显式使用props
    console.log(gridData);
  } catch (error) {
    console.error('获取产品失败:', error)
    gridData.value = []
  }
}

</script>
