<script setup>
import { computed } from 'vue'


const props = defineProps({
  value: String,
  field: String,
  row: Object,
  isCompare: Boolean,
})

// 计算 'gap' 值
const gapValue = computed(() => {
  const gapField = `gap${ props.field.charAt(0).toUpperCase() }${ props.field.slice(1) }` // 构建对应的 gap 前缀字段名称
  return props.row[gapField] // 返回行数据中对应的 gap 值
})
</script>

<template>
  <div>
    <!-- 特定字段的自定义显示，例如 'rank' -->
    <div v-if="field === 'rank'">
      <div style="font-weight: 700">BigRank: #{{ row.bigCatRank ? row.bigCatRank : '--' }}</div>
      <div style="color: #c9cdd4">Rank: #{{ row.smallCatRank ? row.smallCatRank : '--' }}</div>
      <div style="font-weight: 700">BigTitle: {{ row.bigCatTitle }}</div>
      <div style="color: #c9cdd4">Title: {{ row.smallCatTitle }}</div>
    </div>

    <div v-else-if="field === 'Asin'">
      <div class="list-content">
        <div class="image-item">
          <img :src="row.Image" alt=""/>
        </div>
        <div>
          <el-tooltip effect="dark" :content="row.Title" placement="top-start">
            <span class="item-title">{{ row.Title }}</span>
          </el-tooltip>
          <div>
            <span class="text-black font-medium">{{ row.priceMax }}</span>
            ~
            <span class="text-black font-medium">{{ row.priceMin }}</span>
          </div>
          <div class="item-font">
            Parent ASIN: <span class="black-color">{{ row.parentAsin }}</span>
          </div>
          <div class="item-font mt-1">
            ASIN: <span class="black-color">{{ row.Asin }}</span> SKU: <span class="black-color">{{ row.skuNumbers }}</span>
          </div>
        </div>
      </div>
    </div>

    <div v-else-if="field === 'sku'">
      <div class="list-content">
        <div class="image-item">
          <img :src="row.Image" alt=""/>
        </div>
        <div>
          <el-tooltip effect="dark" :content="row.Title" placement="top-start">
            <span class="item-title">{{ row.Title }}</span>
          </el-tooltip>
          <div>
            <span class="item-font">{{ row.quantity ? '有库存' : '缺货' }}</span>
          </div>
          <span class="item-font">
            ASIN: <span class="black-color">{{ row.Asin }}</span>
          </span>
          <el-tooltip effect="dark" :content="row.sku" placement="top-start">
            <span class="item-font display-line">
              SKU: <span class="black-color">{{ row.sku }}</span>
            </span>
          </el-tooltip>
        </div>
      </div>
    </div>

    <div v-else-if="field === 'bestSku'">
      <div class="list-content">
        <div class="image-item">
          <img :src="row.Image" alt=""/>
        </div>
        <div style="display: flex; flex-direction: column">
          <el-tooltip effect="dark" :content="row.Title" placement="top-start">
            <span class="item-title">{{ row.Title }}</span>
          </el-tooltip>
          <div>
            <span class="text-slate-950">{{ row.price }}</span>
            <span class="item-font px-2">|</span>
            <span class="item-font">{{ row.quantity ? '有库存' : '缺货' }}</span>
          </div>
          <div class="item-font">
            ASIN: <span class="black-color">{{ row.Asin }}</span>
          </div>
          <el-tooltip effect="dark" :content="row.bestSku" placement="top-start">
            <div class="item-font display-line">
              SKU: <span class="black-color">{{ row.bestSku }}</span>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>

    <div v-else-if="field === 'status'">
      <el-tag v-if="value === 'Active'" type="success">在售</el-tag>
      <el-tag v-if="value === 'Inactive'" type="info">停售</el-tag>
      <el-tag v-if="value === 'Incomplete'" type="warning">不完整</el-tag>
    </div>
    <div v-else-if="field === 'launchDatetime'">
      {{ value ? value.split('T')[0] : '--' }}
    </div>

    <!-- 其他字段的通用显示逻辑 -->
    <div v-else>
      {{ value }}
      <!-- 根据 gapValue 的值和 isCompare 调整显示内容 -->
      <div v-if="isCompare" :style="{ color: gapValue > 0 ? '#59b939' : gapValue < 0 ? '#ee7973' : '#dde0eb' }">
        <el-icon v-if="gapValue > 0">
          <Top style="position: absolute; top: 2px"/>
        </el-icon>
        <el-icon v-else-if="gapValue < 0">
          <Bottom style="position: absolute; top: 2px"/>
        </el-icon>
        <!-- 显示 gapValue 值，根据情况加上百分号 -->
        {{ gapValue !== undefined ? (gapValue === null || gapValue === 0 ? '0%' : (gapValue < 0 ? '-' : '') + Math.abs(gapValue) + '%') : '' }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.list-content {
  display: flex;
  align-items: center;
  gap: 4px;
}

.image-item {
  min-width: 72px;
  height: 72px;
}

.image-item img {
  min-width: 72px;
  height: 72px;
  border: 1px solid #dde0eb;
  border-radius: 4px;
}

.item-title {
  font-weight: 500;
  color: #1d2129;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--line-clamp);
  /* white-space: pre-wrap; */
  --line-clamp: 1;
}

.item-font {
  color: #6b7785;
  font-size: 13px;
  line-height: 13px;
}

.display-line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--line-clamp);
  /* white-space: pre-wrap; */
  --line-clamp: 1;
}

.black-color {
  color: black;
}
</style>
