<script lang="ts" setup>
/**
 * @Name: TitleCard.vue
 * @Description: 买家之声详情-标题卡片
 * @Author: xinyan
 */
import { useCountryInfoStore } from '/@/stores/countryInfo'
import dayjs from 'dayjs'


const props: any = defineProps({
  rowData: Object
})
const { rowData } = props

const countryInfoStore = useCountryInfoStore()
const endpoints = countryInfoStore.endpoints.find((c) => c.code == rowData.country_code)
const endpoint = endpoints ? endpoints.endpoint : null
const url = computed(() => {
  return `https://${ endpoint }/dp/${ rowData.asin }`
})

const ncx_rate = computed(() => {
  if (rowData.ncx_count != null && rowData.order_count != null && rowData.order_count > 0) {
    return ((rowData.ncx_count / rowData.order_count) * 100).toFixed(2)
  }
})
</script>

<template>
  <el-card class="sticky border-none top-2 z-20">
    <el-row :gutter="20">
      <el-col :span="2">
        <el-image
            :src="`https://d1ge0kk1l5kms0.cloudfront.net/images/I/${rowData.img}.jpg`"
            class="mr-5"
            fit="fill"
            lazy
            style="min-width: 120px; height: 120px"
        >
          <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>
      </el-col>
      <el-col :span="20">
        <div class="flex flex-col justify-between">
          <el-row>
            <el-col :span="24">
              <el-link
                  :disabled="!rowData.product_name"
                  :href="url"
                  :underline="false"
                  style="font-size: 18px; justify-content: left !important"
                  target="_blank"
                  type="primary"
              >
                <span class="line-clamp-2 text-ellipsis whitespace-normal">{{ rowData.product_name || '--' }}</span>
              </el-link>
            </el-col>
          </el-row>
          <div class="mt-3">
            <el-row>
              <el-col :span="6">
                <div class="font-semibold">
                <span style="color: #727478">
                  ASIN :
                </span>
                  <span class="italic">
                  {{ rowData.asin || '-' }}
                </span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="font-semibold">
                <span style="color: #727478">
                  SKU : 
                </span>
                  <span class="italic">
                  {{ rowData.sku || '-' }}
                </span>
                </div>
              </el-col>
            </el-row>
            <el-divider style="margin-top: 10px; margin-bottom: 8px" />
            <el-row class="d-flex align-items-center">
              <el-col :span="3">
                <div class="font-semibold">
                <span style="color: #727478">
                  总订单数 : 
                </span>
                  <span class="italic">
                  {{ rowData.order_count || '-' }}
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="font-semibold">
                <span style="color: #727478">
                  NCX订单 : 
                </span>
                  <span class="italic">
                  {{ rowData.ncx_count || '-' }}
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="font-semibold">
                <span style="color: #727478">
                  NCX率 : 
                </span>
                  <span class="italic">
                  {{ ncx_rate ? ncx_rate + '%' : '-' }}
                </span>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="font-semibold">
                <span style="color: #727478">
                  退货率 : 
                </span>
                  <span class="italic">
                  {{ (rowData.return_record_rate * 100).toFixed(2) + '%' || '-' }}
                </span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="font-semibold">
                <span style="color: #727478">
                  最近更新 :
                </span>
                  <span class="italic">
                  {{ dayjs(rowData.last_updated_date).format('YYYY-MM-DD') || '-' }}
                </span>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="flex">
                  <el-tooltip v-if="rowData.all_score > 0" :content="rowData.all_score" effect="dark" placement="top"
                              show-after="350">
                    <div class="flex items-center">
                      <div class="font-semibold mr-1" style="color: #727478">星级 :</div>
                      <el-rate
                          v-if="rowData.all_score > 0"
                          v-model="rowData.all_score"
                          :colors="['#FF0000', '#FF9900', '#67C23A']"
                          disabled
                          text-color="#1e293b"
                      />
                    </div>
                  </el-tooltip>
                  <span v-else>{{ rowData.all_score }}</span>
                  <div v-else>
                    <span>-</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>

    <!--<el-button :icon="Back" plain round type="info" @click="handleBack">返 回</el-button>-->
  </el-card>
</template>

<style scoped>
.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center; /* 垂直居中对齐 */
}
</style>
