<template>
	<view class="conatiner">
		<!-- 顶部固定：头像行吸顶，避让胶囊的 paddingTop 移到 header 内 -->
		<view class="header" :style="{ paddingTop: top + 15 + 'px' }" @click="toLogin">
			<view class="avatar-container">
				<image class="avatar" :src="userInfo.userPic || 'https://static.hshuishang.com/person/Group_309.png'"
					mode="" />
			</view>
			<view class="avatar_right">
				<view class="avatar_title">
					<view class="login-btn">{{ userInfo.nick_name ? userInfo.nick_name : '登录/注册' }}</view>
					<view class="avatar_setting">
						<view class="avatar_setting_box">
							<image src="https://static.hshuishang.com/property-img-file/page_user_Vector13.png" mode=""
								@click.stop="headerRefreshClick" />
						</view>
						<!-- <button class="login-btn" open-type="getPhoneNumber" style="display: none;"
							@click="headerLoginClick" @getphonenumber="getPhoneNumber" id="hiddenLoginBtn"></button> -->
						<view class="avatar_setting_box">
							<image src="https://static.hshuishang.com/property-img-file/page_user_Vector14.png" mode=""
								@click.stop="headerSettingsClick" />
						</view>
					</view>
				</view>
				<view class="avater_mobile">{{ userInfo.mobile }}</view>
			</view>
		</view>
		<!-- 我的钱包：白卡 + 标题/眼睛（金额显隐）+ 资产横排（样式对齐原型个人中心） -->
		<view class="wallet-card">
			<view class="wallet-head">
				<text class="wallet-title">我的钱包</text>
				<u-icon :name="walletVisible ? 'eye' : 'eye-off'" color="#888888" size="32"
					@click="walletVisible = !walletVisible"></u-icon>
			</view>
			<view class="wallet-assets">
				<view class="asset-item" @click="goWallet(1, userInfo)">
					<view class="asset-value">{{ walletVisible ? (userInfo.points || 0) : '****' }}</view>
					<view class="asset-label">积分</view>
				</view>
				<view class="asset-item">
					<view class="asset-value">{{ walletVisible ? '0.00' : '****' }}</view>
					<view class="asset-label">通宝</view>
				</view>
				<view class="asset-item" @click="goWallet(2, userInfo)">
					<view class="asset-value">{{ walletVisible ? (userInfo.property_housing_fund || 0) + '元' : '****' }}</view>
					<view class="asset-label">岁银</view>
				</view>
				<view class="asset-item" @click="goRedPacket()">
					<view class="asset-value">{{ walletVisible ? redPacketMoney + '元' : '****' }}</view>
					<view class="asset-label">红包中心</view>
				</view>
				<view class="asset-item" @click="headerGoldClick">
					<view class="asset-value">{{ walletVisible ? '0' : '****' }}</view>
					<view class="asset-label">商票</view>
				</view>
			</view>
		</view>

		<!-- 物业快捷入口：三格横排卡（样式对齐原型个人中心 quick-card） -->
		<view class="quick-card">
			<view class="quick-item" @click="handleCommunityClick">
				<view class="quick-text">
					<text class="quick-title">我的房产</text>
					<text class="quick-sub">查看房产 ›</text>
				</view>
				<image class="quick-icon"
					src="https://static.hshuishang.com/property-img-file/page_user_Group_1382.png" />
			</view>
			<view class="quick-item" @click="handleApplyOwnerClick">
				<view class="quick-text">
					<text class="quick-title">物业账单</text>
					<text class="quick-sub">去缴费 ›</text>
				</view>
				<image class="quick-icon"
					src="https://static.hshuishang.com/property-img-file/page_user_Group_1559.png" />
			</view>
			<view class="quick-item" @click="handleFacilityClick">
				<view class="quick-text">
					<text class="quick-title">我的工单</text>
					<text class="quick-sub">报修进度 ›</text>
				</view>
				<image class="quick-icon"
					src="https://static.hshuishang.com/property-img-file/page_user_Group_1557.png" />
			</view>
		</view>

		<!-- 我的订单：标题 + 全部入口 + 五状态格（点击进订单页对应状态 tab） -->
		<view class="module-card">
			<view class="module-head">
				<text class="module-title">我的订单</text>
				<view class="module-link" @click="goOrderTab(0)">
					全部<u-icon name="arrow-right" color="#999999" size="22"></u-icon>
				</view>
			</view>
			<view class="order-status-row">
				<view class="status-item" v-for="t in orderTabs" :key="t.label" @click="goOrderTab(t.tab)">
					<image class="status-icon" :src="t.icon" />
					<text class="status-label">{{ t.label }}</text>
				</view>
			</view>
		</view>

		<!-- 服务目录：行点击弹出全部功能抽屉并定位到对应分组 -->
		<view class="module-card service-card">
			<view class="service-row" v-for="g in visibleGroups" :key="g.key" @click="openDrawer(g.key)">
				<image class="service-icon" :src="g.icon" />
				<text class="service-label">{{ g.title }}</text>
				<u-icon name="arrow-right" color="#c0c4cc" size="26"></u-icon>
			</view>
		</view>

		<!-- 全部功能抽屉：底部弹出 + 滚动定位到目标分组 -->
		<u-popup :show="drawerShow" mode="bottom" round="24rpx" :safe-area-inset-bottom="true"
			@close="drawerShow = false" @open="onDrawerOpened">
			<view class="fd-wrap">
				<view class="fd-head">
					<text class="fd-title">全部功能</text>
					<u-icon class="fd-close" name="close" color="#999999" size="32"
						@click="drawerShow = false"></u-icon>
				</view>
				<!-- 微信小程序下 scroll-into-view 对插槽内容 id 无效，改用 scroll-top 定位 -->
				<scroll-view scroll-y class="fd-body" :scroll-top="drawerScrollTop" scroll-with-animation>
					<view v-for="g in visibleGroups" :key="g.key" :id="'grp-' + g.key" class="fd-group">
						<view class="fd-group-title">{{ g.title }}</view>
						<view class="fd-grid">
							<view class="fd-item" v-for="it in g.items" :key="it.name" @click="drawerItemClick(it)">
								<image class="fd-item-icon" :src="it.icon" />
								<text class="fd-item-name">{{ it.name }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- <view class="customer" @click="headerCustomerClick">
			<image src="https://static.hshuishang.com/property-img-file/page_user_Vector16.png"
				mode="" />
			<view>客服</view>
		</view> -->
		<view style="padding-top: 174rpx;"></view>
		<nav-footer :current="4" />
	</view>
</template>

<script>
import { apiArr } from '../../api/login';
import { apiArr as apiArr2 } from '../../api/v2User';
import { apiArr as apiArr3 } from '../../api/user';
import { menuButtonInfo, NavgateTo, picUrl, request } from '../../utils/index';
import { ORDER_TABS, MENU_GROUPS, FUNC_GROUP_META, FUNC_ICONS } from './profile-menu.js';
export default {
	data() {
		return {
			top: 0,
			redPacketMoney: '0.00',
			// 我的订单五状态格 + 服务目录分组（数据见 profile-menu.js）
			orderTabs: ORDER_TABS,
			menuGroups: MENU_GROUPS,
			// 功能服务（登录态控制显隐，图标按端从 FUNC_ICONS 映射）
			shopManagementList: [
				{
					name: "商家端",
					url: "/packages/storeManagement/index/index",
					isShow: uni.getStorageSync('is_merchant'),
				},
				{
					name: "物业端",
					url: "/packages/workOrderDashboard/guide/index",
					isShow: uni.getStorageSync("is_worker"),
				},
				{
					name: "师傅端",
					url: "/packages/homeService/worker/index",
					isShow: uni.getStorageSync("is_merchant"),
				}
			],
			userInfo: {},
			isShop: uni.getStorageSync('is_shop'),
			// 钱包金额显隐（眼睛开关，隐藏时显示 ****）
			walletVisible: true,
			// 全部功能抽屉：显隐 + 目标分组 key + 滚动定位（scroll-top 像素值）
			drawerShow: false,
			drawerTargetKey: '',
			drawerScrollTop: 0,
		}
	},

	computed: {
		// 服务目录：5 个固定分组 + 功能服务（有可见项时置于最后）
		visibleGroups() {
			const groups = [...this.menuGroups];
			const funcItems = this.shopManagementList
				.filter(item => item.isShow)
				.map(item => ({ name: item.name, url: item.url, icon: FUNC_ICONS[item.name] }));
			if (funcItems.length) {
				groups.push({ ...FUNC_GROUP_META, items: funcItems });
			}
			return groups;
		},
	},

	methods: {
		goWallet(type, item) {
			NavgateTo('/packages/user/wallet/index?type=' + type + '&item=' + JSON.stringify(item));
		},
		goRedPacket() {
			NavgateTo('/packages/user/redPacket/index');
		},
		// 头像点击
		toLogin() {
			NavgateTo('/packages/user/replenishInfo/index');
		},

		// 刷新
		headerRefreshClick() {
			uni.showLoading({
				title: '刷新中',
				mask: true
			})
			// 清楚缓存信息
			uni.removeStorageSync('ctoken');
			uni.removeStorageSync('userId');
			uni.removeStorageSync('openId');
			uni.removeStorageSync('phone');
			uni.removeStorageSync('is_deal');
			uni.removeStorageSync('is_dev');
			uni.removeStorageSync('is_shop');
			uni.removeStorageSync('is_merchant');
			uni.removeStorageSync('is_worker');
			uni.removeStorageSync('shopId');
			uni.removeStorageSync('order_dispatch_permission');
			uni.removeStorageSync('work_order_permission');

			const button = uni.createSelectorQuery().select('#hiddenLoginBtn');
			button.boundingClientRect().exec();

			// 执行原headerLoginClick逻辑
			this.headerLoginClick();
		},

		headerLoginClick() {
			let that = this;
			uni.login({
				onlyAuthorize: true,
				success: (res) => {
					request(apiArr.login, 'POST', {
						code: res.code,
						phone: '',
						password: '',
					}, { silent: false }).then((loginRes) => {
						// 存储用户信息
						uni.setStorageSync('ctoken', loginRes.token);
						uni.setStorageSync('is_deal', loginRes.is_deal);
						uni.setStorageSync('is_dev', loginRes.is_dev);
						uni.setStorageSync('is_shop', loginRes.is_shop);
						uni.setStorageSync('is_merchant', loginRes.is_merchant);
						uni.setStorageSync('is_worker', loginRes.is_worker);

						// 重置用户信息状态
						this.userInfo = {};
						// 更新功能服务显隐（商家端/师傅端看 is_merchant，物业端看 is_worker）
						this.shopManagementList = this.shopManagementList.map(item => ({
							...item,
							isShow: item.name === '物业端' ? loginRes.is_worker : loginRes.is_merchant,
						}));


						// 获取用户信息
						request(apiArr.loginInfo, 'POST', {
							token: loginRes.token
						}, { silent: false }).then((res2) => {
							if (res2.error) return;
							// 保存userId 后续接口使用
							uni.setStorageSync('userId', res2.user_id);
							uni.setStorageSync('openId', res2.open_id);
							uni.setStorageSync('shopId', res2.wshop_id);
							that.getUserInfo(true)

						})
					}, (err) => {
						uni.hideLoading();
						console.warn('登录接口错误', err);
					})
				}
			})
		},

		// 小程序登录获取手机号接口（隐藏登录按钮回调占位，暂无逻辑）
		getPhoneNumber() {},


		// 设置
		headerSettingsClick() {
			NavgateTo('/packages/user/index/index');
		},

		// 客服（入口已注释，占位保留）
		headerCustomerClick() {},

		// 我的社区跳转
		handleCommunityClick() {
			NavgateTo('/packages/community/myCommunity/index')
		},

		// 物业账单跳转
		handleApplyOwnerClick() {
			NavgateTo(`/packages/community/propertyPayment/index`)
		},

		// 我的工单跳转
		handleFacilityClick() {
			const communityId = uni.getStorageSync('changeCommData').id;
			NavgateTo(`/packages/workOrderDashboard/index/index?communityId=${communityId}`)
		},

		headerGoldClick() {
			this.NotOpen();
			// NavgateTo(`/packages/community/ownerList/index`)
		},

		// 我的订单：跳订单列表并定位到指定状态 tab（0全部/1待付款/2待发货/3已取消/4待评价/6售后）
		goOrderTab(tab) {
			NavgateTo('/packages/myOrders/index/index?tab=' + tab);
		},

		// 打开全部功能抽屉，目标分组在弹窗动画结束（@open）后测量定位
		openDrawer(key) {
			this.drawerTargetKey = key;
			this.drawerShow = true;
		},

		// 弹窗打开动画完成：测量目标分组位置并滚动定位
		onDrawerOpened() {
			this.measureDrawerTarget(2);
		},

		// 测量并滚动到目标分组；首次打开时渲染层可能未就绪（v-if 懒渲染），查不到节点则短暂重试
		measureDrawerTarget(retry) {
			const key = this.drawerTargetKey;
			if (!key) return;
			const query = uni.createSelectorQuery().in(this);
			query.select('.fd-body').boundingClientRect();
			query.select('.fd-body').scrollOffset();
			query.select('#grp-' + key).boundingClientRect();
			query.exec((res) => {
				const [body, offset, target] = res || [];
				if (!body || !offset || !target) {
					if (retry > 0) {
						setTimeout(() => this.measureDrawerTarget(retry - 1), 50);
					}
					return;
				}
				const top = Math.max(0, target.top - body.top + offset.scrollTop);
				// scroll-top 相同值不触发滚动：先同步为当前实际位置再赋目标值
				this.drawerScrollTop = offset.scrollTop;
				this.$nextTick(() => {
					this.drawerScrollTop = top;
				});
			});
		},

		// 抽屉内功能项点击：关抽屉后按原跳转逻辑处理
		drawerItemClick(item) {
			this.drawerShow = false;
			this.headerOrderClick(item);
		},

		// 我的订单跳转
		headerOrderClick(event) {
			if (!event.url) {
				this.NotOpen();
				return
			} else {
				// if (!uni.getStorageSync('city')) {
				// 	wx.showModal({
				// 	  title: '提示',
				// 	  content: '请先选择您的城市',
				// 	  confirmText:"去选择",
				// 	  complete: (res) => {
				// 	    if (res.cancel) {}
				// 	    if (res.confirm) {
				// 				NavgateTo( '/pages/index/shopcity')
				// 	    }
				// 	  }
				// 	})
				// 	return
				// }
				NavgateTo(`${event.url}`)
			}
		},

		// 暂未开通服务弹窗
		NotOpen() {
			uni.showModal({
				title: '提示',
				content: '此功能暂未开通！',
				showCancel: false,
				complete: (res) => {
					if (res.cancel) {

					}
				}
			})
			return
		},


		async getUserInfo(item = false) {
			const isCtoken = uni.getStorageSync('ctoken');
			if (!isCtoken) return;
			const res = await request(apiArr2.getUserInfo, 'POST', {}, { silent: item === true ? false : true });
			const newUserInfo = {
				...res,
				userPic: res.avatar ? `${picUrl}${res.avatar}` : 'https://static.hshuishang.com/person/Group_309.png'
			};
			this.userInfo = newUserInfo;
			if (item) {
				const { community_worker } = res;
				uni.setStorageSync('order_dispatch_permission', community_worker && community_worker[0].order_dispatch_permission == 1 || false);
				uni.setStorageSync('work_order_permission', community_worker && community_worker[0].work_order_permission == 1 || false);
				uni.setStorageSync('phone', res.account);
				uni.hideLoading();
				// uni.showToast({
				// 	title: '刷新成功',
				// 	icon: 'success',
				// 	mask: true,
				// 	duration: 2000,
				// })
			}
		},
		async getMyRedPacket() {
			const params = {
				user_id: uni.getStorageSync('userId'),
			}
			const res = await request(apiArr3.redPackageMyred, 'POST', params);

			let processedList = res.rows
				.filter(item => item.status !== 3)
				.map(item => {
					const newItem = { ...item };

					if (newItem?.agent_info?.ad?.ad_name) {
						newItem.agent_info.ad.ad_name = newItem.agent_info.ad.ad_name.split(',').join('');
					}

					return newItem;
				});
			this.redPacketMoney = processedList.reduce((total, item) =>
				item.red_package_config ? total + item.red_package_config.money : total, 0.00
			).toFixed(2);
		},
	},
	onLoad() {
		const meun = menuButtonInfo();
		this.top = meun.height + meun.top;
	},

	onShow() {
		this.getUserInfo();
		this.getMyRedPacket();
		// this.headerLoginClick();
	},
}
</script>

<style>
@import url("./index.css");
</style>