<script setup lang="ts">
import { Events } from "~/dim/event";
import type spuType from "~/domain/Spu";
import { SpuAttrDim } from "~/dim/spu";
let loadingImg =
  "https://io.house-tk.com/hop/pro/other/images/cd6fddec6ee4f5be04d29a934a0c05a4";
const user = useUserStore();
const route = useRoute();
const props = defineProps<{
  spuArr: any[];
  pageData?: any[];
  isHome?: any;
}>();
const open = ref({
  detail: false,
});
let detailInfo: Ref<any> = ref({}); //默认sku信息
const nuxtApp = useNuxtApp();
const isClient = !nuxtApp.ssrContext;
onMounted(() => {});
function reset(e: any) {}
function pcDialog(item:any) {
  open.value.detail = true;
  detailInfo.value = item
}
function done(){
  cancel();
}
function cancel() {
  Object.keys(open.value).forEach(
    (key) => (open.value[key as keyof typeof open.value] = false)
  );
}
</script>
<template>
  <ul class="product-ul">
    <li class="product-li" v-for="(item,idx) in spuArr" :id="`item-${item.id}`" :key="item.id">
      <NuxtLink :to="{path:`/product`,query:{code:item.id}}">
        <div class="product-img">
          <NuxtImg :src="item.goodsImg" :alt="item.name" :loading="isClient ? 'lazy' : 'eager'" :placeholder="isClient ? '/img/loading.png' : undefined"></NuxtImg>
          <img v-if="item.goodsImg" :src="item.goodsImg" style="width:0;height: 0;">
        </div>
        <div class="product-info">
          <h3 :title="item.name" class="title" v-html="item.name"></h3>
          <p>品牌：{{item.brandName}}</p>
          <p>型号：<span v-html="item.ksn"></span></p>
          <p>封装：<span v-html="item.packageSpecification"></span></p>
          <p>库存：现货</p>
          <p class="price"><span class="mainColor">¥{{item.price}}</span></p>
        </div>
      </NuxtLink>
      <el-button class="btn_main addCart" @click="pcDialog(item)">
        加购
      </el-button>
    </li>
  </ul>
  <el-drawer :title="detailInfo.gn" v-model="open.detail" size="auto" direction="btt" append-to-body class="detail-drawer" @close="open.detail = false" :with-header="false" :z-index="2000">
    <editCart :detailInfo="detailInfo" @done="done"></editCart>
  </el-drawer>
</template>
  