<template>
	<div class="container">
		<!-- tab切换 -->
		<div class="tab" ref="tabHeader">
			<div v-for="(item, index) in tab" @click="changeTab(index)" :key="index" class="tab_children"
				:class="{ active: item.check }">
				{{ item.name }}
			</div>
		</div>

		<!-- 内容区域（动态高度） -->
		<div class="content" :style="{ height: tableHeight + 'px', overflow: 'auto' }">
			<div v-if="currentTab === 'system'">系统参数内容</div>
			<div v-else-if="currentTab === 'charge_sate'">充电费率内容</div>
			<div v-else-if="currentTab === 'invoice'">发票配置内容</div>
		</div>

		<!-- 固定在底部的提交按钮 -->
		<div class="footer">
			<Button type="primary" @click="submitForm">提交</Button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				tableHeight: 500, // 初始高度，单位px
				currentTab: 'system',
				tab: [{
						type: 'system',
						name: '系统参数',
						check: true,
					},
					{
						type: 'charge_sate',
						name: '充电费率',
						check: false,
					},
					{
						type: 'invoice',
						name: '发票配置',
						check: false,
					},
				],
			}
		},
		mounted() {
			this.calculateTableHeight()
			window.addEventListener('resize', this.calculateTableHeight)
			// 添加防抖处理，避免频繁计算
			this.debouncedCalculate = this.$utils.debounce(this.calculateTableHeight, 100)
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.debouncedCalculate)
		},
		methods: {
			calculateTableHeight() {
				try {
					const container = this.$el
					const tabHeader = this.$refs.tabHeader
					const footer = container.querySelector('.footer')

					if (!container || !tabHeader || !footer) return

					// 计算可用高度 = 容器高度 - tab高度 - footer高度 - 内边距
					const containerHeight = container.clientHeight
					const tabHeight = tabHeader.offsetHeight
					const footerHeight = footer.offsetHeight
					const padding = 40 // 上下内边距总和

					this.tableHeight = containerHeight - tabHeight - footerHeight - padding

					// 设置最小高度，避免内容区域太小
					this.tableHeight = Math.max(this.tableHeight, 200)
				} catch (e) {
					// console.error('计算高度出错:', e)
				}
			},
			handleClose() {
				this.show = false
			},
			changeTab(index) {
				this.tab.forEach((item, i) => {
					item.check = i === index
				})
				this.currentTab = this.tab[index].type
			},
			submitForm() {
				// console.log('提交表单')
			},
		},
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
		position: relative;
	}

	.tab {
		display: flex;
		align-items: center;
		flex-direction: row;
		gap: 10px;
		margin-bottom: 20px;
	}

	.tab_children {
		padding: 8px 16px;
		background: #ccc;
		color: #000;
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.3s;
	}

	.tab_children:hover {
		background: #bbb;
	}

	.active {
		color: #fff;
		background-color: #409eff;
	}

	.content {
		padding: 20px;
		border: 1px solid #eee;
		border-radius: 4px;
		margin-bottom: 20px;
		flex-shrink: 0;
		/* 防止内容区域被压缩 */
	}

	.footer {
		position: sticky;
		bottom: 0;
		background: white;
		padding: 15px 0;
		text-align: center;
		border-top: 1px solid #eee;
		z-index: 10;
	}
</style>