<template>
	<mobile-sub-layout :title="title" :lineHeight="4" :bgColor="themeStore.theme.bgColor">
		<view class="profile-body">
			<view class="profile-body-content">
				<view
					class="profile-item"
					:style="{ backgroundColor: themeStore.theme.itemLightBgColor }"
					v-for="(item, index) in ProfileList"
					:key="index"
					@click="profileItemClick(item)"
				>
					<view class="profile-item-left" :style="{ color: themeStore.theme.text.normal }">{{ item.name }}</view>
					<view class="profile-item-right">
						<text
							:style="{ color: item.type == 'input' || item.type == 'router' ? themeStore.theme.account.profile.text.rightTextColor : themeStore.theme.account.profile.text.copyTextColor }"
							:class="item.type == 'input' || item.type == 'router' ? 'profile-item-right-text' : 'profile-item-right-copy-text'"
							v-if="item.type != 'upload'"
						>
							{{ profileInfo[item.fieldName] }}
						</text>
						<theme-image src="@/static/icon-avatar.png" v-if="item.type == 'upload'" class="avtar-size"></theme-image>
						<theme-image src="@/static/account/icon/right.png" v-if="item.type == 'input' || item.type == 'router'" class="right-image-size"></theme-image>
						<theme-image src="@/static/icon-copy.png" v-if="item.type == 'copy'" class="copy-image-size"></theme-image>
					</view>
				</view>
			</view>
		</view>
	</mobile-sub-layout>
</template>

<script setup>
import Header from '../components/Header/Header.vue';
import { ProfileList } from '../constants/index.js';
import { ref, reactive, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { getProfileApi } from '@/api/account.js';
import { isEmpty } from '@/module/utils/isEmpty.js';
import { convertBirthday } from '@/module/utils/convertBirthday.js';
import { useAppStore } from '@/store/useAppStore';
import { useI18n } from 'vue-i18n';
import { useThemeStore } from '@/store/useThemeStore';
import { useUserStore } from '@/store/useUserStore'

const themeStore = useThemeStore()
const { t } = useI18n();
const appStore = useAppStore();
const userStore = useUserStore()
const title = ref('Profile');

let profileInfo = reactive({
	userId: userStore.userInfo.id,
	avtar: '',
	nikeName: userStore.userInfo.nikeName,
	phone: userStore.userInfo.mobile || t('account.profileItem.setUp'), //9191915858
	birthday: t('account.profileItem.setUp'),
	email: t('account.profileItem.setUp'), //sgd7@gmail.com
	whatsapp: t('account.profileItem.setUp'), //11558424158
	facebook: t('account.profileItem.setUp'), //micheail@463
	telegram: t('account.profileItem.setUp'), //5174581174411
	twitter: t('account.profileItem.setUp'), //5824581414
	birthdayInt: ''
});

onShow(async () => {
	getProfileData();
	await userStore.getUserTotalInfo()
	profileInfo.userId = userStore.userInfo.id
	profileInfo.nikeName = userStore.userInfo.nikeName
	profileInfo.phone = userStore.userInfo.mobile || t('account.profileItem.setUp')
});

/**
 * 处理修改Profile操作项
 */
const profileItemClick = (item) => {
	
	if (item.type == 'upload') {
		// uni.chooseImage({
		// 	count: 1,
		// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		// 	sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
		// 	success: (chooseImageRes) => {
		// 		const tempFilePaths = chooseImageRes.tempFilePaths;
		// 		const uploadTask = uni.uploadFile({
		// 			url: 'https://your-api-endpoint.com/upload', // 服务器上传接口
		// 			filePath: tempFilePaths[0],
		// 			name: 'file', // 必须填写，后台用来接收文件
		// 			formData: {
		// 				user: 'test' // 其他要上传的参数
		// 			},
		// 			success: (uploadFileRes) => {
		// 				console.log('图片上传成功', uploadFileRes);
		// 			},
		// 			fail: (uploadFileErr) => {
		// 				console.error('图片上传失败', uploadFileErr);
		// 			}
		// 		});
		// 	}
		// });
	}
	if (item.type == 'input') {
		uni.navigateTo({
			url: `/pages/account/components/EditProfile/EditProfile`,
			success: function (res) {
				let data = item;
				if (item.fieldName == 'birthday') {
					data.fieldNameValue = profileInfo[item.fieldName] == t('account.profileItem.setUp') ? '' : profileInfo.birthdayInt;
				} else {
					data.fieldNameValue = profileInfo[item.fieldName] == t('account.profileItem.setUp') ? '' : profileInfo[item.fieldName];
				}

				res.eventChannel.emit('getProfileItem', data);
			}
		});
	}
	if (item.type == 'copy') {
		uni.setClipboardData({
			data: profileInfo[item.fieldName],
			success() {
				uni.showToast({
					title: 'Copy Success',
					icon: 'success'
				});
			}
		});
	}
	if (item.type == 'router') {
		if (profileInfo.phone == t('account.profileItem.setUp')) {
			uni.navigateTo({
				url: `/pages/account/PhoneBinding/PhoneBinding`
			});
		} else {
			uni.navigateTo({
				url: `/pages/Login/LoginV2`
			});
		}
	}
};
/**
 * 获取用户详细信息
 */
const getProfileData = async () => {
	const { code, data } = await getProfileApi({
		userId: userStore.userInfo.id
	});
	
	if (code == 200 && data != null) {
		profileInfo.avtar = isEmpty(data.avtar) ? t('account.profileItem.setUp') : data.avtar;
		profileInfo.birthday = isEmpty(data.birthday) ? t('account.profileItem.setUp') : convertBirthday(data.birthday).birthdayText;
		profileInfo.birthdayInt = isEmpty(data.birthday) ? t('account.profileItem.setUp') : data.birthday;
		profileInfo.email = isEmpty(data.email) ? t('account.profileItem.setUp') : data.email;
		profileInfo.facebook = isEmpty(data.facebook) ? t('account.profileItem.setUp') : data.facebook;
		profileInfo.telegram = isEmpty(data.telegram) ? t('account.profileItem.setUp') : data.telegram;
		profileInfo.twitter = isEmpty(data.twitter) ? t('account.profileItem.setUp') : data.twitter;
		// profileInfo.userId = isEmpty(data.userId) ? t('account.profileItem.setUp') : data.userId;
		profileInfo.whatsapp = isEmpty(data.whatsapp) ? t('account.profileItem.setUp') : data.whatsapp;
		// profileInfo.nikeName = isEmpty(data.nikeName) ? t('account.profileItem.setUp') : data.nikeName;
	}
}
</script>

<style lang="scss" scoped>
.profile-body {
	width: 100vw;
	height: calc(100vh - 88rpx);
	// background: #2c0303;
	box-sizing: border-box;
	padding-top: 10rpx;
	.profile-body-content {
		height: 100%;
		// background: #610606;
		box-sizing: border-box;
		padding: 26rpx 28rpx 0 32rpx;
		.profile-item {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			// background: #922222;
			border-radius: 20rpx;
			height: 88rpx;
			box-sizing: border-box;
			padding: 0 29rpx;
			margin-bottom: 20rpx;
			.profile-item-left {
				width: 30%;
				font-size: 24rpx;
				line-height: 88rpx;
				// color: #fca7a7;
			}
			.profile-item-right {
				width: 70%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 26rpx;
				.profile-item-right-text {
					// color: #fff;
					margin-right: 36rpx;
				}
				.profile-item-right-copy-text {
					margin-right: 29rpx;
					// color: #fca7a7;
				}
				.avtar-size {
					width: 68rpx;
					height: 68rpx;
				}
				.right-image-size {
					width: 12rpx;
					height: 22rpx;
				}
				.copy-image-size {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
}
</style>
