<template>
	<view class="container">
		<!-- 顶部Tab切换 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: activeTab === 'department' }" @click="switchTab('department')">
				单位预约 </view>
			<view class="tab-item" :class="{ active: activeTab === 'person' }" @click="switchTab('person')"> 个人预约
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input-wrap">
				<view class="search-icon"></view>
				<input class="search-input" v-model="searchKeyword" clearable placeholder="请输入关键字搜索"
					placeholder-class="placeholder-class" @confirm="handleSearch" />
			</view>
			<button class="search-btn" @click="handleSearch">搜索</button>
		</view>

		<!-- 部门列表 -->
		<!-- <view class="list-container">
			<view v-if="departmentList.length > 0">
				<view class="list-item" v-for="(item, index) in departmentList" :key="index"
					@click="handleDeptClick(item)">
					<view class="item-left">
						<view class="dot"></view>
						<text class="item-text">{{ item.deptName }}</text>
					</view>
					<view class="arrow"></view>
				</view>
			</view>
			<view v-else class="empty-tip">暂无事项数据</view>
		</view> -->

		<!-- 事项列表 -->
		<view class="list-container">
			<view v-if="itemList.length > 0">
				<view class="list-item" v-for="(item, index) in itemList" :key="index" @click="handleItemClick(item)">
					<view class="item-left">
						<view class="dot"></view>
						<text class="item-text">{{ item.name }}</text>
					</view>
					<view class="arrow"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deptList,
		itemList
	} from '@/api/reserve.js'

	export default {
		data() {
			return {
				activeTab: 'department', // 当前激活的Tab：department-部门预约，person-事项预约
				searchKeyword: '', // 搜索关键词
				deptId: '',
				// 部门列表（和设计图完全一致）
				departmentList: [],
				itemList: [],
				type: 2 // 1个人, 2单位
			}
		},
		onLoad(option) {
			if (option.id) {
				this.deptId = option.id
				// this.switchTab('person')
			} else {
				// this.getDeptList()
			}
			this.getItemList()
		},
		methods: {
			// Tab切换
			switchTab(tab) {
				if (this.activeTab === tab) return

				if (tab == 'department') {
					// this.getDeptList()
					this.type = 2
				} else {
					this.type = 1
				}
				this.activeTab = tab
				this.searchKeyword = '' // 切换Tab清空搜索
				this.getItemList()
				// this.deptId = ''
			},
			// 搜索事件
			handleSearch() {
				// if (this.activeTab == 'department') {
				// 	// this.getDeptList()
				// } else {}
				this.getItemList()
			},
			// 部门列表项点击事件
			handleDeptClick(item) {
				this.deptId = item.id
				this.switchTab('person')
			},
			// 事项列表项点击事件
			handleItemClick(item) {
				const data = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/reserve/notice?data=${encodeURIComponent(data)}`
				})
			},
			// 获取部门列表
			getDeptList() {
				let params = {
					size: 10,
					current: 1,
					status: 1,
					deptName: this.searchKeyword
				}
				deptList(params).then(res => {
					if (res.code === 200) {
						this.departmentList = res.data.records.filter(item => item.parentId != 0)
					}
				})
			},
			// 获取事项列表
			getItemList() {
				// type:1个人, 2单位
				let params = {
					size: 10,
					current: 1,
					status: 1,
					// deptId: this.deptId || '',
					itemType: this.type,
					name: this.searchKeyword
				}
				itemList(params).then(res => {
					if (res.code === 200) {
						this.itemList = res.data.records
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	/* 全局容器 */
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	}

	/* Tab栏 */
	.tab-bar {
		display: flex;
		background-color: #ffffff;
		height: 90rpx;
		line-height: 90rpx;
		position: relative;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		position: relative;
	}

	.tab-item.active {
		color: #409eff;
		font-size: 36rpx;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 120rpx;
		height: 6rpx;
		background-color: #409eff;
		border-radius: 3rpx;
	}

	/* 搜索栏 */
	.search-bar {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #f5f5f5;
		gap: 20rpx;
	}

	.search-input-wrap {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-radius: 50rpx;
		height: 70rpx;
		padding: 0 30rpx;
	}

	.search-icon {
		width: 32rpx;
		height: 32rpx;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999999"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
		background-size: contain;
		background-repeat: no-repeat;
		margin-right: 20rpx;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 30rpx;
		color: #333333;
		background: transparent;
		border: none;
		outline: none;
	}

	.placeholder-class {
		color: #999999;
		font-size: 30rpx;
	}

	.search-btn {
		width: 140rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: linear-gradient(to left, rgba(49, 134, 255, 1), rgba(21, 167, 255, 1));
		color: #ffffff;
		border-radius: 50rpx;
		font-size: 30rpx;
		font-weight: 500;
		border: none;
		padding: 0;
	}

	/* 列表容器 */
	.list-container {
		padding: 0 30rpx;
	}

	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 16rpx;
	}

	.item-left {
		display: flex;
		align-items: center;
	}

	.dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background: linear-gradient(to bottom, rgba(49, 134, 255, 1), rgba(21, 167, 255, 1));
		margin-right: 16rpx;
	}

	.item-text {
		font-size: 34rpx;
		color: #333333;
		font-weight: 500;
	}

	.arrow {
		width: 16rpx;
		height: 16rpx;
		border-right: 4rpx solid #165dff;
		border-top: 4rpx solid #165dff;
		transform: rotate(45deg);
	}

	/* 空状态提示 */
	.empty-tip {
		text-align: center;
		padding: 100rpx 0;
		font-size: 28rpx;
		color: #999999;
	}
</style>