<script lang="ts" setup>
import ItemBox from './components/ItemBox/index.vue'
// import ItemReference from './components/ItemReference/index.vue'
import ItemCard from './components/ItemCard/index.vue'
import ItemProductDetail from './components/ItemProductDetail/index.vue'

interface Props {
  streamAttachment: any[]
}
const props = defineProps<Props>()
const emits = defineEmits(['onClickBoxProductItem'])

function onClickBoxProductItem(item: any) {
  emits('onClickBoxProductItem', item)
}

const isShow = computed(() => {
  let show = false
  props.streamAttachment?.forEach((item) => {
    show = ['product-detail', 'box', 'reference'].includes(item.type || '') || item?.type?.includes('card-')
  })
  return show
})
</script>

<template>
  <div v-if="isShow" class="attachment-parser-wrap">
    <div class="attachment-content">
      <van-space direction="vertical" fill size="8px">
        <div v-for="(item, index) in props.streamAttachment" :key="index" class="attachment-item">
          <ItemProductDetail v-if="item && item.type === 'product-detail'" :data="item" />
          <ItemBox v-if="item && item.type === 'box'" :data="item" @on-click-box-product-item="onClickBoxProductItem" />
          <ItemReference v-if="item && item.type === 'reference'" :data="item" />
          <ItemCard v-if="item && item?.type?.includes('card-')" :data="item" />
        </div>
      </van-space>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.attachment-parser-wrap {
  margin-top: 12px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.1s;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 自定义显示时的渐显效果 */
.fade-enter-active {
  transition: opacity 0.5s;
}
</style>
