<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[];
  zrTitle: any[];
  zrTitleDw: 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 v-for="item in spuArr" :id="`item-${item.id}`" :key="item.id" class="product-li">
      <a href="javascript:;">
        <div class="product-img">
          <NuxtImg
            :src="item.img"
            :alt="item.name"
            :loading="isClient ? 'lazy' : 'eager'"
            :placeholder="isClient ? '/img/loading.png' : undefined"
          ></NuxtImg>
          <img v-if="item.img" :src="item.img" style="width: 0; height: 0" />
          <p class="mt10">
            Datasheet<a v-if="item.manual" :href="item.manual" target="blank"><img src="@/assets/img/icon/d.png" class="mt3" :alt="item.manual"></a>
          </p>
        </div>
        <div class="product-info">
          <h3 class="title">Model: <span v-html="item.goodsType"></span></h3>
          <p>Package: <span v-html="item.packageSpecification"></span></p>
          <p
            v-for="(i, d) in props.zrTitle"
            :key="d"
            v-show="i.value && props.zrTitleDw[d].value && item[i.label]"
          >
            {{ i.value }}-{{ props.zrTitleDw[d].value }}: {{ item[i.label] }}
          </p>
        </div>
      </a>
    </li>
  </ul>
  <el-drawer
    v-model="open.detail"
    :title="detailInfo.gn"
    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>
