<template>
	<!-- 副标题根容器，左侧带装饰边框线，lineStyle 控制边框颜色 -->
	<div class="cy-sub-title" :style="lineStyle">
		<!-- 左侧主标题区：默认插槽展示 title 文本 -->
		<div class="left">
			<slot>{{ title }}</slot>
		</div>
		<!-- 右侧操作区：用于放置按钮等自定义内容 -->
		<div class="right">
			<slot name="right"></slot>
		</div>
	</div>
</template>

<script>
export default {
	name: 'CySubTitle',
	props: {
		// 标题文本
		title: {
			type: String,
			default: ''
		},
		// 左侧装饰边框线的颜色（传入后通过 lineStyle 应用到边框）
		lineColor: {
			type: String,
			default: ''
		}
	},
	computed: {
		/**
		 * 根据 lineColor 生成左边框颜色样式；未传入时返回空对象
		 * @returns {Object} 包含 borderLeftColor 的样式对象或空对象
		 */
		lineStyle() {
			if (this.lineColor) {
				return {
					borderLeftColor: this.lineColor
				};
			}
			return {};
		}
	}
};
</script>
