<template>
	<!-- 个人中心 -->
	<view class="minePage">
		<div class="userStag">
			<img :src="headImg" alt="头像" class="imgs" @click="changeInfo()" />
			<p class="names">
				{{ nickName }}
				<span class="parts fail" v-if="authStatus == 0">未认证</span>
				<span class="parts success" v-if="authStatus == 1">已认证</span>
				<span class="parts success" v-if="authStatus == 2">认证中</span>
			</p>
		</div>
		<div class="menuPart" @click="goPage('1')">
			<uni-icons type="eye-filled" size="40"></uni-icons>
			<p class="rights">我的收藏</p>
			<uni-icons type="right" size="20"></uni-icons>
		</div>
		<div class="menuPart" @click="goPage('2')">
			<uni-icons type="videocam-filled" size="40"></uni-icons>
			<p class="rights">我的随手拍</p>
			<uni-icons type="right" size="20"></uni-icons>
		</div>
		<!-- <div class="menuPart">
			<uni-icons type="phone-filled" size="40"></uni-icons>
			<p class="rights" style="width: 85%; display: flex; justify-content: space-between">
				平台电话
				<a href="tel:0712-2829905" class="phones">0712-2829905</a>
			</p>
		</div> -->
		<div class="menuPart" @click="goPage('3')">
			<uni-icons type="chatboxes-filled" size="40"></uni-icons>
			<p class="rights">使用说明</p>
			<uni-icons type="right" size="20"></uni-icons>
		</div>
	</view>
	<!-- 头像昵称修改弹窗 -->
	<uni-popup ref="popup" type="bottom" :mask-click="true" class="projectForms">
		<uni-forms :modelValue="formData" :rules="rules" ref="valiForm">
			<uni-forms-item label="我的昵称" required label-width="100%" name="nickName">
				<uni-easyinput type="text" autoHeight v-model="formData.nickName" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="我的头像" required label-width="100%" name="coverPhotosFileList">
				<UploadImage
					ref="imagesUp"
					:saveFileArr="formData.coverPhotosFileList"
					:limit="1"
					:refField="'headImg'"
					:refType="'public_wechart_miniuser'"
				/>
			</uni-forms-item>
			<button type="primary" @click="submitData">提交保存</button>
		</uni-forms>
	</uni-popup>
</template>

<script setup name="minePage">
import { onMounted, ref } from 'vue';
import { wechartMiniuserUpdate } from '@/utils/homeApi.js';
import UploadImage from '@/pages/components/imageUpload.vue'; //公共上传图片
import defaultHeadImg from '@/static/images/userUtar.png'; //默认头像

const authStatus = ref(1);
const nickName = ref('');
const headImg = ref('');
const popup = ref(null);
const valiForm = ref(null);
const imagesUp = ref(null);
const formData = ref({
	coverPhotosFileList: [],
	nickName: null,
	id: uni.getStorageSync('userIdXGWXMN')
});
const rules = ref({
	nickName: {
		rules: [{ required: true, errorMessage: '昵称不能为空' }]
	},
	coverPhotosFileList: {
		rules: [{ required: true, type: 'array', errorMessage: '请上传头像' }]
	}
});

// 点击跳转页面
function goPage(type) {
	if (type == '1') {
		uni.navigateTo({
			url: `./../concern/concern`
		});
	} else if (type == '2') {
		uni.navigateTo({
			url: `./../forum/index`
		});
	} else {
		uni.navigateTo({
			url: `./../instructions/instructions`
		});
	}
}
// 点击上传头像
function changeInfo() {
	popup.value.open();
	formData.value.nickName = '';
	formData.value.coverPhotosFileList = [];
}

// 提交头像昵称
function submitData() {
	valiForm.value
		.validate()
		.then((res) => {
			let params = JSON.parse(JSON.stringify(formData.value));
			wechartMiniuserUpdate(params).then((res) => {
				uni.showToast({
					icon: 'none',
					title: '提交成功'
				});
				nickName.value = params.nickName;
				headImg.value = params.coverPhotosFileList[0].url;
				popup.value.close();
				imagesUp.value.clearImages(); //图片清空
			});
		})
		.catch((err) => {
			console.log('err', err);
		});
}

onMounted(() => {
	// 获取默认头像、昵称、认证状态
	authStatus.value = uni.getStorageSync('authStatusXGWXMN');
	headImg.value = uni.getStorageSync('headImgXGWXMN') || defaultHeadImg;
	nickName.value = uni.getStorageSync('nickNameXGWXMN') || '微信昵称';
});
</script>

<style lang="scss">
.minePage {
	text-align: center;
	.userStag {
		padding-top: 15%;
		margin-bottom: 30rpx;
		.imgs {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
		}
		.names {
			text-align: center;
			margin-top: 10rpx;
			font-size: 28rpx;
			.parts {
				padding: 3rpx 8rpx;
				display: inline-block;
				border-radius: 8rpx;
				margin-left: 10rpx;
				color: #fff;
			}
			.success {
				background: $uni-color-success;
			}
			.fail {
				background: $uni-color-error;
			}
		}
	}

	.menuPart {
		width: 80%;
		margin: 10rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 2rpx solid #f7f7f7;
		padding: 20rpx 0rpx;
		.rights {
			width: 70%;
			text-align: left;
			font-size: 28rpx;
			.phones {
				text-decoration: none;
				font-size: 30rpx;
				font-weight: bold;
				color: $uni-color-primary;
			}
		}
	}
}
</style>