<script setup lang="ts">
	import { h, ref, onMounted } from 'vue';

	import {
		Descriptions,
		DescriptionsItem,
	} from 'ant-design-vue';
	import {
		Card, Tag, Empty, Tabs, TabPane
	} from 'ant-design-vue';
	import { WalletOutlined, MoneyCollectOutlined, TransactionOutlined } from '@ant-design/icons-vue';

	import {
		housingList,
		housingInfo
	} from '#/api/biz/housing';
	import type { HousingForm } from '#/api/biz/housing/model';

	const dbLoading = ref(false);
	const housingData = ref<HousingForm[]>([]);
	const housingOne = ref<HousingForm>();

	function handleView(row : Required<HousingForm>) {
		housingOne.value = row;
	}

	// --- 获取数据 ---
	async function getList() {
		if (dbLoading.value) return;
		dbLoading.value = true;
		try {
			const res = await housingList({ pageNum: 1, pageSize: 1000, userId: -1 });
			housingData.value = res.rows;
			if (housingData.value.length>0){
				handleView(housingData.value[0]);
			}
		} catch (error) {
			console.error('获取工资明细失败', error);
		} finally {
			dbLoading.value = false;
		}
	}

	function fAmount(amount : any, type = 0) {
		if (isNaN(amount) || amount === null || amount === '') return '0.00'
		const n = parseFloat(amount).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
		if (type != 1) {
			return '￥' + n;
		} else {
			return '-￥' + n;
		}
	}

	onMounted(() => {
		getList();
	});
</script>

<template>
	<Page :auto-content-height="true">
		<div class="p-5">
		<div v-if="housingData.length > 0">
		<Tabs class="bg-background rounded-[var(--radius)] px-[16px] lg:flex-1 todo-grid">
		    <TabPane  v-for="item in housingData" :key="item.id">
				<template #tab>
					<div 
						:class="[item.id == housingOne?.id ? 'todo-item todo-item-on' : 'todo-item']"
						@click="handleView(item)">
						<!-- 卡片上部：标签+时间 -->
						<div class="item-top">
							<Tag color="blue" class="custom-tag">
								{{ item.salaryYearMonth }}
							</Tag>
						</div>
						<!-- 卡片中部：标题 -->
						<div class="item-title">
							￥{{ item.actualSalary }}
						</div>
					</div>
				</template>
		    </TabPane>
		</Tabs>
		</div>
		<Empty
		  v-else 
		  :description="暂无数据" 
		  :image="Empty.PRESENTED_IMAGE_SIMPLE" 
		/>
		
		<Card class="w-full" style="margin-top:15px;" v-if="housingOne?.salaryYearMonth">
			<template #title>
				<span>住房提租补贴明细 - {{housingOne.salaryYearMonth}}</span>
			</template>

			<div class="w-full md:flex">
				
				<Card class=" md:mt-0 md:w-1/3" :bodyStyle="{ padding: '10px' }">
					<template #title>
						<span style="color: #1677ff; font-size: 18px;"><wallet-outlined />&nbsp;住房提租补贴汇总</span>
					</template>
					<Descriptions :column="1" bordered size="small" :labelStyle="{ width: '140px' }"
						:contentStyle="{ textAlign: 'right' }">
						<DescriptionsItem label="银行卡号">
							{{ housingOne.bankCard }}
						</DescriptionsItem>
						<DescriptionsItem label="住房提租补贴">
							{{ fAmount(housingOne.housingAllowance) }}
						</DescriptionsItem>
						<DescriptionsItem label="增发">
							{{ fAmount(housingOne.increasePay) }}
						</DescriptionsItem>
						<DescriptionsItem label="减发" :contentStyle="{ color: '#F33' }">
							{{ fAmount(housingOne.reducePay, 1) }}
						</DescriptionsItem>
						<DescriptionsItem label="实发" :contentStyle="{ color: 'green', fontSize: '24px', fontWeight: 'blod' }">
							{{ fAmount(housingOne.actualSalary) }}
						</DescriptionsItem>

					</Descriptions>
				</Card>
			</div>
		</Card>
		</div>
	</Page>
</template>

<style lang="scss" scoped>
	/* 变量定义 */
	$primary-color: #1677ff;
	$text-main: #1f1f1f;
	$text-secondary: #8c8c8c;
	$border-color: #f0f0f0;

	.page-container {
		margin: 0 auto;
	}

	.main-card {
		border-radius: 12px;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);

		:deep(.ant-card-head) {
			border-bottom: 1px solid $border-color;
			padding: 0 24px;
			min-height: 72px;
			/* 增加头部高度以容纳控件 */
		}
	}

	/* 头部布局 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		/* 小屏幕自动换行 */
		gap: 16px;
		padding: 8px 0;
	}

	.header-left {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.header-title {
		font-size: 18px;
		font-weight: 600;
		color: $text-main;
	}

	.header-subtitle {
		font-size: 13px;
		color: $text-secondary;
		font-weight: normal;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.filter-group {

		/* 调整 Radio Button 样式使其更精致 */
		:deep(.ant-radio-button-wrapper) {
			border-radius: 0;

			&:first-child {
				border-radius: 6px 0 0 6px;
			}

			&:last-child {
				border-radius: 0 6px 6px 0;
			}
		}
	}

	.header-count-wrapper {
		display: flex;
		align-items: baseline;
		background-color: #f5f7fa;
		padding: 6px 16px;
		border-radius: 20px;

		.count-label {
			font-size: 13px;
			color: #666;
		}

		.count-value {
			font-size: 18px;
			font-weight: 700;
			color: $primary-color;
			margin: 0 4px;
			font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		}
	}

	/* Grid 列表 */
	// .todo-grid {
	// 	display: grid;
	// 	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	// 	gap: 20px;
	// }

	/* 卡片样式 */
	.todo-item {
		position: relative;
		background: #fff;
		border: 1px solid $border-color;
		border-radius: 10px;
		padding: 10px 10px;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		flex-direction: column;
		margin-bottom: 5px;
		width:140px;

		&:hover {
			transform: translateY(-4px);
			box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05);
			border-color: $primary-color;

			.hover-arrow {
				opacity: 1;
				right: 12px;
			}
		}
	}

	.todo-item-on {
		box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05);
		border-color: $primary-color;
		border-bottom-width: 5px;
		margin-bottom: 0px;
		background-color: #f3f3f3;
		
	}

	.item-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;

		.item-time {
			font-size: 12px;
			color: $text-secondary;
			display: flex;
			align-items: center;

			/* 如果是今天，时间高亮显示 */
			&.is-today {
				color: $primary-color;
				font-weight: 500;
			}
		}
	}

	.custom-tag{
		font-size: 16px;
		font-weight:500;
	}
	.item-title {
		font-size: 20px;
		font-weight: 500;
		color: $text-main;
		line-height: 1.6;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: 5px;
	}

	.item-divider {
		height: 1px;
		background: #f5f5f5;
		margin-bottom: 12px;
	}

	.item-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
		color: $text-secondary;

		.info-group {
			display: flex;
			align-items: center;
			gap: 6px;
			max-width: 60%;
		}

		.user-group {
			max-width: 35%;
			justify-content: flex-end;
		}

		.text-truncate {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.icon-mr {
		margin-right: 4px;
	}

	.icon-gray {
		color: #bfbfbf;
	}

	.hover-arrow {
		position: absolute;
		bottom: 16px;
		right: -20px;
		color: $primary-color;
		opacity: 0;
		transition: all 0.3s;
	}

	/* 移动端适配 */
	@media (max-width: 640px) {
		.card-header {
			flex-direction: column;
			align-items: flex-start;
		}

		.header-right {
			width: 100%;
			justify-content: space-between;
		}

		.todo-grid {
			grid-template-columns: 1fr;
		}
	}
	.ant-tabs-tab{
		margin:0 0 0 16px;
	}
</style>