<script lang="ts" setup>
/**
 * @Name: DataDisplay.vue
 * @Description: 买家之声详情-数据展示组件
 * @Author: xinyan
 */
import * as api from '/@/views/customers-voice/api';
import { useResponse } from '/@/utils/useResponse';
import { onMounted, reactive } from 'vue';

// 定义 Props
const props: any = defineProps({
	rowData: Object,
	queryParameter: Object,
});

const { rowData, queryParameter } = props;
const start_time = dayjs(queryParameter?.date[0]).format('YYYY-MM-DD');
const end_time = dayjs(queryParameter?.date[1]).format('YYYY-MM-DD');

// 定义评论数据接口
interface Comment {
	order_id: string;
	comment: string;
	date: string;
}

function createGridOptions() {
	return reactive({
		size: 'mini',
		border: true,
    round: true,
		// stripe: true,
		showHeader: false,
		height: 500,
		// showOverflow: 'tooltip',
		loading: false,
		rowConfig: {
			isCurrent: true,
			isHover: true,
			height: 50,
		},
		loadingConfig: {
			icon: 'vxe-icon-indicator roll',
			text: '加载中...',
		},
		// tooltipConfig: {
		// 	zIndex: 9999,
		// },
		pagerConfig: {
			total: 0,
			page: 1,
			limit: 10, // 每页条数
		},
		columns: [{ field: 'comment', title: '评论内容', width: 500, slots: { default: 'commentSlot' } }],
		data: [] as Comment[],
	});
}

// 每个表格的配置
const returnGridOptions = createGridOptions(); // 退货评论
const feedbackGridOptions = createGridOptions(); // 反馈评论
const reviewGridOptions = createGridOptions(); // 评价评论

// 获取数据
async function handlePageChange(option: string, gridOptions: any) {
	gridOptions.loading = true;

	// 请求参数，动态更新分页信息
	const query = {
		asin: rowData.asin,
		start_time: start_time,
		end_time: end_time,
		option,
		page: gridOptions.pagerConfig.page,
		limit: gridOptions.pagerConfig.limit,
	};

	try {
		const resp = await useResponse(api.getCommentData, query);
		gridOptions.data = resp.data;
		gridOptions.pagerConfig.total = resp.total || 0; // 更新总数
	} catch (error) {
		console.error(`加载 ${option} 数据失败:`, error);
	} finally {
		gridOptions.loading = false;
	}
}

function cellStyle() {
	return {
		fontSize: '13px',
		color: '#666',
		fontWeight: 600,
	};
}

// 组件加载时获取数据
onMounted(() => {
	handlePageChange('return_negative_comment', returnGridOptions);
	handlePageChange('feedback_negative_comment', feedbackGridOptions);
	handlePageChange('review_negative_comment', reviewGridOptions);
});
</script>

<template>
	<div class="mt-5" style="height: 550px">
		<el-row>
			<!-- 退货评论 -->
			<el-col :span="8">
				<div class="title">
					<div class="font-semibold italic mb-2">退货评论</div>
					<vxe-grid :cell-style="cellStyle" v-bind="returnGridOptions">
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
						<template #pager>
							<vxe-pager
								v-model:currentPage="returnGridOptions.pagerConfig.page"
								v-model:pageSize="returnGridOptions.pagerConfig.limit"
								:total="returnGridOptions.pagerConfig.total"
								class="mt-1.5"
								@page-change="() => handlePageChange('return_negative_comment', returnGridOptions)"
							/>
						</template>
						<template #commentSlot="{ row }">
							<div class="text-gray-500 text-xs mt-1 mb-3">
								<el-row>
									<el-col :span="12"> 订单编号:{{ row.order_id }}</el-col>
									<el-col :span="12"> 评论日期:{{ row.date }}</el-col>
								</el-row>
							</div>
							<el-tooltip
								:content="row.comment"
								:disabled="row.comment.length <= 80"
								:show-after="350"
								effect="dark"
								placement="top"
								popper-class="custom-tooltip"
							>
								<span class="content-ellipsis">
									{{ row.comment }}
								</span>
							</el-tooltip>
						</template>
					</vxe-grid>
				</div>
			</el-col>

			<!-- 反馈评论 -->
			<el-col :span="8">
				<div class="title">
					<div class="font-semibold italic mb-2">反馈评论</div>
					<vxe-grid :cell-style="cellStyle" v-bind="feedbackGridOptions">
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
						<template #pager>
							<vxe-pager
								v-model:currentPage="feedbackGridOptions.pagerConfig.page"
								v-model:pageSize="feedbackGridOptions.pagerConfig.limit"
								:total="feedbackGridOptions.pagerConfig.total"
								class="mt-1.5"
								@page-change="() => handlePageChange('feedback_negative_comment', feedbackGridOptions)"
							/>
						</template>
						<template #commentSlot="{ row }">
							<div class="text-gray-500 text-xs mt-1 mb-3">
								<el-row>
									<el-col :span="12"> 订单编号:{{ row.order_id }}</el-col>
									<el-col :span="12"> 评论日期:{{ row.date }}</el-col>
								</el-row>
							</div>
							<el-tooltip
								:content="row.comment"
								:disabled="row.comment.length <= 80"
								:show-after="350"
								effect="dark"
								placement="top"
								popper-class="custom-tooltip"
							>
								<span class="content-ellipsis">
									{{ row.comment }}
								</span>
							</el-tooltip>
						</template>
					</vxe-grid>
				</div>
			</el-col>

			<!-- 评价评论 -->
			<el-col :span="8">
				<div class="title">
					<div class="font-semibold italic mb-2">买家差评</div>
					<vxe-grid :cell-style="cellStyle" v-bind="reviewGridOptions">
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
						<template #pager>
							<vxe-pager
								v-model:currentPage="reviewGridOptions.pagerConfig.page"
								v-model:pageSize="reviewGridOptions.pagerConfig.limit"
								:total="reviewGridOptions.pagerConfig.total"
								class="mt-1.5"
								@page-change="() => handlePageChange('review_negative_comment', reviewGridOptions)"
							/>
						</template>
						<template #commentSlot="{ row }">
							<div class="text-gray-500 text-xs mb-3">
								<el-row>
									<el-col :span="12" class="d-flex align-items-center">
										<div class="flex">
											<el-tooltip v-if="row.score > 0" :content="row.score" effect="dark" placement="top" show-after="350">
												<div class="flex items-center">
													<div class="font-semibold italic">评分 :</div>
													<el-rate
														v-if="row.score > 0"
														v-model="row.score"
														:colors="['#FF0000', '#FF9900', '#67C23A']"
														disabled
														text-color="#1e293b"
													/>
												</div>
											</el-tooltip>
											<span v-else>评分: {{ row.score }}</span>
										</div>
									</el-col>
									<el-col :span="12" class="d-flex align-items-center"> 评论日期: {{ row.review_date }} </el-col>
								</el-row>
							</div>
							<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>
						</template>
					</vxe-grid>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<style lang="scss">
.title {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.d-flex {
	display: flex;
}

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

.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>
