<template>
	<view class="conatiner" :style="{ paddingTop: top + 'px' }">
		<view class="header" @click="toLogin">
			<view class="avatar-container">
				<image class="avatar"
					:src="userInfo.userPic || 'https://wechat-img-file.oss-cn-beijing.aliyuncs.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://wechat-img-file.oss-cn-beijing.aliyuncs.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://wechat-img-file.oss-cn-beijing.aliyuncs.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="section section1">
			<view class="section_label" @click="goWallet(1, userInfo)">
				<view>{{ userInfo.points }}</view>
				<view>积分</view>
			</view>
			<view class="section_label">
				<view>0.00</view>
				<view>兑换币</view>
			</view>
			<view class="section_label" @click="goWallet(2, userInfo)">
				<view>{{ userInfo.property_housing_fund }}元</view>
				<view>物业费</view>
			</view>
			<view class="section_label" @click="goWallet(3)">
				<view>0元</view>
				<view>红包卡券</view>
			</view>
		</view>

		<view class="center">
			<view class="gold_container" @click="headerGoldClick">
				<view class="gold_title">
					<span class="gold">米多币</span> <span class="monenyt">0</span> | <span class="price">价值0.00元</span>
					<u-icon size="30" name="arrow-right" />
				</view>
				<image class="gold_pic"
					src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1556.png" />
			</view>
			<view class="main main1">
				<view class="main_title">物业服务</view>
				<view class="item1">
					<view class="item_device" @click="handleCommunityClick">
						<image class="icon-community icon-img"
							src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1382.png">
						</image>
						<text class="community-title title-item">我的房产</text>
					</view>
					<view class="item_device" @click="handleApplyOwnerClick">
						<image class="icon-img"
							src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1559.png" />
						<text class="owner-title title-item">物业账单</text>
					</view>
					<view class="item_device" @click="handleFacilityClick">
						<image class="icon-img"
							src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1557.png" />
						<text class="device-title title-item">我的工单</text>
					</view>
					<view class="item_device" @click="handleMeApplyClick">
						<image class="icon-img"
							src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1558.png" />
						<text class="device-title title-item">我的管家</text>
					</view>
				</view>
			</view>
		</view>

		<view class="main margin20">
			<view class="main_title">电商服务</view>
			<view class="item1 padding_bottom0">
				<u-grid col="4" :border="false">
					<u-grid-item @click="headerOrderClick(item)" v-for="(item, index) in networkList" :key="index">
						<image class="nav_icon" :src="item.image" mode=""></image>
						<text class="grid-text">{{ item.name }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view class="main margin20">
			<view class="main_title">到家服务</view>
			<view class="item1 padding_bottom0">
				<u-grid col="4" :border="false">
					<u-grid-item @click="headerOrderClick(item)" v-for="(item, index) in visitList" :key="index">
						<image class="nav_icon" :src="item.image" mode=""></image>
						<text class="grid-text">{{ item.name }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="main margin20">
			<view class="main_title">门店服务</view>
			<view class="item1 padding_bottom0">
				<u-grid col="4" :border="false">
					<u-grid-item @click="headerOrderClick(item)" v-for="(item, index) in shopList" :key="index">
						<image class="nav_icon" :src="item.image" mode=""></image>
						<text class="grid-text">{{ item.name }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="main margin20" v-if="shopManagementList.some(item => item.isShow)">
			<view class="main_title">功能服务</view>
			<view class="item1 padding_bottom0">
				<u-grid col="4" :border="false">
					<u-grid-item @click="headerOrderClick(item)" v-for="(item, index) in shopManagementList"
						:key="index">
						<view v-if="item.isShow" class="item2">
							<image class="nav_icon" :src="item.image" mode=""></image>
							<text class="grid-text">{{ item.name }}</text>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="main margin20">
			<view class="main_title">智慧停车</view>
			<view class="item1 padding_bottom0">
				<u-grid col="4" :border="false">
					<u-grid-item @click="headerOrderClick(item)" v-for="(item, index) in parkList" :key="index">
						<image class="nav_icon" :src="item.image" mode=""></image>
						<text class="grid-text">{{ item.name }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="customer" @click="headerCustomerClick">
			<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.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 { menuButtonInfo, NavgateTo, picUrl, request } from '../../utils/index';
export default {
	data() {
		return {
			top: 0,
			networkList: [{
				image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1568.png",
				name: "我的订单",
				url: "/packages/myOrders/index/index",
			},
			{
				image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1567.png",
				name: "团购订单",
				url: "/packages/myOrders/groupOrders/index",
			},
			{
				image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1565.png",
				name: "我的收藏",
				url: "",
			},
			{
				image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1566.png",
				name: "售后服务",
				url: "",
			},
			{
				image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1563.png",
				name: "收货地址",
				url: "",
			},
			{
				image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1564.png",
				name: "购物车",
				url: "",
			},
			],
			visitList: [{
				image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1572.png",
				name: "服务工单",
				url: "",
			},
			{
				image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1573.png",
				name: "服务地址",
				url: "",
			},
			{
				image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1574.png",
				name: "服务卡",
				url: "",
			}
			],
			shopList: [{
				image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1580.png",
				name: "附近门店",
				url: "",
			},
			{
				image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1581.png",
				name: "服务券",
				url: "",
			},
			{
				image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1582.png",
				name: "支付记录",
				url: "",
			}
			],
			shopManagementList: [
				{
					image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_page_Group_1782.png",
					name: "商家端",
					url: "/packages/storeManagement/index/index",
					isShow: uni.getStorageSync('is_merchant'),
				},
				{
					image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/userPageGys.png",
					name: "供应商端",
					url: "",
					isShow: uni.getStorageSync('is_worker'),
				},
				{
					image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/userPageWuye.png",
					name: "物业端",
					url: "/packages/workOrderDashboard/guide/index",
					isShow: uni.getStorageSync("is_worker"),
				}
			],
			parkList: [
				{
					image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/parkIndex_icon1.png",
					name: "临停缴费",
					url: "/packages/park/temporaryOrder/index",
				},
				// {
				// 	image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/parkIndex_icon2.png",
				// 	name: "月卡充值",
				// 	url: "/packages/park/monthlyPayment/index",
				// },
				{
					image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/parkIndex_icon3.png",
					name: "停车订单",
					url: "/packages/park/parkOrder/index",
				},
				{
					image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/parkIndex_icon4.png",
					name: "车辆管理",
					url: "/packages/park/index/index",
				},
			],
			userInfo: {},
			isShop: uni.getStorageSync('is_shop'),
		}
	},

	methods: {
		goWallet(type, item) {
			NavgateTo('/packages/user/wallet/index?type=' + type + '&item=' + JSON.stringify(item));
		},
		// 头像点击
		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 = {};
						// 更新商家显示状态
						this.shopManagementList = [
							{
								image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/user_page_Group_1782.png",
								name: "商家端",
								url: "/packages/storeManagement/index/index",
								isShow: loginRes.is_merchant,
							},
							{
								image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/userPageGys.png",
								name: "供应商端",
								url: "",
								isShow: loginRes.is_worker,
							},
							{
								image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/userPageWuye.png",
								name: "物业端",
								url: "/packages/workOrderDashboard/guide/index",
								isShow: loginRes.is_worker,
							}
						];


						// 获取用户信息
						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.log('登录接口错误', err);
					})
				}
			})
		},

		// 小程序登录获取手机号接口
		getPhoneNumber(event) {
			console.log('小程序登录获取手机号', event);
		},


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

		// 客服
		headerCustomerClick() {
			console.log('客服')
		},

		// 我的社区跳转
		handleCommunityClick() {
			this.NotOpen();
			// NavgateTo('/packages/community/index/index')
		},

		// 申请业主跳转
		handleApplyOwnerClick() {
			this.NotOpen();
			// NavgateTo(`/packages/community/index/index?types=2`)
		},

		// 我的设备跳转
		handleFacilityClick() {
			this.NotOpen();
		},

		// 我的申请跳转
		handleMeApplyClick() {
			this.NotOpen();
			// NavgateTo(`/packages/community/ownerList/index`)
		},
		headerGoldClick() {
			this.NotOpen();
			// NavgateTo(`/packages/community/ownerList/index`)
		},

		// 我的订单跳转
		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
				// }
				console.log('选择城市');
				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://wechat-img-file.oss-cn-beijing.aliyuncs.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,
				})
			}
		},

	},
	onLoad() {
		const meun = menuButtonInfo();
		this.top = meun.height + meun.top;
	},

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

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