<template>
	<view class="page">
	<!-- 自定义导航栏 -->
	<custom-navbar
		title="绿纤协同平台" 
		:show-background="true"
		background-image="https://zhgw.028wlkj.com/cdwlMall/zsfwzxt/test/file/static/bg.png"
		@height-change="handleNavbarHeightChange"
	></custom-navbar>
	<view class="warpbox">
		
		<view :style="{'height': contentTopMargin}"></view>
		<!-- 业务操作板块 -->
		<view class="warpboxss" style="box-shadow:none;">
			<view class="warpboxs-small-title" :style="isshow1?'padding-bottom: 30rpx;':''" @click="isshow1=!isshow1">
				<view><text class="warpboxs-small-title-line"></text>业务操作</view>
				<view class="warpboxs-small-title-img">
					<u-icon name="arrow-down" size="20" color="#666"
						:style="isshow1?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
				</view>
			</view>
			<view v-show="isshow1">
				<view class="fun_box_fir">
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/lx/lx')">
						<view class="icon icon-circle-bg-1">
							<image src="/static/home/order.png" mode="heightFix"></image>
						</view>
						<view>开单</view>
					</view>
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/lx/lx?type=1')">
						<view class="icon icon-circle-bg-3">
							<image src="/static/home/activity-order.png" mode="heightFix"></image>
						</view>
						<view>活动开单</view>
					</view>
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border"
						@click="goToPage('/pages/member-consume/member-consume')">
						<view class="icon icon-circle-bg-2">
							<image src="/static/home/consume-card.png" mode="heightFix"></image>
						</view>
						<view>耗卡</view>
					</view>
				</view>
				<view class="fun_box_fir">
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/refund/refund')">
						<view class="icon icon-circle-bg-4">
							<image src="/static/home/refund-card.png" mode="heightFix"></image>
						</view>
						<view>退卡</view>
					</view>
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border"
						@click="goToPage('/pages/transferCard/transferCard')">
						<view class="icon icon-circle-bg-5">
							<image src="/static/home/transfer-card.png" mode="heightFix"></image>
						</view>
						<view>转卡</view>
					</view>
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border"
						@click="goToPage('/pages/member-create/member-create')">
						<view class="icon icon-circle-bg-6">
							<image src="/static/home/create-member.png" mode="heightFix"></image>
						</view>
						<view>建档</view>
					</view>
				</view>
				<view class="fun_box_fir">
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/expansion/expansion')">
						<view class="icon icon-circle-bg-7">
							<image src="/static/home/expansion.png" mode="heightFix"></image>
						</view>
						<view>拓客</view>
					</view>
					<view v-if="iskjb" class="fun_fir_1 fun_fir_border"
						@click="goToPage('/pages/lx/lx?time=2025-10-01')">
						<view class="icon icon-circle-bg-8">
							<image src="/static/home/dingxuan-order.png" mode="heightFix"></image>
						</view>
						<view>鼎轩开单</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 会员管理板块 -->
		<view class="warpboxss">
			<view class="warpboxs-small-title" :style="isshow2?'padding-bottom: 30rpx;':''" @click="isshow2=!isshow2">
				<view><text class="warpboxs-small-title-line"></text>会员管理</view>
				<view class="warpboxs-small-title-img">
					<u-icon name="arrow-down" size="20" color="#666"
						:style="isshow2?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
				</view>
			</view>
			<view v-show="isshow2">
				<view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/clue-list/clue-list')">
						<view class="icon icon-circle-bg-9">
							<image src="/static/home/member.png" mode="heightFix"></image>
						</view>
						<view>会员</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 采购报销板块 -->
		<view class="warpboxss">
			<view class="warpboxs-small-title" :style="isshow3?'padding-bottom: 30rpx;':''" @click="isshow3=!isshow3">
				<view><text class="warpboxs-small-title-line"></text>采购报销</view>
				<view class="warpboxs-small-title-img">
					<u-icon name="arrow-down" size="20" color="#666"
						:style="isshow3?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
				</view>
			</view>
			<view v-show="isshow3">
				<view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/purchase-list/purchase-list')">
						<view class="icon icon-circle-bg-10">
							<image src="/static/home/purchase.png" mode="heightFix"></image>
						</view>
						<view>物品购买</view>
					</view>
					<view class="fun_fir_1 fun_fir_border"
						@click="goToPage('/pages/reimbursement-list/reimbursement-list')">
						<view class="icon icon-circle-bg-12">
							<image src="/static/home/reimbursement-apply.png" mode="heightFix"></image>
						</view>
						<view>报销申请</view>
					</view>
					<view
						v-if="newuserInfo.gw == '董事长' || newuserInfo.gw == '总裁' || newuserInfo.gw == '总经理' || newuserInfo.gw == '主管' || newuserInfo.mobilePhone == '18884847552' || newuserInfo.mobilePhone == '17882512738' || newuserInfo.mobilePhone == '18588888888'"
						class="fun_fir_1 fun_fir_border"
						@click="goToPage('/pages/reimbursement-audit-list/reimbursement-audit-list')">
						<view class="icon icon-circle-bg-11">
							<image src="/static/home/reimbursement-audit.png" mode="heightFix"></image>
						</view>
						<view>报销审核</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 记录查询板块 -->
		<view class="warpboxss">
			<view class="warpboxs-small-title" :style="isshow4?'padding-bottom: 30rpx;':''" @click="isshow4=!isshow4">
				<view><text class="warpboxs-small-title-line"></text>记录查询</view>
				<view class="warpboxs-small-title-img">
					<u-icon name="arrow-down" size="20" color="#666"
						:style="isshow4?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
				</view>
			</view>
			<view v-show="isshow4">
				<view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/usage-list/usage-list')">
						<view class="icon icon-circle-bg-13">
							<image src="/static/home/usage-record.png" mode="heightFix"></image>
						</view>
						<view>使用记录</view>
					</view>
					<view class="fun_fir_1 fun_fir_border"
						@click="goToPage('/pages/laundry-flow-list/laundry-flow-list')">
						<view class="icon icon-circle-bg-14">
							<image src="/static/home/towel-record.png" mode="heightFix"></image>
						</view>
						<view>毛巾记录</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 系统管理板块 -->
		<view class="warpboxss">
			<view class="warpboxs-small-title" :style="isshow5?'padding-bottom: 30rpx;':''" @click="isshow5=!isshow5">
				<view><text class="warpboxs-small-title-line"></text>其他</view>
				<view class="warpboxs-small-title-img">
					<u-icon name="arrow-down" size="20" color="#666"
						:style="isshow5?'transform: rotate(0deg);':'transform: rotate(-180deg);'"></u-icon>
				</view>
			</view>
			<view v-show="isshow5">
				<view class="fun_box_fir">
					<view
						v-if="newuserInfo.mobilePhone == '18382415096' || newuserInfo.mobilePhone == '19938623860' || newuserInfo.mobilePhone == '18588888888'"
						class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/store-list/store-list')">
						<view class="icon icon-circle-bg-15">
							<image src="/static/home/store-management.png" mode="heightFix"></image>
						</view>
						<view>门店管理</view>
					</view>
					<view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/web/web')">
						<view class="icon icon-circle-bg-16">
							<image src="/static/home/ai-qa.png" mode="heightFix"></image>
						</view>
						<view>AI问答</view>
					</view>
					<view class="fun_fir_1 fun_fir_border" @click="goToPage('/pages/dailyReport/dailyReport')"
						v-if="showReport">
						<view class="icon icon-circle-bg-17">
							<image src="/static/home/report.png" mode="heightFix"></image>
						</view>
						<view>报表</view>
					</view>
				</view>
				<!-- <view class="fun_box_fir">
					<view class="fun_fir_1 fun_fir_border" @click="handleLogout">
						<view class="icon">
							<u-icon name="arrow-rightward" size="32" color="#43a047"></u-icon>
						</view>
						<view>退出</view>
					</view>
				</view> -->
			</view>
		</view>
		<view style="height: 140rpx;"></view>
		<!-- 自定义 tabBar -->
		<custom-tab-bar />
	</view>
</view>
</template>

<script>
	import CustomTabBar from '@/components/custom-tab-bar/index.vue'
	import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'

	export default {
		components: {
			CustomTabBar,
			CustomNavbar
		},
		data() {
			return {
				navbarHeightRpx: 0,
				isshow1: true,
				isshow2: true,
				isshow3: true,
				isshow4: true,
				isshow5: true,
				newuserInfo: {},
				userInfo: {}
			}
		},
		computed: {
			// 内容区域顶部间距
			contentTopMargin() {
				if (this.navbarHeightRpx > 0) {
					return (this.navbarHeightRpx + 20) + 'rpx'
				}
				return '100rpx'
			}
		},
		computed: {
			iskjb() {
				if (this.newuserInfo.gw == '科技老师') {
					return false
				}
				return true
			},
			// 根据用户权限显示报表按钮
			showReport() {
				if (!this.userInfo || !this.userInfo.userAccount) return false
				const adminAccounts = ['admin', '13198568627', '18884847552', '13608016021', '18628973287']
				return adminAccounts.includes(this.userInfo.userAccount)
			}
		},
		onLoad() {
			this.checkLoginStatus()
			this.init()
		},
		onShow() {
			// 每次显示时更新用户信息
			this.userInfo = uni.getStorageSync('userInfo')
			this.newuserInfo = uni.getStorageSync('newuserInfo') || {}
		},
		methods: {
			// 初始化
			init() {
				this.userInfo = uni.getStorageSync('userInfo')
				this.newuserInfo = uni.getStorageSync('newuserInfo') || {}
			},
			// 检查登录状态
			checkLoginStatus() {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				} else {
					this.userInfo = uni.getStorageSync('userInfo')
				}
			},
			// 页面跳转
			goToPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 处理导航栏高度变化
			handleNavbarHeightChange(heightInfo) {
				this.navbarHeightRpx = heightInfo.rpx || 0
			},
			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.API.logout().then(res => {
								if (res.code == 200) {
									// 清除本地存储
									uni.clearStorageSync()
									// 跳转到登录页
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #f5f7fa;
	}
	.warpbox {
		position: relative;
		z-index: 111;
		padding: 0 40rpx;
		top: 90rpx;
		/* #ifdef  MP-WEIXIN */
		top: 140rpx;
		/* #endif */
	}

	.warpboxss {
		background: #fff;
		padding: 30rpx;
		// margin: 0 25rpx 40rpx 25rpx;
		// margin: 30rpx 0;
		// margin: 40rpx 0;
		border-radius: 10rpx;
		box-shadow: 0 0 18rpx 10rpx #efefef;
		margin-bottom: 40rpx;
		.warpboxs-small-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #000;

			.warpboxs-small-title-line {
				display: inline-block;
				background-color: #009b4d;
				height: 26rpx;
				width: 10rpx;
				margin-right: 10rpx;
				border-radius: 18rpx;
			}

			.warpboxs-small-title-img {
				display: flex;
				align-items: center;
				transition: transform 0.3s;
			}
		}

		.fun_box_fir {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			// margin-top: 20rpx;

			.fun_fir_1 {
				flex-shrink: 0;
				background: #fff;
				text-align: center;
				width: 33%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #000;
				position: relative;
				height: 170rpx;
				transition: all 0.2s;
				box-sizing: border-box;

				&:active {
					transform: scale(0.98);
				}

				.icon {
					// display: flex;
					// align-items: center;
					// justify-content: center;
					// padding:20rpx 30rpx;
					border-radius: 90%;
					width: 90rpx;
					height: 90rpx;
					display: flex;
					justify-content: baseline;
					align-items: center;
					margin-bottom: 8rpx;

					image {
						// width: 45rpx;
						height: 45rpx;
						margin: 0 auto;
						vertical-align: middle;
						// margin-bottom: 15rpx;
					}

					// &[class*="icon-circle-bg"] {
					// 	width: 90rpx;
					// 	height: 90rpx;
					// 	border-radius: 50%;

					// 	image {
					// 		margin-bottom: 0;
					// 	}
					// }

					&.icon-circle-bg-1 {
						background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%); // 蓝色渐变
					}

					&.icon-circle-bg-2 {
						background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%); // 绿色渐变
					}

					&.icon-circle-bg-3 {
						background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%); // 红色渐变
					}

					&.icon-circle-bg-4 {
						background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%); // 青色渐变
					}

					&.icon-circle-bg-5 {
						background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%); // 橙色渐变
					}

					&.icon-circle-bg-6 {
						background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%); // 紫色渐变
					}

					&.icon-circle-bg-7 {
						background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%); // 粉色渐变
					}

					&.icon-circle-bg-8 {
						background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%); // 黄色渐变
					}

					&.icon-circle-bg-9 {
						background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%); // 深蓝色渐变
					}

					&.icon-circle-bg-10 {
						background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%); // 深绿色渐变
					}

					&.icon-circle-bg-11 {
						background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%); // 深红色渐变
					}

					&.icon-circle-bg-12 {
						background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%); // 深青色渐变
					}

					&.icon-circle-bg-13 {
						background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%); // 深橙色渐变
					}

					&.icon-circle-bg-14 {
						background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); // 深紫色渐变
					}

					&.icon-circle-bg-15 {
						background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%); // 深粉色渐变
					}

					&.icon-circle-bg-16 {
						background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%); // 深黄色渐变
					}

					&.icon-circle-bg-17 {
						background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%); // 棕色渐变
					}
				}
			}

			.fun_fir_border {
				border-top: 2rpx solid #efefef;
				border-bottom: 2rpx solid #efefef;
				border-right: 2rpx solid #efefef;
				border-left: 2rpx solid #efefef;
			}
		}
	}
</style>