<script lang="ts" setup>
/**
 * @Name: TitleCard.vue
 * @Description: 评论详情-标题卡片
 * @Author: Cheney
 */

import { handleCopy } from '/@/utils/useCopyText';
import VerticalDivider from '/@/components/VerticalDivider/index.vue';
import { CopyDocument, DocumentCopy, Picture as IconPicture } from '@element-plus/icons-vue';


const props = defineProps({
  img: String,
  url: String,
  title: String,
  asin: String,
});
const { img, url, title, asin } = props;
</script>

<template>
  <el-card body-class="flex justify-between items-center gap-5" class="border-none sticky top-5 z-10">
    <div class="flex">
      <el-image :src="`https://d1ge0kk1l5kms0.cloudfront.net/images/I/${img}.jpg`" class="mr-5"
                fit="fill"
                lazy style="min-width: 78px; height: 78px;">
        <template #error>
          <div class="flex justify-center items-center h-full w-full text-2xl"
               style="background:var(--el-fill-color-light)">
            <el-icon>
              <icon-picture />
            </el-icon>
          </div>
        </template>
      </el-image>
      <div class="flex flex-col justify-between">
        <el-link :href="url"
                 :underline="false"
                 target="_blank"
                 style="font-size: 18px;justify-content: left !important;"
                 :disabled="!title"
                 type="primary">
          <span class="line-clamp-2 text-ellipsis whitespace-normal" >{{ title || '--' }}</span>
        </el-link>
        <div class="flex items-center">
          <div class="font-semibold italic">{{ asin }}</div>
          <VerticalDivider />
          <el-button :icon="CopyDocument" link class="ml-1 cursor-pointer" :disabled="!asin" @click="handleCopy(asin || '')">
          </el-button>
          <!--<el-icon class="ml-2 cursor-pointer" @click="handleCopy(asin || '')">-->
          <!--  <DocumentCopy />-->
          <!--</el-icon>-->
        </div>
      </div>
    </div>
    <!--<el-button :icon="Back" plain round type="info" @click="handleBack">返 回</el-button>-->
  </el-card>
</template>

<style scoped>

</style>
