<template>
	<div class="fix-title is-bg" :style="baseStyle">
		<div class="inner">
			<div class="left">
				<img v-if="left.icon" :src="left.icon" class="icon" />
				<div class="text" :style="{ color: left.color }" :class="[`is-${mode}`]">
					{{ left.text }}
				</div>
			</div>
			<div class="right">
				<span class="text" :style="{ color: right.color }">{{ right.text }}</span>
				<img v-if="right.icon" :src="right.icon" class="icon" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" name="fix-title" setup>
import { ref, computed, type PropType } from "vue";
import { Form } from "../../types/form";

const props = defineProps({
	mode: {
		type: String,
		default: "left"
	},

	left: {
		type: Object as PropType<Form.Title>,
		default: () => {
			return {
				text: "标题内容",
				color: "#000",
				icon: "",
				link: {
					name: "",
					type: "",
					appid: "",
					page: ""
				}
			};
		}
	},
	right: {
		type: Object as PropType<Form.Title>,
		default: () => {
			return {
				text: "查看",
				color: "#a8abb2",
				icon: "",
				link: {
					name: "",
					type: "",
					appid: "",
					page: ""
				}
			};
		}
	},
	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-title {
	box-sizing: border-box;
	overflow: hidden;

	.inner {
		height: 40px;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 10px;
		.left {
			display: flex;
			align-items: center;
			flex: 1;
			.icon {
				margin-right: 10px;
				width: 30px;
				height: 30px;
			}
			.text {
				flex: 1;
				font-size: 16px;
				font-weight: bold;
			}
			.is-left {
				text-align: left;
			}
			.is-center {
				text-align: center;
			}
		}
		.right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.icon {
				margin-left: 10px;
				width: 20px;
				height: 20px;
			}
			.text {
				font-size: 12px;
			}
		}
	}
}
.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>
