<template>
	<view class="workbench-container">
		<view class="workbench-header">
			<view class="workbench-topbg"></view>
			<!-- 顶部蓝色背景和搜索栏 -->
			<view class="workbench-search-row">
				<view class="search-bar">
					<image class="search-icon" src="/static/ic_search_gray.png"/>
					<input class="search-input" placeholder="搜索" />
				</view>
				<text class="search-btn">搜索</text>
			</view>

			<!-- banner 区域 -->
			<view class="workbench-banner">
				<image class="banner-img" src="/static/workbench_banner.png" mode="aspectFill" />
			</view>
		</view>
		<!-- 常用应用九宫格 -->
		<view class="workbench-grid">
			<view class="grid-item" v-for="(item, idx) in commonApps" :key="idx">
				<image :src="item.icon" class="grid-icon" />
				<text class="grid-text">{{ item.text }}</text>
			</view>
		</view>
		<!-- 全部应用 -->
		<view >
			<view class="all-apps-title">全部应用</view>
			<view class="all-apps-tabs">
				<text v-for="(tab, idx) in tabs" :key="idx" :class="['tab', {active: idx === activeTab}]"
					@click="activeTab = idx">{{ tab }}</text>
			</view>
			<view class="line"></view>
			<view class="workbench-grid">
				<view class="grid-item" v-for="(item, idx) in allApps[activeTab]" :key="idx">
					<image :src="item.icon" class="grid-icon" />
					<text class="grid-text">{{ item.text }}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'Workbench',
		data() {
			return {
				commonApps: [
					{ icon: 'https://picsum.photos/80/80?random=3', text: '审批' },
					{ icon: 'https://picsum.photos/80/80?random=3', text: '假勤' },
					{ icon: 'https://picsum.photos/80/80?random=3', text: '工单' },
					{ icon: 'https://picsum.photos/80/80?random=3', text: '停车' },
					{ icon: 'https://picsum.photos/80/80?random=3', text: '保洁' },
					{ icon: 'https://picsum.photos/80/80?random=3', text: '邀约' },
					{ icon: 'https://picsum.photos/80/80?random=3', text: '会议' },
					{ icon: 'https://picsum.photos/80/80?random=3', text: '添加常用' }
				],
				tabs: ['最近使用', 'OA 管理', '敏捷开发', '协同办公'],
				activeTab: 0,
				allApps: [
					// 最近使用
					[
						{ icon: 'https://picsum.photos/80/80?random=3', text: '文档' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '表格' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: 'PPT' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '笔记' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '录音' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '云打印' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '智能门禁' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '易企秀H5' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '多维表格' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '问卷网' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '集客云' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '收票宝' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '图表' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '消息' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '沟通' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '' }
					],
					// OA 管理
					[
						{ icon: 'https://picsum.photos/80/80?random=3', text: '文档' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '表格' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: 'PPT' }
					],
					// 敏捷开发
					[
						{ icon: 'https://picsum.photos/80/80?random=3', text: '集客云' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '问卷网' }
					],
					// 协同办公
					[
						{ icon: 'https://picsum.photos/80/80?random=3', text: '笔记' },
						{ icon: 'https://picsum.photos/80/80?random=3', text: '沟通' }
					]
				]
			}
		}
	}
</script>

<style scoped>
	.workbench-container {
		min-height: 100vh;
		background: #fff;
		padding-bottom: 120rpx;
		display: flex;
		flex-direction: column;
	}

	.workbench-header {
		position: relative;
		height: 463rpx;
		width: 100vw;
		margin-bottom: -40rpx;
		flex-shrink: 0;
	}

	.workbench-topbg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 463rpx;
		background-image: linear-gradient(to bottom, #075EED, #FFFFFF);
		z-index: 0;
	}

	.workbench-search-row {
		position: relative;
		z-index: 3;
		display: flex;
		align-items: center;
		color: #fff;
		padding: 80rpx 44rpx 0 34rpx;
	}

	.search-bar {
		flex: 1;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 30rpx;
		padding: 0 20rpx;
		height: 56rpx;
	}

	.search-icon {
		width: 27rpx;
		height: 27rpx;
		margin-right: 8rpx;
	}

	.search-input {
		border: none;
		font-size: 26rpx;
		flex: 1;
		color: #000;
	}

	.search-btn {
		color: #fff;
		font-size: 30rpx;
		margin-left: 10rpx;
	}

	.workbench-banner {
		width: 92vw;
		height: 140rpx;
		margin: 0 auto 20rpx auto;
		border-radius: 20rpx;
		overflow: hidden;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.banner-img {
		width: 100%;
		height: 140rpx;
		border-radius: 20rpx;
	}

	.workbench-grid {
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		border-radius: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.grid-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.grid-icon {
		width: 98rpx;
		height: 98rpx;
		margin-bottom: 20rpx;
	}

	.grid-text {
		font-size: 24rpx;
		color: #1D1D1D;
		font-weight: 500;
	}


	.all-apps-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 33rpx;
		margin-left: 35rpx;
	}

	.all-apps-tabs {
		display: flex;
		align-items: center;
		padding-left: 54rpx;
		padding-right: 54rpx;
	}

	.tab {
		font-size: 24rpx;
		color: #999;
		margin-right: 32rpx;
		padding-bottom: 6rpx;
		border-bottom: 4rpx solid transparent;
	}

	.tab.active {
		color: #2e6cf6;
		border-bottom: 4rpx solid #2e6cf6;
	}

	.all-apps-grid {
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		border-radius: 20rpx;
		padding: 0 54rpx 0 54rpx;
	}
	.line{
		background: #DCDCDC;
		height: 2rpx;
		margin-bottom: 40rpx;
	}
</style>