<script setup lang="ts">
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { getDetail } from '../api'
import ExchangeProduct from './ExchangeProduct.vue'
import emitter from '/@/utils/emitter'

const profile = <any>inject('profile')
const dateRange = <any>inject('dateRange')
const topCardloading = ref(false)
const dataSet = <any>ref({})

const parentAsin = ref('')
const childAsin = ref('')
const sku = ref('')

// 根据不同的点击事件发送请求获取数据
emitter.on('useSelectItem-clickParentAsinBtn', (value: any) => {
  parentAsin.value = value.selectedParentAsin
  fetchDetail()
})

emitter.on('useSelectItem-clickAsinBtn', (value: any) => {
  parentAsin.value = value.selectedParentAsin
  childAsin.value = value.selectedAsin
  fetchDetail()
})

emitter.on('useSelectItem-clickSkuItem', (value: any) => {
  parentAsin.value = value.selectedParentAsin
  childAsin.value = value.selectedAsin
  sku.value = value.selectedSku
  fetchDetail()
})

async function fetchDetail() {
  topCardloading.value = true
  const query = {
    profileId: profile.value.profile_id,
    parentAsin: parentAsin.value,
    childAsin: childAsin.value,
    sku: sku.value,
  }
  try {
    const res = await getDetail(query)
    dataSet.value = res.data
  } catch (error) {
    console.log('error:', error)
  } finally {
    topCardloading.value = false
  }
}

const classification = computed(() => {
  if (dataSet.value.Asin) {
    return 'ASIN'
  } else if (dataSet.value.sku) {
    return 'SKU'
  } else {
    return '父ASIN'
  }
})

const classificationStyle = computed(() => {
  switch (classification.value) {
    case 'ASIN':
      return { backgroundImage: 'linear-gradient(to right bottom, #ffffff, #6759f6)' }
    case 'SKU':
      return { backgroundImage: 'linear-gradient(to right bottom, #ffffff, #91cc69)' }
    default:
      return { backgroundImage: 'linear-gradient(to right bottom, #ffffff, #478cf7)' }
  }
})

watch(dateRange, () => {
  fetchDetail()
})

onMounted(() => {
  fetchDetail()
})

onBeforeUnmount(() => {
  emitter.all.clear()
})
</script>

<template>
  <div class="top-parent-asin" v-loading="topCardloading">
    <el-card body-style="padding: 8px;">
      <div class="product-card">
        <div class="product-image">
          <img v-if="dataSet.Image" :src="dataSet.Image" class="img" />
          <div v-else>
            <el-image>
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
        </div>
        <div class="product-info">
          <div>
            <ExchangeProduct />
            <div style="position: relative">
              <div class="classification-title" :style="classificationStyle">{{ classification }}</div>
            </div>
          </div>
          <el-tooltip effect="dark" :content="dataSet.Title" placement="top-start">
            <div class="product-title">
              {{ dataSet.Title ? dataSet.Title : '--' }}
            </div>
          </el-tooltip>
          <div class="product-detail">
            <span class="product-detail__label"> 父ASIN: </span>
            <span>{{ dataSet.parentAsin ? dataSet.parentAsin : '--' }}</span>
            <span class="product-detail__label ml-6"> SKU: </span>
            <span>{{ dataSet.skuNumbers ? dataSet.skuNumbers : '--' }}</span>
            <span class="product-detail__label ml-6"> FBA库存: </span>
            <span>{{ dataSet.FBAQuantity ? dataSet.FBAQuantity : '--' }}</span>
          </div>
          <div class="product-brand">
            <span>{{ dataSet.brandName }}</span>
          </div>
        </div>
        <div class="product-price">
          <div class="product-price__label">价格</div>
          <div class="product-price__content">
            <div>${{ dataSet.priceMin ? dataSet.priceMin : '--' }} ~ ${{ dataSet.priceMax ? dataSet.priceMax : '--' }}</div>
          </div>
        </div>
        <div class="product-stars">
          <div class="product-price__label">星级评分</div>
          <el-rate
            v-model="dataSet.allScore"
            disabled
            show-score
            text-color="#1d2129"
            :score-template="`${dataSet.allScore ? dataSet.allScore : '0.0'}`" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.product-card {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.product-image {
  flex-shrink: 0;
  width: 126px;
  height: 126px;
}
.product-image .img {
  width: 100%;
  height: 100%;
  border: 1px solid #e5e6eb;
  border-radius: 4px;
}
.top-parent-asin {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.product-info {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  gap: 8px;
}
.product-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: #1d2129;
  font-size: 18px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-price {
  flex-shrink: 0;
  min-width: 120px;
  color: #1d2129;
  font-size: 18px;
  font-weight: 700;
}
.product-price__label {
  padding-bottom: 4px;
  color: #6b7785;
  font-size: 12px;
}
.product-price__content {
  position: relative;
  top: 1px;
}
.product-stars {
  flex-shrink: 0;
  min-width: 180px;
  color: #1d2129;
  font-size: 18px;
  font-weight: 700;
}
.product-detail {
  color: #1d2129;
}
.product-detail__label {
  padding-left: 0;
  color: #6b7785;
}
.product-brand {
  display: flex;
  gap: 12px;
  color: #1d2129;
  height: 16px;
  line-height: 16px;
  font-weight: 500;
}
.classification-title {
  position: absolute;
  top: -38px;
  left: -152px;
  width: 70px;
  height: 22px;
  text-align: center;
  border-bottom-right-radius: 12px;
  border-top-left-radius: 4px;
  color: white;
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 126px;
  height: 126px;
  border: 1px solid #dde0eb;
  border-radius: 4px;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
</style>
