<template>
	<div class="cu_table">
		<el-table
			:show-header="showHeader"
			ref="tableRef"
			:data="tableData.data"
			v-loading="tableLoading"
			style="font-size: 12px"
			:cell-style="{ fontWeight: '400', fontSize: '14px', color: 'rgba(0,0,0,0.65)', height: '46px' }"
			:header-cell-style="{
				height: '46px',
				background: '#F7F8FA',
				fontFamily: 'Alip-Regular',
				fontWeight: '400',
				fontSize: '14px',
				color: ' rgba(0,0,0,0.85)',
			}"
			@selection-change="selectionChange"
			@sort-change="sortChange"
			size="small"
			row-key="id"
			:cell-class-name="cellClassName"
			:tree-props="{ children: hadExpand ? 'clusterNews' : '', hasChildren: true }"
		>
			<slot></slot>
		</el-table>
		<el-pagination
			background
			style="margin-top: 24px"
			layout="slot, ->,sizes,prev, pager, next, jumper"
			:page-sizes="[10, 20, 50, 100]"
			v-model:page-size="tableData.size"
			:total="tableData.total"
			v-model:current-page="tableData.page"
			@current-change="currentChange"
			@size-change="sizeChange"
		>
			<div style="font-size: 14px; color: rgba(0, 0, 0, 0.6)">
				<text v-if="hadExpand">聚类共 {{ tableData.total }} 项数组</text>
				<text v-else>共 {{ tableData.total }} 项数据</text>

				<!-- <text v-if="tableData.realTotal > 0">，精选资讯共 {{ tableData.realTotal }} 项数据</text> -->
			</div>
		</el-pagination>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Session } from '/@/utils/storage';

const props = defineProps({
	// 列表内容
	tableData: {
		type: Object,
		default: () => {},
	},
	tableLoading: {
		type: Boolean,
		default: false,
	},
	defaultCurrentPage: {
		type: Number,
		default: 1,
	},
	showHeader: {
		type: Boolean,
		default: true,
	},
	hadExpand: {
		type: Boolean,
		default: true,
	},
});

const emit = defineEmits(['currentChange', 'selectionChange', 'sizeChange', 'sortChange']);

const tableRef = ref();

function currentChange(page: number) {
	emit('currentChange', page);
}

function selectionChange(rows: any) {
	emit('selectionChange', rows);
}

function sizeChange(size: any) {
	emit('sizeChange', size);
}

function sortChange(sort: any) {
	emit('sortChange', sort);
}

function clearSelection() {
	tableRef.value.clearSelection();
}

function toggleRowSelection(row, isCheck) {
	tableRef.value.toggleRowSelection(row, isCheck);
}

function clearSort() {
	tableRef.value.clearSort();
}

function cellClassName({ row, column, rowIndex, columnIndex }) {
	if (row.isChild) {
		return 'first-cell';
	}
}

defineExpose({
	clearSelection,
	toggleRowSelection,
	clearSort,
});
</script>

<style scoped lang="scss">
.cu_table {
	// border-radius: 10px;
	// margin: 10px;
	&::after {
		content: '';
		clear: both;
		visibility: hidden;
		display: block;
		height: 0;
		overflow: hidden;
	}
}

.el-table {
	// border-radius: 10px;
	// border: 1px solid #f0f2f5;
}

:deep(.el-button--large) {
	padding: 0;
}

:deep(.el-pagination.is-background .btn-prev:disabled) {
	background-color: transparent;
}

:deep(.el-pagination.is-background .btn-next:disabled) {
	background-color: transparent;
}

:deep(.el-pagination.is-background .btn-prev) {
	background-color: transparent;
}

:deep(.el-pagination.is-background .btn-next) {
	background-color: transparent;
}

:deep(.el-pagination.is-background .el-pager li) {
	background-color: transparent;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
}

// .el-table :deep(.first-cell) {
// 	background-color: red;
// }

:deep(.el-table__row--level-1) {
	background-color: #f7f8fa;
}

/* 1. 隐藏默认图标 */
:deep(.el-table__expand-icon) {
	/* 若只隐藏图标，保留容器： */
	&::before,
	& .el-icon--expand::before {
		opacity: 0 !important; /* 透明化，保留点击区域 */
	}
	/* 若直接隐藏容器（慎用，会丢失点击区域）： */
	/* display: none !important; */
}

:deep(.el-table td.el-table__cell div) {
	.el-icon {
		opacity: 0 !important;
	}
}

/* 2. 自定义折叠状态图标（示例：文件夹图标） */
:deep(.el-table__expand-icon) {
	background: url('../../assets/packup_icon.png') no-repeat center;
	background-size: 100% 100%; /* 图标大小 */
	cursor: pointer;
}

/* 3. 自定义展开状态图标（示例：打开的文件夹） */
:deep(.el-table__expand-icon--expanded) {
	background: url('../../assets/unfold_icon.png') no-repeat center;
	background-size: 100% 100%; /* 图标大小 */
	transform: rotate(90deg);
	rotate: 90deg;
}
</style>
