<template>
	<view class="page flex-col">
		<view class="box_1 flex-row">
			<view class="image-wrapper_1 flex-col">
				<image
					class="image_1"
					:src="isLogin ? (member.avatar ? member.avatar : '/static/images/mine/default.png') : '/static/images/mine/default.png'"
				/>
			</view>
			<view class="text-group_1 flex-col justify-between">
				<text class="text_1" v-if="isLogin" @tap="serv({type:'pages',pages:'/pages/components/pages/mine/userinfo'})">
					Hi, {{ member.nickname }}
				</text>
				<text class="text_1" v-else @tap="login">
					Hi, 游客
				</text>
				<text class="text_2">点击头像可以修改个人信息</text>
			</view>
		</view>
		<view class="box_5 flex-col">
			<view class="box_6 flex-row justify-between">
				<!-- 积分卡片 -->
				<view class="group_2 flex-col">
					<text class="text_4">积分</text>
					<view class="group_3 flex-row justify-between">
						<text class="text_5">{{ isLogin ? member.integral : 0 }}</text>
						<view class="box_7 flex-row justify-end" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=1'})">
							<text class="text_6">去兑换</text>
							<image class="label_2" src="/static/images/mine/arrow_right_small.png" />
						</view>
					</view>
					<text class="text_7">积分可用于兑换产品</text>
				</view>
				<!-- 优惠券卡片 -->
				<view class="group_4 flex-col">
					<text class="text_8">优惠券</text>
					<view class="section_1 flex-row justify-between">
						<text class="text_9">{{ isLogin ? member.couponCount : 0 }}</text>
						<view class="block_1 flex-row justify-end" @tap="serv({type:'pages',pages:'/pages/components/pages/coupons/coupons'})">
							<text class="text_10">去使用</text>
							<image class="label_3" src="/static/images/mine/arrow_right_small.png" />
						</view>
					</view>
					<text class="text_11">使用优惠券享受更多优惠</text>
				</view>
			</view>

			<!-- 服务项目列表 -->
			<view v-for="(item, index) in services" :key="index">
				<!-- 招兵买马 -->
				<view v-if="index === 0" class="box_8 flex-row" @tap="serv(item)">
					<view class="image-wrapper_3 flex-col">
						<image class="label_4" :src="item.image || '/static/images/mine/recruit_icon.png'" />
					</view>
					<text class="text_12">{{ item.name }}</text>
					<image class="label_5" src="/static/images/mine/arrow_right.png" />
				</view>
				<!-- 订单 -->
				<view v-if="index === 0" class="box_8 flex-row" @tap="serv(item)">
					<view class="image-wrapper_3 flex-col">
						<image class="label_4" :src="item.image || '/static/images/mine/order_icon.png'" />
					</view>
					<text class="text_12">{{ item.name }}</text>
					<image class="label_5" src="/static/images/mine/arrow_right.png" />
				</view>

				<!-- 历史消费 -->
				<view v-else-if="index === 1" class="box_9 flex-row" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=0'})">
					<view class="section_2 flex-col">
						<image class="label_4" :src="item.image || '/static/images/mine/history_icon.png'" />
					</view>
					<text class="text_13">历史消费</text>
					<image class="label_6" src="/static/images/mine/arrow_right.png" />
				</view>

				<!-- 客服 -->
				<view v-else-if="index === 2" class="box_11 flex-row" @tap="serv(item)">
					<view class="image-wrapper_5 flex-col">
						<image class="label_7" :src="item.image || '/static/images/mine/customer_service_icon.png'" />
					</view>
					<text class="text_14">{{ item.name }}</text>
					<image class="label_8" src="/static/images/mine/arrow_right.png" />
				</view>

				<!-- 地址 -->
				<view v-else-if="index === 3" class="box_12 flex-row" @tap="serv(item)">
					<view class="section_3 flex-col">
						<image class="label_4" :src="item.image || '/static/images/mine/address_icon.png'" />
					</view>
					<text class="text_15">{{ item.name }}</text>
					<image class="label_9" src="/static/images/mine/arrow_right.png" />
				</view>

				<!-- 其他服务项 -->
				<view v-else class="box_14 flex-row" @tap="serv(item)">
					<view class="image-wrapper_6 flex-col">
						<image class="label_10" :src="item.image || '/static/images/mine/help_center_icon.png'" />
					</view>
					<text class="text_16">{{ item.name }}</text>
					<image class="label_11" src="/static/images/mine/arrow_right.png" />
				</view>
			</view>

			<!-- 退出登录 -->
			<view v-if="isLogin" class="box_16 flex-row" @tap="login">
				<image class="label_14" src="/static/images/mine/logout_icon.png" />
				<text class="text_18">退出登录</text>
				<image class="label_15" src="/static/images/mine/arrow_right.png" />
			</view>
		</view>
	</view>
</template>

<script setup>
import {
  ref,
  computed
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad,onShow} from '@dcloudio/uni-app'
import { formatDateTime,kmUnit } from '@/utils/util'
import {
  userGetUserInfo,
  mineService
} from '@/api/user'
const main = useMainStore()
const { member,isLogin } = storeToRefs(main)

const title = ref('个人中心')
const services = ref([])

const growthValue = computed(() => { 
	if (!isLogin.value) return 0
	const {
		currentValue,
		needValue
	} = member.value
	return currentValue / (currentValue + needValue) * 100
})

onLoad(() => {
	getServices();
})	
onShow(() => {
	getUserInfo();
})


const getUserInfo = async() => {
	if (isLogin.value) {
		let data = await userGetUserInfo();
		if (data) {
			main.SET_MEMBER(data);
		}
	}
}
const getServices = async() => {
	let data = await mineService();
	if (data) {
		services.value = data;
	}
}
const makePhoneCall = (phoneNumber) => {
	uni.makePhoneCall({
		phoneNumber: phoneNumber,
	})
}
const login = () => {
	uni.navigateTo({
		url: '/pages/components/pages/login/login'
	})
}
const packages = () => {
	if (!isLogin.value) {
		login()
		return
	}
	uni.navigateTo({
		url: '/pages/components/pages/packages/index'
	})
}
const serv = (item) => {
	switch (item.type) {
		case 'pages':
			if (!isLogin.value) {
				login()
				return
			}
			uni.navigateTo({
				url: item.pages
			})
			break;
		case 'miniprogram':
			uni.navigateToMiniProgram({
				appId: item.app_id
			})
			break;
		case 'menu':
			uni.navigateTo({
				url: '/pages/components/pages/mine/service?id=' + item.id + '&name=' + item.name
			})
			break;
		case 'content':
			uni.navigateTo({
				url: '/pages/components/pages/mine/content?id=' + item.id + '&name=' + item.name
			})
			break;
		case 'call':
			makePhoneCall(item.phone)
			break;
	}
}
</script>

<style>
@import './common.css';

.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 750rpx;
  height: 100vh;
  overflow: hidden;
}

.box_1 {
  position: relative;
  width: 750rpx;
  height: 336rpx;
  background: url('/static/images/mine/background.png') 100% no-repeat;
  background-size: 100% 100%;
}

.image-wrapper_1 {
  box-shadow: 0px 18px 18px 0px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  height: 100rpx;
  border: 1px solid rgba(217, 217, 217, 1);
  width: 100rpx;
  margin: 170rpx 0 0 55rpx;
}

.image_1 {
  width: 91rpx;
  height: 89rpx;
  margin: 7rpx 0 0 5rpx;
  border-radius: 100%;
}

.text-group_1 {
  width: 277rpx;
  height: 87rpx;
  margin: 176rpx 291rpx 0 27rpx;
}

.text_1 {
  width: 277rpx;
  height: 53rpx;
  overflow-wrap: break-word;
  color: rgba(82, 172, 65, 1);
  font-size: 38rpx;
  font-family: PingFang SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 38rpx;
}

.text_2 {
  width: 277rpx;
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(158, 158, 158, 1);
  font-size: 20rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin-top: 6rpx;
}

.box_5 {
  width: 750rpx;
  height: auto;
  min-height: 500rpx;
}

.box_6 {
  width: 694rpx;
  height: 191rpx;
  margin-left: 32rpx;
}

.group_2 {
  width: 331rpx;
  height: 191rpx;
  background: url('/static/images/mine/integral_card.png') 100% no-repeat;
  background-size: 100% 100%;
  justify-content: flex-center;
}

.text_4 {
  width: 78rpx;
  height: 36rpx;
  overflow-wrap: break-word;
  color: rgba(131, 126, 126, 1);
  font-size: 26rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 26rpx;
  margin: 32rpx 0 0 32rpx;
}

.group_3 {
  width: 174rpx;
  height: 62rpx;
  margin: 8rpx 0 0 32rpx;
}

.text_5 {
  width: 78rpx;
  height: 62rpx;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 44rpx;
  font-family: PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 44rpx;
}

.box_7 {
  background-color: rgba(82, 172, 65, 1);
  border-radius: 12px 24px 2px 24px;
  width: 88rpx;
  height: 30rpx;
  margin-top: 13rpx;
}

.text_6 {
  width: 60rpx;
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 20rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin: 1rpx 0 0 8rpx;
}

.label_2 {
  width: 24rpx;
  height: 24rpx;
  margin: 3rpx 0 0 -4rpx;
}

.text_7 {
  width: 180rpx;
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(234, 183, 41, 1);
  font-size: 20rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin: -7rpx 0 32rpx 32rpx;
}

.group_4 {
  width: 331rpx;
  height: 191rpx;
  background: url('/static/images/mine/coupon_card.png') 100% no-repeat;
  background-size: 100% 100%;
  justify-content: flex-center;
}

.text_8 {
  width: 78rpx;
  height: 36rpx;
  overflow-wrap: break-word;
  color: rgba(131, 126, 126, 1);
  font-size: 26rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 26rpx;
  margin: 32rpx 0 0 32rpx;
}

.section_1 {
  width: 145rpx;
  height: 62rpx;
  margin: 8rpx 0 0 32rpx;
}

.text_9 {
  width: 45rpx;
  height: 62rpx;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 44rpx;
  font-family: PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 44rpx;
}

.block_1 {
  background-color: rgba(82, 172, 65, 1);
  border-radius: 12px 24px 2px 24px;
  width: 88rpx;
  height: 30rpx;
  margin-top: 13rpx;
}

.text_10 {
  width: 60rpx;
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 20rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin: 1rpx 0 0 8rpx;
}

.label_3 {
  width: 24rpx;
  height: 24rpx;
  margin: 3rpx 0 0 -4rpx;
}

.text_11 {
  width: 180rpx;
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(82, 172, 65, 1);
  font-size: 20rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin: -7rpx 0 32rpx 32rpx;
}

.box_8, .box_9, .box_11, .box_12, .box_14, .box_16 {
  width: 686rpx;
  height: 48rpx;
  margin: 64rpx 0 0 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.box_8 {
  margin-top: 60rpx;
}

.image-wrapper_3, .section_2, .image-wrapper_5, .section_3, .image-wrapper_6 {
  background-color: rgba(255, 255, 255, 1);
  height: 48rpx;
  width: 48rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label_4, .label_7, .label_10, .label_14 {
  width: 38rpx;
  height: 38rpx;
}

.text_12, .text_13, .text_14, .text_15, .text_16, .text_18 {
  width: auto;
  height: 39rpx;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 28rpx;
  font-family: PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 28rpx;
  margin: 5rpx 0 0 24rpx;
}

.label_5, .label_6, .label_8, .label_9, .label_11, .label_15 {
  width: 24rpx;
  height: 24rpx;
  margin-left: auto;
  margin-right: 20rpx;
}
</style>
