<script lang="ts" setup>
/**
 * @Name: DataTableSlot.vue
 * @Description: 竞品监控-表格插槽
 * @Author: Cheney
 */

import { useCountryInfoStore } from '/@/stores/countryInfo';
import { getTagType } from '/@/utils/useTagColor';
import PermissionButton from '/@/components/PermissionButton/index.vue';
import { useTivEnum } from '/@/views/product-manage/comment-detail/enum';

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

const emit: any = defineEmits(['open-negativeLabel']);

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

const endpoint = ref('www.amazon.com');

function getCommentType(value: any): string {
	const type = useTivEnum.find((item) => item.value === value);
	return type ? type.label : '未知';
}

function getTagType(type: number): string {
	switch (type) {
		case 0:
			return 'success';
		case 1:
			return 'primary';
		case 2:
			return 'warning';
		case 3:
			return 'danger';
		default:
			return 'info';
	}
}

function handleNegativeLabel() {
	emit('open-negativeLabel', row);
}
</script>

<template>
	<div class="font-medium">
		<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 === 'title'">
			<el-link :disabled="!row.title" :href="row.url" :underline="false" target="_blank">
				<span style="font-weight: 600; font-size: 13px">{{ row.title || '-' }}</span>
			</el-link>
		</div>
		<div v-else-if="field === 'reviewer_name'">
			<el-link
				:disabled="!row.reviewer_name"
				:href="`https://${endpoint}/gp/profile/amzn1.account.${row.reviewer_id}/ref=cm_cr_srp_d_gw_btm?ie=UTF8`"
				:underline="false"
				target="_blank"
			>
				<span style="font-weight: 600; font-size: 13px">{{ row.reviewer_name || '-' }}</span>
			</el-link>
		</div>
		<div v-else-if="field === 'content'">
			<el-tooltip
				:content="row.content"
				:disabled="row.content.length <= 80"
				:show-after="350"
				effect="dark"
				placement="top"
				popper-class="custom-tooltip"
			>
				<span class="content-ellipsis">{{ row.content }}</span>
			</el-tooltip>
		</div>
		<div v-else-if="field === 'score'">
			<template v-if="row.score !== null && row.score !== undefined && row.score !== ''">
				<el-rate v-if="row.score > 0" v-model="row.score" :colors="['#FF0000', '#FF9900', '#67C23A']" disabled text-color="#1e293b" />
				<span v-else>{{ row.score }}</span>
			</template>
			<template v-else>
				<span>-</span>
			</template>
		</div>
		<div v-else-if="field === 'tiv'">
			<el-tag :type="getTagType(row.tiv)">
				{{ getCommentType(row.tiv) }}
			</el-tag>
		</div>
		<div v-else-if="field === 'helpful'">
			<span>{{ row.helpful }}</span>
		</div>
		<div v-else-if="field === 'verified'">
			<el-switch v-model="row.verified" disabled size="small"></el-switch>
		</div>
		<div v-else-if="field === 'create_datetime'">
			<span>{{ row.create_datetime }}</span>
		</div>
		<div v-else-if="field === 'operate'">
			<div class="flex justify-center">
				<PermissionButton size="small" type="danger" @click="handleNegativeLabel"> 负面标签 </PermissionButton>
			</div>
		</div>
		<div v-else>
			{{ row[field] || '-' }}
		</div>
	</div>
</template>

<style scoped>
:deep(.flex-1 .el-progress__text) {
	font-size: 14px !important;
}
</style>

<style lang="scss">
.custom-btn-tooltip {
	background-color: #eff9eb !important;
	color: #606266 !important;
	border: 1px solid #67c23a !important;
	font-size: 14px;
}

.content-ellipsis {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* 显示的行数 */
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 4.5em; /* 根据字号和行高设置最大高度 */
	line-height: 1.5em; /* 控制行高，与你的内容相匹配 */
}

.custom-tooltip {
	max-width: 350px; /* 设置最大宽度 */
	white-space: pre-wrap; /* 允许文本换行 */
	word-wrap: break-word; /* 处理长单词换行 */
}
</style>
