<template>
	<view class="page-container">
		<view class="one-box">
			<view class="l" @click="onLogin">
				<view class="img">
					<u-avatar :src="userInfo.cIcon" size="96rpx" default-url="/static/common/avatar.png" />
				</view>
				<view class="val">
					<text>{{ userInfo.cNickName || '点击登录' }}</text>
					<view class="level" v-if="userInfo.cNickName">一星用户</view>
				</view>
			</view>
			<view class="r flex flex-col" v-if="userInfo.cNickName" @click="goSettPage()">
				<u-icon name="setting" color="#000" size="36rpx"></u-icon>
				<text>设置</text>
			</view>
		</view>
		<view class="two-box flex">
			<view class="l">
				<view class="num">权益券<text>{{ couponNum }}</text>张</view>
				<view class="act flex">
					<view class="name" v-if="couponNum > 0">古法疏韵</view>
					<view class="desc">{{ couponNum > 0 ? '优惠券待使用' : '暂无优惠劵可用' }}</view>
					<view class="btns">
						<u-button
							shape="circle"
							:customStyle="{
								width: 'auto',
								height: '48rpx',
								fontSize: '22rpx',
								color: '#fff',
								background: 'linear-gradient(90deg, #FB8948 0%, #FE5B31 100%)'
							}"
							@click="goPay"
						>去使用</u-button>
					</view>
				</view>
			</view>
			<view class="r">
				<view class="info">
					<view class="title">账户余额</view>
					<view class="value"><text>￥</text>{{ userInfo.dBalance }}</view>
				</view>
				<view class="btns">
					<u-button
						shape="circle"
						:customStyle="{
							width: 'auto',
							height: '48rpx',
							fontSize: '22rpx',
							color: '#fff',
							background: 'var(--theme-color-gradient)'
						}"
						@click="goPay"
					>去充值</u-button>
				</view>
			</view>
		</view>

		<view class="card-box">
			<view class="card-header">
				<text class="card-title">我的订单</text>
				<view class="more flex" @click="goToPage({ path: '/pages/order/order', code: 100 }, 'tab')">
					<text>全部</text>
					<u-icon name="arrow-right" size="24rpx" top="1" color="#999"></u-icon>
				</view>
			</view>
			<view class="order-card">
				<view class="item" v-for="(item, index) in orderIcons" :key="index" @click="goToPage(item, 'tab')">
					<u-badge v-if="item.badge > 0" absolute
						:value="item.badge"
						:offset="[-4, -10]"
						:customStyle="{ zIndex: 1 }"
					></u-badge>
					<image class="icon" :src="item.icon" mode="aspectFit"></image>
					<text class="text">{{ item.title }}</text>
				</view>
			</view>
		</view>

		<view class="card-box flex option-card">
			<view class="item" @click="goCollect">
				<image class="img" src="/static/other/collect.png" mode="" />
				<view class="val">我的收藏
          <view><text>{{ collectNum }}</text> 人</view>
        </view>
			</view>
      <view class="item" @click="goPoints">
        <image class="img" src="/static/other/points.png" mode="" />
        <view class="val">我的积分
          <view><text>{{ totalPoints }}</text> 分</view>
         </view>
      </view>
			<view class="item" @click="goCoupon">
				<image class="img" src="/static/other/coupon.png" mode="" />
				<view class="val">我的优惠券
          <view><text>{{ couponNum }}</text> 张</view>
        </view>
			</view>
		</view>

		<!-- 更多功能 -->
		<view class="card-box module-card">
			<view class="card-header">
				<text class="card-title">通用功能</text>
			</view>
			<swiper class="swiper" :indicator-dots="true" indicator-color="#D9D9D9" indicator-active-color="#0879FF">
				<swiper-item v-for="(sitem, i) in splitData" :key="i">
					<u-grid :col="4" :border="false">
						<u-grid-item v-for="(item, k) in sitem" :key="k"
							customStyle="padding-top: 10rpx; padding-bottom: 20rpx;"
							@click="goToPage(item)">
							<image class="icon" :src="item.icon" mode="aspectFit"></image>
							<text class="text">{{ item.title }}</text>
						</u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper>
		</view>

		<u-modal :show="show"
			title="退回提示"
			:content="modalText.content"
			showCancelButton
			confirmText="去修改"
			confirmColor="#27aea7"
			@cancel="show = false"
			@confirm="onConfirm"
		></u-modal>
	</view>
</template>

<script>
import {
	logout,
	getInfo,
	getCoupon,
	getCollect,
	getwxQrCode,
	getMerchantData,
} from '@/api/index.js'
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			show: false,
			userInfo: {},
			// 优惠券数量
			couponNum: 0,
			// 收藏数量
			collectNum: 0,
			// 审核
			auditStatus: -1,
			orderIcons: [
				{ title: '待付款', icon: '/static/other/feedback.png', path: '/pages/order/order', code: -1, badge: 0 },
				{ title: '进行中', icon: '/static/other/home.png', path: '/pages/order/order', code: 10, badge: 0 },
				{ title: '待评价', icon: '/static/other/personal.png', path: '/pages/order/order', code: 4, badge: 0 },
				{ title: '已取消', icon: '/static/other/complain.png', path: '/pages/order/order', code: -10, badge: 0 },
			],
			moreFunctions: [
				{ title: '地址管理', icon: '/static/other/address.png', path: '/pages/address/index' },
				{ title: '招商合作', icon: '/static/other/feedback.png', path: '/pages/join/team' },
				{ title: '商户入驻', icon: '/static/other/home.png', path: '/pages/join/staff' },
				{ title: '商户中心', icon: '/static/other/personal.png', path: '/pages/staff/index' },
				{ title: '投诉举报', icon: '/static/other/complain.png', path: '/pages/my/feedback' },
			],
			// 弹窗
			modalText: {
				title: '提示',
				btntext: '好的',
				content: '已申请，请等待平台审核'
			},
		}
	},
	computed: {
    ...mapState({
      myPoint: state => state.points.myPoint
    }),
    // 总积分
    totalPoints() {
      return this.myPoint && this.myPoint.totalPoints || 0;
    },
		// 拆分功能数据
		splitData() {
			if (!Array.isArray(this.moreFunctions) || this.moreFunctions.length === 0) {
				return [];
			}
			const groupSize = 8;
			const result = [];
			for (let i = 0; i < this.moreFunctions.length; i += groupSize) {
				result.push(this.moreFunctions.slice(i, i + groupSize));
			}
			return result;
		}
	},
	onLoad() {

	},
	onShow() {
		// this.getData();
		// this.getCoupon();
		// this.getMerData();
		// this.getCollectData();
  //   this.getPointsInfo();
		// this.getQrCode();
	},
	methods: {
    ...mapActions([
      'getPointsInfo'
    ]),
		// 用户数据
		getData() {
			this.userInfo = {};
			getInfo().then(res => {
				if (res.data.code == 200) {
					this.userInfo = res.data.data;
					uni.setStorageSync('wx_copenid', res.data.data.cOpenid);
          uni.setStorageSync('wx_cIcon', res.data.data.cIcon);
				}
			})
		},
		// 获取优惠劵
		getCoupon() {
			let params = {
				receiveOpenId: uni.getStorageSync('wx_copenid')
			}
			getCoupon(params).then(res => {
				if (res.data.code == 200 && res.data.data.length > 0) {
					this.couponNum = res.data.data.length;
				}
			})
		},
		// 商户详情
		getMerData() {
			let params = {
				cOpenId: uni.getStorageSync('wx_copenid')
			}
			getMerchantData(params).then(res => {
				if (res.data.data) {
					this.auditStatus = res.data.data.nTong;
					this.modalText.content = res.data.data.reasonRefusal;
					// 审核已通过
					if (this.auditStatus == 1) {

					}
				} else {
					this.auditStatus = -1;
				}
			})
		},
		// 获取收藏列表
		getCollectData() {
			let params = {
				cWxOpenId: uni.getStorageSync('wx_copenid')
			}
			getCollect(params).then(res => {
				if (res.data.code == 200) {
					this.collectNum = res.data.data.length;
				}
			})
		},
		getQrCode() {
			let params = {
				openId: uni.getStorageSync('wx_copenid')
			}
			getwxQrCode(params).then(res => {
				let TICKET = res.data.ticket
				this.urlView = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + TICKET
			})
		},
		// 功能区跳转
		goToPage(item, type = 'to') {
			// console.log(`跳转到: ${item.title}`);
			if (item.path) {
				if (!this.$utils.checkLogin({ type: 'modal' })) return;
				// 商户入驻需做特定判断
				if (item.title === '商户入驻' && [0, 1, 2, 3].indexOf(this.auditStatus) !== -1) {
					let text = '正在审核中';
					if (this.auditStatus == 1) {
						text = '审核已通过';
					}
					uni.$u.toast(text);
					return;
				}
				// 订单为tab页面，需要特定处理
				if (item.path === '/pages/order/order') {
					this.$store.dispatch('setOrderTab', item.code);
				}
				uni.$u.route({ url: item.path, type });
			} else {
				uni.$u.toast('开发中');
			}
		},
		goWithdraw() {
			uni.navigateTo({
				url: '/pages/my/withdraw'
			});
		},
		// 跳转至优惠券页
		goCoupon() {
			if (!this.$utils.checkLogin({ type: 'modal' })) return;
			uni.navigateTo({
				url: '/pages/my/coupon'
			});
		},
		// 跳转至充值
		goPay() {
			if (!this.$utils.checkLogin({ type: 'modal' })) return;
			uni.navigateTo({
				url: '/pages/my/pay'
			});
		},
		// 跳转至我的收藏
		goCollect() {
			if (!this.$utils.checkLogin({ type: 'modal' })) return;
			uni.navigateTo({
				url: '/pages/my/collect'
			});
		},
    //跳转至我的积分
    goPoints(){
      if (!this.$utils.checkLogin({ type: 'modal' })) return;
      uni.navigateTo({
        url: '/points/home/index'
      });
    },
    //跳转至设置界面
    goSettPage(){
      if (!this.$utils.checkLogin({ type: 'modal' })) return;
      uni.navigateTo({
        url: '/setting/myNew/index'
      });
    },
		onLogin() {
			//if (this.$utils.checkLogin()) return;
			uni.navigateTo({
				url: '/setting/myNew/phone'
			})
		},
		// 退出登录
		onLogout() {
			uni.showModal({
				title: '确定退出登录吗',
				success: (res) => {
					if (res.confirm) {
						logout().then(res => {
							if (res.data.code == 200) {
								uni.removeStorageSync('access-token')
								this.$router.go(0)
								uni.showToast({
									title: '已退出登录',
									icon: 'none'
								})
							}
						})
					}
				}
			})
		},
		onConfirm() {
			uni.navigateTo({
				url: '/pages/my/indent?title=编辑资料'
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	min-height: 100vh;
	padding: 24rpx 40rpx;
	background: linear-gradient(180deg, rgba(247, 248, 250, 0) 10%, #F7F8FA 45%),
	linear-gradient(181deg, #CDF8ED 0%, #D1F8DD 100%);

	.one-box {
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.l {
			display: flex;
			align-items: center;

			.img {
				margin-right: 20rpx;
				overflow: hidden;
			}

			.val {
				font-weight: 500;
				font-size: 32rpx;
				color: #2F3437;
				display: flex;
				gap: 6rpx;
				align-items: center;
				flex-direction: column;

				.level {
					font-weight: 400;
					font-size: 22rpx;
					color: #11C7BF;
					line-height: 22rpx;
					padding: 6rpx 24rpx;
					background: linear-gradient(270deg, #DDF9FF 0%, #E7FFFE 100%);
					border: 1rpx solid rgba(140, 249, 246, 1);
					border-radius: 12rpx;
				}
			}
		}

		.r {
			font-weight: 400;
			font-size: 22rpx;
			color: #333333;
		}
	}

	.two-box {
		gap: 16rpx;
		margin-bottom: 24rpx;

		.l, .r {
			min-height: 164rpx;
		}

		.l {
			flex: 1;
			padding: 20rpx;
			border: 1rpx solid #FFFFFF;
			border-radius: 20rpx;
			background: linear-gradient(180deg, #FFFDFB 0%, #FFFFFF 100%);

			.num {
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
					padding: 0 6rpx;
				}
			}

			.act {
				padding: 12rpx 16rpx;
				margin-top: 16rpx;
				background: linear-gradient(90deg, #FEF6EB 0%, #FFE6D0 100%);
				border-radius: 24rpx;
				justify-content: space-between;

				.name {
					height: 48rpx;
					font-weight: 600;
					font-size: 24rpx;
					color: #FFFFFF;
					padding: 0 16rpx;
					line-height: 48rpx;
					background: linear-gradient(90deg, #FB8948 0%, #FE5B31 100%);
					border-radius: 12rpx;
					border: 2rpx solid #F6D9DD;
				}

				.desc {
					font-weight: 400;
					font-size: 20rpx;
					color: #000000;
				}

				.btns {}
			}
		}

		.r {
			width: 30%;
			padding: 20rpx;
			border: 1rpx solid #FFFFFF;
			border-radius: 20rpx;
			background: linear-gradient(180deg, #EDFFFA 0%, #FFFFFF 100%);

			.info {
				color: #FFE6CE;

				.title {
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
				}

				.value {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					margin-bottom: 6rpx;

					text {
						font-size: 22rpx;
					}
				}
			}
		}
	}

	.card-box {
		padding: 24rpx;
		margin-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.card-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16rpx;

			.card-title {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			.more {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 1;
			}
		}
	}

	.option-card {
		.item {
			flex: 1;
			border-right: 1rpx solid #eee;
			display: flex;
			align-items: center;
			justify-content: center;

			&:last-child {
				border: none;
			}

			.img {
				width: 60rpx;
				height: 60rpx;
				margin-right: 12rpx;
			}

			.val {
				font-weight: 400;
				font-size: 26rpx;
				color: #2F3437;

				text {
					color: #03C8BE;
				}
			}
		}
	}

	.module-card {
		padding-bottom: 10rpx;

		.icon {
			width: 56rpx;
			height: 56rpx;
		}

		.text {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
		}

		.swiper {
			height: 260rpx;
		}
	}

	.order-card {
		gap: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.item {
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;

			.text {
				font-weight: 400;
				font-size: 26rpx;
				color: #2F3437;
			}

			.icon {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 8rpx;
			}
		}
	}
}
</style>
