<template>
	<u-cell-group>
		<u-cell-item icon="" title="头像" @click="toSetting" :arrow="false">
			<template #right-icon>
				<u-upload
					ref="uploadRef"
					:action="action"
					:file-list="fileList"
					:header="headers"
					:custom-btn="true"
					@on-success="success"
					width="155"
					height="155"
				>
					<template #addBtn>
						<view v-if="!userData.avatar" class="avatar">
							<u-icon name="camera" color="#e6e6e6" size="40" class="icon"></u-icon>
						</view>
						<u-image
							v-else
							:src="config.baseUrl + userData.avatar"
							width="120rpx"
							height="120rpx"
							mode="scaleToFill"
						></u-image>
					</template>
				</u-upload>
			</template>
		</u-cell-item>
		<u-cell-item icon="" title="姓名" :value="userData.nickName" @click="setName"></u-cell-item>
		<u-cell-item icon="" title="密码设置" :value="userData.pwd" @click="setPwd"></u-cell-item>
		<u-cell-item icon="" title="手机号" :value="userData.mobile" @click="setTel"></u-cell-item>
		<u-cell-item icon="" title="编码" :value="userData.username"></u-cell-item>
		<u-cell-item icon="" title="邮箱" :value="userData.email" @click="setEmail"></u-cell-item>
		<u-cell-item
			icon=""
			title="发货地址"
			:value="userData.workAddr"
			:value-style="{ marginLeft: '17%' }"
			@tap="setAddr"
		></u-cell-item>
	</u-cell-group>

	<u-button style="margin-top: 100rpx;" @tap="openModel">退出当前用户</u-button>
	<u-modal
		v-model="options.show"
		:content="options.content"
		@confirm="toLogin"
		show-cancel-button
	></u-modal>

	<!-- 修改姓名 -->
	<u-popup v-model="options.showPopup" mode="center" width="80%">
		<view style="padding: 30rpx; margin-top: 0%;">
			<view style="font-size: 34rpx; width: 100%; text-align: center; margin-bottom: 20rpx;">
				{{ title }}
			</view>
			<u-form label-width="110">
				<u-form-item :label="label">
					<u-input v-model="nameValue" :border="true" clearable placeholder="请输入" />
				</u-form-item>
			</u-form>
			<u-button :maxlength="11" type="error" style="margin-top: 8%;" @tap="nameSave">
				保存
			</u-button>
		</view>
	</u-popup>

	<!-- 修改密码 -->
	<u-popup v-model="options.showPopupPwd" mode="center" width="80%">
		<view style="padding: 30rpx; margin-top: 0%;">
			<view style="font-size: 34rpx; width: 100%; text-align: center; margin-bottom: 20rpx;">
				设置密码
			</view>
			<u-form label-width="130">
				<u-form-item label="新密码:">
					<u-input
						v-model="oldPwd"
						type="password"
						:border="true"
						:password-icon="true"
						clearable
						placeholder="请输入新密码"
					/>
				</u-form-item>
				<u-form-item label="确认密码:">
					<u-input
						v-model="newPwd"
						type="password"
						:border="true"
						:password-icon="true"
						clearable
						placeholder="请再次输入密码"
					/>
				</u-form-item>
			</u-form>
			<u-button :maxlength="11" type="error" style="margin-top: 8%;" @tap="pwdSave">
				保存
			</u-button>
		</view>
	</u-popup>

	<!-- 修改地址 -->
	<u-popup v-model="options.showPopupAddr" mode="center" width="90%">
		<view style="padding: 30rpx; margin-top: 0%;">
			<view style="font-size: 34rpx; width: 100%; text-align: center; margin-bottom: 20rpx;">
				{{ title }}
			</view>
			<u-form label-width="155">
				<u-form-item label="选择地址">
					<u-input
						v-model="temporaryAddr"
						:disabled="true"
						:border="true"
						clearable
						placeholder="请选择地址"
						@tap="options.showSelectAddr = true"
					/>
				</u-form-item>
				<u-form-item label="详细信息">
					<u-input
						v-model="detailAddr"
						type="textarea"
						:border="true"
						clearable
						placeholder="请输入详细信息"
					/>
				</u-form-item>
			</u-form>
			<u-button :maxlength="11" type="error" style="margin-top: 8%;" @tap="addrSave">
				保存
			</u-button>
		</view>
	</u-popup>
	<u-picker mode="region" ref="uPicker" v-model="options.showSelectAddr" @confirm="selectAddr" />
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from 'vue';
import { getAuthInfo, resetNickName, resetByMobile, resetEmail, resetWorkAddr, resetMobile } from '@/api/profile';
import config from '@/utils/config';

let ctx: any = getCurrentInstance();
let $u = ctx.appContext.config.globalProperties.$u; // uview方法
let title = ref('')
let label = ref('')
let userData = ref({
	avatar: '',
	nickName: '',
	mobile: '',
	email: '',
	workAddr: '',
} as any); // 用户信息
let uploadRef = ref()
let action = ref(config.baseUrl + '/wx/auth/reset_avatar');
let headers = ref({ Authorization: uni.getStorageSync('token') });
let nameValue = ref('');
let oldPwd = ref(''); // 旧密码
let newPwd = ref(''); // 新密码
let fileList = ref([]); // 头像数据
let temporaryAddr = ref('') // 临时地址
let detailAddr = ref('') // 详细地址信息
let options = reactive({
	show: false,
	content: '确定退出当前用户',
	showPopup: false,
	showPopupPwd: false,
	showPopupAddr: false,
	showSelectAddr: false,
});

let openModel = () => {
	options.show = true;
};
let setName = () => {
	label.value = '用户名:'
	title.value = '设置用户名'
	nameValue.value = userData.value.nickName
	options.showPopup = true;
};
let setEmail = () => {
	label.value = '邮箱:'
	title.value = '设置邮箱'
	nameValue.value = userData.value.email
	options.showPopup = true;
};
let setPwd = () => {
	options.showPopupPwd = true;
};

let setTel = () => {
	label.value = '手机号:'
	title.value = '设置手机号'
	nameValue.value = userData.value.mobile
	options.showPopup = true;
};

let setAddr = () => {
	title.value = '设置地址'
	options.showPopupAddr = true;
};

let success = (res: any) => {
	if(res.code === 200) {
		init();
	}
	uploadRef.value?.clear()
};

let nameSave = () => {
	switch(label.value) {
		case '邮箱:':
			save(() => {
				resetEmail({ email: nameValue.value }).then((res: any) => {
					if (res.data.code === 200) {
						nameValue.value = '';
						options.showPopup = false;
						init();
					}
				});
			})
			break;
		case '用户名:':
			save(() => {
				resetNickName({ nickName: nameValue.value }).then((res: any) => {
					if (res.data.code === 200) {
						nameValue.value = '';
						options.showPopup = false;
						init();
					}
				});
			})
			break;
		case '手机号:':
				save(() => {
					resetMobile({ mobile: nameValue.value }).then((res: any) => {
						if (res.data.code === 200) {
							nameValue.value = '';
							options.showPopup = false;
							init();
						}
					});
				})
			break;
	}

};

let save = (func: Function) => {
	if (nameValue.value) {
		func()
	} else {
		uni.showToast({
			title: '请输入' + label.value,
			icon: 'none',
		});
	}
}

let selectAddr = (e: any) => {
	temporaryAddr.value = e.province.name + e.city.name + e.area.name
}

//  保存地址
let addrSave = () => {
	if (!temporaryAddr.value)
		return uni.showToast({
			title: '请选择地址',
			icon: 'none',
		});
	if (!detailAddr.value)
		return uni.showToast({
			title: '请输入收货地址',
			icon: 'none',
		});
		let workAddr = temporaryAddr.value + detailAddr.value
		resetWorkAddr({ workAddr }).then((res: any) => {
			if(res.data.code) {
				options.showPopupAddr = false
				init()
			}
		})
}

let pwdSave = () => {
	if (!oldPwd.value)
		return uni.showToast({
			title: '请输入新密码',
			icon: 'none',
		});
	if (!newPwd.value)
		return uni.showToast({
			title: '请输入确认密码',
			icon: 'none',
		});

	if (oldPwd.value === newPwd.value) {
		resetByMobile({ mobile: userData.value.mobile, password: newPwd.value }).then(
			(res: any) => {
				if (res.data.code === 200) {
					oldPwd.value = '';
					newPwd.value = '';
					options.showPopupPwd = false;
				}
			}
		);
	} else {
		return uni.showToast({
			title: '两次密码输入不一致',
			icon: 'none',
		});
	}
};

// 退出用户
const toLogin = () => {
	uni.reLaunch({
		url: '../login/login',
		success() {
			uni.clearStorage();
		},
	});
};

// 初始化数据
let init = () => {
	getAuthInfo().then((res: any) => {
		if (res.data.code === 200) {
			userData.value = res.data.data;
			var reg = /.+?(省|市|自治区|自治州|县|区)/g;  // 省市区的正则
			let addr = userData.value.workAddr.match(reg)
			temporaryAddr.value = addr[0] + addr[1] + addr[2]
			addr.map((item: any, i: number) => {
				if(i > 2) {
					detailAddr.value += item
				}
			})
		}
	});
};
init();
</script>

<style lang="scss" scoped>
.avatar {
	width: 120rpx;
	height: 120rpx;
	border: 2rpx solid #e5e5e5;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
