<script lang="ts" setup>
/**
 * @Name: DataTableSlot.vue
 * @Description: 买家之声-数据表格插槽
 * @Author: xinyan
 */

import { CopyDocument, Picture as IconPicture, View } from '@element-plus/icons-vue';
import PermissionButton from '/@/components/PermissionButton/index.vue';
import { handleCopy } from '/@/utils/useCopyText';
import { useCountryInfoStore } from '/@/stores/countryInfo';

const props = defineProps<{
	row: any;
	field: any;
}>();
const { row, field } = props;

const emit = defineEmits(['show-detail']);

const countryInfoStore = useCountryInfoStore();
const country = countryInfoStore.Countries.find((c) => c.code == row.country_code);
const color = country ? country.color : '#3875F6';

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

// const ncx_rate = computed(() => {
// 	return row.ncx_count / row.order_count;
// });

const ncx_rate = computed(() => {
	if (row.ncx_count != null &&
		row.order_count != null &&
		row.order_count > 0) {
		return ((row.ncx_count / row.order_count) * 100).toFixed(2);
	}
	return null; // 或者返回其他占位符
});

function handleShow() {
	emit('show-detail', row);
}
</script>

<template>
	<div class="font-semibold">
		<div v-if="field === 'country_code'">
			<el-tag :disable-transitions="true" :style="{ color: color, borderColor: color }" effect="plain" round>
				{{ country ? country.name : '-' }}
			</el-tag>
		</div>
		<div v-else-if="field === 'operate'">
			<div class="flex justify-center gap-2">
				<div>
					<PermissionButton circle plain type="success" @click="handleShow">
						<el-icon>
							<View />
						</el-icon>
					</PermissionButton>
				</div>
			</div>
		</div>
		<div v-else-if="field === 'ncx_rate'">
			{{  ncx_rate?ncx_rate+'%':'-' }}
		</div>
		<div v-else-if="field === 'product_info'">
			<div class="flex justify-start items-center font-medium">
				<div v-if="row.img" style="width: 60px; height: 60px; margin-right: 5px">
					<el-tooltip effect="light" placement="right-start">
						<el-image
							:src="`https://d1ge0kk1l5kms0.cloudfront.net/images/I/${row.img}.jpg`"
							fit="scale-down"
							lazy
							style="width: 60px; height: 60px; margin-right: 5px"
						/>
						<template #content>
							<el-image :src="`https://d1ge0kk1l5kms0.cloudfront.net/images/I/${row.img}.jpg`" style="width: 250px" />
						</template>
					</el-tooltip>
				</div>
				<el-image v-else lazy style="min-width: 60px; margin-right: 5px; font-size: 2.7rem">
					<!--<div slot="error" class="image-slot">-->
					<!--  <i class="el-icon-picture-outline"></i>-->
					<!--</div>-->
					<template #error>
						<div class="image-slot">
							<el-icon>
								<icon-picture />
							</el-icon>
						</div>
					</template>
				</el-image>
				<div class="text-left">
					<el-tooltip :content="row.product_name" :disabled="!row.product_name" effect="dark" placement="top-start" show-after="350">
						<el-link :disabled="!row.product_name" :href="url" :underline="false" target="_blank" type="primary">
							<span class="line-clamp-2 text-ellipsis whitespace-normal">
								{{ row.product_name || '--' }}
							</span>
						</el-link>
					</el-tooltip>
					<div>
						<div class="flex">
							ASIN:
							<span class="font-semibold italic ml-1" style="color: #1d2129">
								{{ row.asin || '--' }}
							</span>
							<el-button :disabled="!row.asin" :icon="CopyDocument" class="ml-1 cursor-pointer" link @click="handleCopy(row.asin || '')"></el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-else-if="field === 'all_score'">
			<template v-if="row.all_score !== null && row.all_score !== undefined && row.all_score !== ''">
				<el-tooltip v-if="row.all_score > 0" :content="row.all_score" effect="dark" placement="top" show-after="350">
					<el-rate v-if="row.all_score > 0" v-model="row.all_score" :colors="['#FF0000', '#FF9900', '#67C23A']" disabled text-color="#1e293b" />
				</el-tooltip>
				<span v-else>{{ row.all_score }}</span>
			</template>
			<template v-else>
				<span>-</span>
			</template>
		</div>
		<div v-else-if="field === 'return_record_rate'">
			{{ (row.return_record_rate * 100).toFixed(2) + '%' || '-' }}
		</div>
		<div v-else>
			{{ row[field] || '-' }}
		</div>
	</div>
</template>

<style scoped></style>