<script lang="ts" setup>
/**
 * @Name: ProductInfo.vue
 * @Description: 商品列表-商品信息插槽
 * @Author: Cheney
 */

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  imgWidth: {
    type: Number,
    default: 30
  },
  showTitleTooltip: {
    type: Boolean,
    default: false
  },
  displaySKU: {
    type: Boolean,
    default: false
  }
});

</script>

<template>
  <div class="flex justify-start items-center font-medium">
    <div v-if="item.img">
      <el-tooltip effect="light" placement="right-start">
        <el-image
            :src="`https://d1ge0kk1l5kms0.cloudfront.net/images/I/${item.img}.jpg`"
            :style="`width: ${imgWidth}px; margin-right: 5px;`"
            fit="fill"
        />
        <template #content>
          <el-image
              :src="`https://d1ge0kk1l5kms0.cloudfront.net/images/I/${item.img}.jpg`"
              style="width: 250px"
          />
        </template>
      </el-tooltip>
    </div>
    <el-image v-else :style="`width: ${imgWidth}px; margin-right: 5px;`">
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
    <div class="text-left">
      <el-tooltip :content="item.title" :disabled="showTitleTooltip" :show-after="300" effect="dark"
                  placement="top-start">
        <el-link :href=item.url :underline="false" target="_blank" type="primary">
          <span class="line-clamp-2 text-ellipsis whitespace-normal">{{ item.title ?? '--' }}</span>
        </el-link>
      </el-tooltip>
      <div class="flex justify-between">
        <span>
          {{ item.asin }}
        </span>
        <p v-show="displaySKU" class="m-0 p-0">
          {{ item.sku }}
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>
