<template>
	<div class="fix-list-menu is-bg" :style="baseStyle">
		<div class="inner" v-if="list.length">
			<div
				class="item"
				:class="[`${isBorder ? 'is-border' : ''}`]"
				v-for="(item, index) in list"
				:key="index"
			>
				<div class="left">
					<img v-if="item.icon" :src="item.icon" class="icon" />
					<div class="text" :style="{ color: item.color }">
						{{ item.text }}
					</div>
				</div>
				<div class="right">
					<span class="text">{{ item.text2 }}</span>
					<el-icon color="#a8abb2" style="vertical-align: middle"
						><arrow-right
					/></el-icon>
				</div>
			</div>
		</div>
		<div class="empty" v-else>
			<span>列表导航</span>
		</div>
	</div>
</template>

<script lang="ts" name="fix-list-menu" setup>
import { ref, computed, type PropType } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";

import { Form } from "../../types/form";

const props = defineProps({
	list: {
		type: Array as PropType<Form.Title[]>,
		default: () => {
			return [
				{
					text: "",
					text2: "",
					color: "",
					icon: "",
					link: {
						name: "",
						type: "",
						appid: "",
						page: ""
					}
				}
			];
		}
	},
	isBorder: {
		type: Boolean,
		default: false
	},
	styleSpacing: {
		type: Object as PropType<Form.Spacing>,
		default: () => {
			return {
				marginTop: 0,
				marginBottom: 0,
				marginLR: 0,
				padding: 0,
				borderTopLR: 0,
				borderBottomLR: 0
			};
		}
	},
	styleColor: {
		type: Object as PropType<Form.Color>,
		default: () => {
			return {
				color: "#000",
				backgroundColor: "#FFFFFF",
				opacity: 1
			};
		}
	}
});
const baseStyle = computed(() => {
	return {
		margin: `${props.styleSpacing.marginTop / 2}px ${props.styleSpacing.marginLR / 2}px ${props.styleSpacing.marginBottom / 2}px ${props.styleSpacing.marginLR / 2}px`,
		color: props.styleColor.color,
		padding: `${props.styleSpacing.padding / 2}px`,
		"--opacity": props.styleColor.opacity,
		"--background": props.styleColor.backgroundColor,
		borderRadius: `${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderBottomLR / 2}px  ${props.styleSpacing.borderBottomLR / 2}px`
	};
});
</script>

<style lang="scss" scoped>
.fix-list-menu {
	box-sizing: border-box;
	overflow: hidden;
	.empty {
		height: 150px;
		display: flex;
		justify-content: center;
		align-items: center;
		span {
			font-size: 26px;
			color: var(--el-text-color-placeholder);
		}
	}
	.inner {
		.is-border {
			border-bottom: 1px solid var(--el-border-color-light);
		}
		.is-border:last-child {
			border-bottom: none;
		}
		.item {
			height: 40px;
			padding: 6px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-right: 20px;
				.icon {
					margin-right: 6px;
					width: 25px;
					height: 25px;
				}
				.text {
					width: 220px;
					height: 30px;
					line-height: 30px;
					font-size: 16px;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
			.right {
				width: 80px;
				height: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.text {
					color: var(--el-text-color-placeholder);
					font-size: 12px;
					margin-right: 4px;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}
	}
}
.is-bg {
	position: relative;
	z-index: 1; /* 确保 .is-bg 及其子元素位于 ::after 伪元素的上层 */
}
.is-bg::after {
	content: "";
	background-color: var(--background);
	opacity: var(--opacity);
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	pointer-events: none;
}
</style>
