<template>
	<view class="home-page">
		<!-- 顶部用户信息 -->
		<view class="home-header">
			<view class="home-user-row" @click="goUserInfo">
				<view class="home-avatar">
					<text class="home-avatar-text">{{avatarText}}</text>
				</view>
				<view class="home-user-info">
					<text class="home-user-name">{{welTitle}}</text>
					<text class="home-date">{{currentDate}}</text>
				</view>
			</view>
		</view>

		<!-- 统计卡片 -->
		<view class="stat-section">
			<navigator class="stat-card" url="../wf/index?category=duty" hover-class="stat-card-hover">
				<view class="stat-card-head">
					<text class="stat-card-title tc-green">待办</text>
					<text class="stat-card-icon-r">📋</text>
				</view>
				<view class="stat-card-body">
					<text class="stat-card-num">{{duty_count}}</text>
					<text class="stat-card-unit">条</text>
				</view>
			</navigator>
			<navigator class="stat-card" url="../wf/index?category=owner" hover-class="stat-card-hover">
				<view class="stat-card-head">
					<text class="stat-card-title tc-blue">我的</text>
					<text class="stat-card-icon-r">📁</text>
				</view>
				<view class="stat-card-body">
					<text class="stat-card-num">{{owner_count}}</text>
					<text class="stat-card-unit">项</text>
				</view>
			</navigator>
		</view>

		<!-- 常用流程 -->
		<view class="flow-section">
			<view v-for="group in wfOptions" :key="group.category" class="flow-group">
				<view class="section-header">
					<view class="section-title">
						<view class="section-dot"></view>
						<text>{{ group.category }}</text>
					</view>
				</view>
				<view class="flow-grid">
					<view class="flow-grid-item" v-for="(item, index) in group.items" :key="index" @click="pageEnter(item)" hover-class="flow-item-hover">
						<view class="flow-icon-wrap" :class="'flow-icon-c' + (index % 3)">
							<image class="flow-icon" :src="item.icon_path?item.icon_path:'/static/yuding.png'" mode="aspectFill" />
						</view>
						<text class="flow-name">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tool from "../../utils/tools.js";
	import { auth } from '@/utils/auth.js'
	export default {
		data() {
			return {
				welTitle: "",
				avatarText: "",
				imageSrc:"",
				currentDate: tool.getTodayDate(),
				wfOptions: [],
				duty_count: 0,
				owner_count: 0
			}
		},
		mounted() {
			this.initWelTitle();
			this.getWfOptions();
		},
		onShow() {
			// #ifdef MP-WEIXIN
			uni.hideHomeButton()
			// #endif
			this.getTicketCount();
		},
		methods: {
			getTicketCount() {
				this.$api.getTicket({category:"duty", page:1, page_size:1}).then(res=>{
					this.duty_count = res.count;
				})
				this.$api.getTicket({category:"owner", page:1, page_size:1}).then(res=>{
					this.owner_count = res.count;
				})
			},
			getWfOptions() {
				let permissions = auth.getPermissions();
				const groups = {};
				this.$api.getWorkflow({ page: 0 }).then((res) => {
					res.forEach((item) => {
						if(item.key && permissions.includes(item.key)) {
							let cate = item.cate;
							if (!cate){cate="未分组"}
							if (!groups[cate]) {
								groups[cate] = [];
							}
							groups[cate].push(item);
						}
					})
					// 转换为数组形式，便于模板遍历
				this.wfOptions =  Object.keys(groups).map(category => ({
					category,
					items: groups[category]
				}));
				});
			},
			initWelTitle() {
				let userInfo = uni.getStorageSync("userInfo")
				let name = userInfo.name;
				this.welTitle = `${name}，您好！`
				this.avatarText = name ? name.slice(-2) : '👤'
			},
			goUserInfo() {
				uni.navigateTo({
					url: "/pages/system/userInfo"
				})
			},
			pageEnter(item){
				const viewPath = item.view_path;
				let view_path = item.view_path2?item.view_path2:item.view_path;
				uni.navigateTo({
					url:`/pages${view_path}?mode=add`
				}).catch(e=>{
					console.log(e)
					if (e.errMsg.indexOf("not found")!=-1){
						uni.showToast({
							title: '该页面暂未完成',
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
.home-page {
	min-height: 100vh;
	background: #F5F7FA;
	padding-bottom: 40rpx;
}

// ========== 顶部用户信息 ==========
.home-header {
	background: #FFFFFF;
	padding: 28rpx 32rpx;
	margin-bottom: 0;
}

.home-user-row {
	display: flex;
	align-items: center;
}

.home-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #2BA471, #48C68B);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.home-avatar-text {
	color: #FFFFFF;
	font-size: 28rpx;
	font-weight: 700;
}

.home-user-info {
	display: flex;
	flex-direction: column;
}

.home-user-name {
	font-size: 32rpx;
	font-weight: 700;
	color: #1A2E25;
}

.home-date {
	font-size: 24rpx;
	color: #999;
	margin-top: 4rpx;
}

// ========== 统计卡片 ==========
.stat-section {
	display: flex;
	gap: 0;
	padding: 0;
}

.stat-card {
	flex: 1;
	background: #FFFFFF;
	border-radius: 0;
	padding: 24rpx;
	text-decoration: none;
}

.stat-card-hover {
	opacity: 0.96;
	transform: scale(0.98);
}

.stat-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.stat-card-title {
	font-size: 26rpx;
	font-weight: 700;
}

.tc-green { color: #2BA471; }
.tc-blue { color: #3594E6; }

.stat-card-icon-r {
	font-size: 36rpx;
	opacity: 0.5;
}

.stat-card-body {
	display: flex;
	align-items: baseline;
}

.stat-card-num {
	font-size: 60rpx;
	font-weight: 800;
	color: #1A2E25;
	line-height: 1;
	margin-right: 8rpx;
}

.stat-card-unit {
	font-size: 24rpx;
	color: #999;
}

// ========== 常用流程 ==========
.flow-section {
	padding: 0;
}

.flow-group {
	background: #FFFFFF;
	border-radius: 0;
	padding: 32rpx 24rpx;
	margin-bottom: 0;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
	padding: 0 8rpx;
}

.section-title {
	display: flex;
	align-items: center;
	font-size: 32rpx;
	font-weight: 700;
	color: #1A2E25;
}

.section-dot {
	width: 8rpx;
	height: 36rpx;
	background: #2BA471;
	border-radius: 4rpx;
	margin-right: 16rpx;
}

.flow-grid {
	display: flex;
	flex-wrap: wrap;
}

.flow-grid-item {
	width: 33.33%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16rpx 0;
	margin-bottom: 8rpx;
}

.flow-item-hover {
	opacity: 0.6;
}

.flow-icon-wrap {
	width: 96rpx;
	height: 96rpx;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14rpx;
}

// 三色循环
.flow-icon-c0 { background: #C6EADA; }
.flow-icon-c1 { background: #C4DEFF; }
.flow-icon-c2 { background: #FFE0C8; }

.flow-icon {
	width: 48rpx;
	height: 48rpx;
}

.flow-name {
	font-size: 24rpx;
	color: #444;
	text-align: center;
	line-height: 1.4;
}
</style>
