<template>
	<el-dialog
		v-model="visible"
		width="1280px"
		:show-close="false"
		:close-on-click-modal="false"
		class="rule-subsidiary-dialog"
		destroy-on-close
		top="5vh"
		draggable
	>
		<template #header>
			<div class="dialog-header">
				<div class="left-title">
					<img :src="defaultIcon" alt="" class="title-icon" />
					<span class="company-name">{{ companyName }}</span>
					<span class="suffix-text">“实体清单50%规则” 涉及实体列表</span>
				</div>
				<div class="right-actions">
					<div class="right-count">
						共 <span class="highlight">{{ totalCount }}</span> 家
					</div>
					<el-icon class="close-btn" @click="visible = false"><Close /></el-icon>
				</div>
			</div>
		</template>

		<div class="dialog-content">
			<el-table
				:data="tableData"
				table-layout="fixed"
				:row-class-name="tableRowClassName"
				:header-cell-style="{ background: '#fff' }"
				style="width: 100%"
			>
				<el-table-column label="实体名称" min-width="300">
					<template #default="{ row }">
						<div class="entity-name-cell">
							<el-avatar class="avatar" :size="24" :src="row.avatar || defaultIcon" />
							<div class="name" :title="row.name">{{ row.name }}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="涉及领域" width="200">
					<template #default="{ row }">
						<div class="domain-cell">
							<el-tag
								v-for="tag in row.domains"
								:key="tag"
								class="domain-tag"
								effect="plain"
								:disable-transitions="true"
								:style="getTagStyle(tag)"
							>
								{{ tag }}
							</el-tag>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="equityRatio" label="股权占比" width="120" align="center" />
				<el-table-column prop="location" label="上市地点" width="120" align="center" />
				<el-table-column prop="revenue" label="营收(亿元)" width="120" align="center" />
			</el-table>

			<div class="dialog-footer">
				<el-pagination
					v-model:current-page="currentPage"
					v-model:page-size="pageSize"
					:total="totalCount"
					layout="prev, pager, next"
					prev-text="<"
					next-text=">"
					@current-change="handleCurrentChange"
				/>
			</div>
		</div>
	</el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed, watch } from "vue";
import { Close } from "@element-plus/icons-vue";
import defaultIcon from "../../../../../assets/icons/default-avatar.png";

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	companyName: {
		type: String,
		default: ""
	},
	totalCount: {
		type: Number,
		default: 0
	}
});

const emit = defineEmits(["update:modelValue"]);

const visible = computed({
	get: () => props.modelValue,
	set: val => emit("update:modelValue", val)
});

const currentPage = ref(1);
const pageSize = ref(10);

// Mock Data
const tableData = ref([
	{
		id: 1,
		name: "讯飞智元信息科技有限公司",
		domains: ["人工智能"],
		equityRatio: "100%",
		location: "深圳",
		revenue: 325
	},
	{
		id: 2,
		name: "科大讯飞（北京）有限公司",
		domains: ["通信网络", "集成电路"],
		equityRatio: "100%",
		location: "--",
		revenue: 305
	},
	{
		id: 3,
		name: "深圳讯飞智慧科技有限公司",
		domains: ["人工智能"],
		equityRatio: "100%",
		location: "深圳",
		revenue: 325
	},
	{
		id: 4,
		name: "安徽讯飞寰语科技有限公司",
		domains: ["通信网络", "集成电路"],
		equityRatio: "100%",
		location: "--",
		revenue: 305
	},
	{
		id: 5,
		name: "天津讯飞信息科技有限公司",
		domains: ["航空航天"],
		equityRatio: "100%",
		location: "--",
		revenue: 289
	},
	{
		id: 6,
		name: "安徽听见科技有限公司",
		domains: ["人工智能"],
		equityRatio: "100%",
		location: "深圳",
		revenue: 270
	},
	{
		id: 7,
		name: "广州市讯飞樽鸿信息技术有限公司",
		domains: ["航空航天"],
		equityRatio: "69.8%",
		location: "--",
		revenue: 289
	},
	{
		id: 8,
		name: "苏州科大讯飞教育科技有限公司",
		domains: ["人工智能"],
		equityRatio: "66.3%",
		location: "深圳",
		revenue: 270
	},
	{
		id: 9,
		name: "深圳讯飞互动电子有限公司",
		domains: ["人工智能"],
		equityRatio: "57.1%",
		location: "香港",
		revenue: 255
	},
	{
		id: 10,
		name: "讯飞医疗科技股份有限公司",
		domains: ["生物技术"],
		equityRatio: "51%",
		location: "深圳",
		revenue: 270
	}
]);

const handleCurrentChange = val => {
	console.log("Page changed:", val);
};

const tableRowClassName = ({ rowIndex }) => {
	return rowIndex % 2 === 0 ? "odd-row" : "";
};

const getTagStyle = tag => {
	const colorPool = [
		{ color: "#CD4246", background: "rgba(255, 242, 240, 1)", borderColor: "rgba(255, 163, 158, 1)" },
		{ color: "#0E78F1", background: "rgba(230, 244, 255, 1)", borderColor: "rgba(145, 206, 255, 1)" },
		{ color: "#722ED1", background: "rgba(249, 240, 255, 1)", borderColor: "rgba(211, 173, 247, 1)" },
		{ color: "#13A8A8", background: "rgba(230, 255, 251, 1)", borderColor: "rgba(135, 232, 222, 1)" },
		{ color: "#FA8C16", background: "rgba(255, 247, 230, 1)", borderColor: "rgba(255, 213, 145, 1)" },
		{ color: "#52C41A", background: "rgba(246, 255, 237, 1)", borderColor: "rgba(183, 235, 143, 1)" }
	];

	let hash = 0;
	for (let i = 0; i < tag.length; i++) {
		hash = tag.charCodeAt(i) + ((hash << 5) - hash);
	}
	const index = Math.abs(hash) % colorPool.length;
	return colorPool[index];
};
</script>

<style lang="scss" scoped>
.rule-subsidiary-dialog {
	:deep(.el-dialog__header) {
		margin-right: 0;
		padding: 24px;
		border-bottom: 1px solid #edeff2;
	}
	:deep(.el-dialog__body) {
		padding: 0;
	}
}

.dialog-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.left-title {
		display: flex;
		align-items: center;
		.title-icon {
			width: 24px;
			height: 24px;
			margin-right: 8px;
		}
		.company-name {
			font-size: 18px;
			font-weight: 700;
			color: #3b414b;
			margin-right: 8px;
			font-family: "Microsoft YaHei";
		}
		.suffix-text {
			font-size: 18px;
			font-weight: 700;
			color: #3b414b;
			font-family: "Microsoft YaHei";
		}
	}
	.right-actions {
		display: flex;
		align-items: center;
		.right-count {
			font-size: 14px;
			color: #5f656c;
			font-weight: 700;
			font-family: "Microsoft YaHei";
			margin-right: 20px;
			.highlight {
				color: #cd4246;
				margin: 0 4px;
				font-size: 16px;
			}
		}
		.close-btn {
			font-size: 20px;
			color: #909399;
			cursor: pointer;
			transition: color 0.2s;
			&:hover {
				color: #409eff;
			}
		}
	}
}

.dialog-content {
	height: 722px; /* Adjusted to fit total 851px approx with header (65px) and footer (64px) */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0 24px;

	:deep(.el-table) {
		--el-table-header-bg-color: #fff;
		--el-table-border-color: transparent;
		--el-table-row-hover-bg-color: rgba(248, 249, 250, 1);
	}
	:deep(.el-table__inner-wrapper::before) {
		background-color: transparent;
	}
	:deep(.el-table__header-wrapper th) {
		height: 60px;
		background-color: #fff;
		font-size: 16px;
		font-weight: 700;
		color: rgba(59, 65, 75, 1);
		font-family: "Microsoft YaHei";
		border-bottom: 1px solid rgba(230, 231, 232, 1);
	}
	:deep(.el-table__header-wrapper .cell) {
		line-height: 22px;
	}
	:deep(.el-table__row) {
		height: 64px;
	}
	:deep(.el-table__cell) {
		border-bottom: 0;
		font-size: 16px;
		font-weight: 400;
		color: rgb(95, 101, 108);
		font-family: "Microsoft YaHei";
	}
	:deep(.odd-row td.el-table__cell) {
		background-color: rgba(248, 249, 250, 1);
	}

	.entity-name-cell {
		display: flex;
		align-items: center;
		.avatar {
			flex: 0 0 24px;
			margin-right: 9px;
		}
		.name {
			font-size: 16px;
			font-weight: 700;
			color: rgba(59, 65, 75, 1);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.domain-cell {
		display: flex;
		align-items: center;
		gap: 8px;
		:deep(.el-tag) {
			height: auto;
			padding: 2px 8px;
			border-radius: 4px;
			font-size: 14px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 20px;
		}
	}
}

.dialog-footer {
	height: 64px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid #edeff2;

	:deep(.el-pagination) {
		--el-pagination-button-bg-color: #fff;
		--el-pagination-hover-color: #0e78f1;
		--el-pagination-font-size: 14px;

		.el-pager li {
			border: 1px solid #dcdfe6;
			border-radius: 4px;
			margin: 0 4px;
			font-weight: 400;
			color: #5f656c;
			min-width: 32px;
			height: 32px;
			line-height: 30px;

			&.is-active {
				background-color: #0e78f1;
				color: #fff;
				border-color: #0e78f1;
			}

			&:hover:not(.is-active) {
				color: #0e78f1;
				border-color: #0e78f1;
			}
		}

		.btn-prev,
		.btn-next {
			border: 1px solid #dcdfe6;
			border-radius: 4px;
			padding: 0;
			margin: 0 4px;
			min-width: 32px;
			height: 32px;
			line-height: 30px;
			text-align: center;

			&:hover {
				color: #0e78f1;
				border-color: #0e78f1;
			}

			&[disabled] {
				border-color: #e4e7ed;
				color: #c0c4cc;
			}
		}
	}
}
</style>