<template>
	<view class="person-msg">
		<view
			class="head c-content"
			@click="changeFace"
		>
			<image
				:src="form.face || '/static/missing-face.png'"
				mode=""
			></image>
			<view>点击修改头像</view>
		</view>
		<u-form
			:model="form"
			ref="uForm"
			class="form"
		>
			<u-form-item
				label="昵称"
				label-width="150"
			>
				<u-input
					v-model="form.nickName"
					placeholder="请输入昵称"
					maxlength="10"
				/>
			</u-form-item>
			<u-form-item
				label="二维码"
				label-width="150"
			>
				<img
					:src="erwei"
					alt=""
					width="60"
					@click="showQrCodeInFullSize"
				/>
			</u-form-item>
			<u-form-item
				label="性别"
				label-width="150"
			>
				<u-radio-group
					v-model="form.sex"
					:active-color="lightColor"
				>
					<u-radio name="1">男</u-radio>
					<u-radio name="0">女</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item
				label="生日"
				label-width="150"
				right-icon="arrow-right"
			>
				<div
					style="width: 100%"
					@click="showBirthday = true"
				>
					{{ birthday || '请选择出生日期' }}
				</div>
				<u-picker
					v-model="showBirthday"
					mode="time"
					:confirm-color="lightColor"
					@confirm="selectTime"
				></u-picker>
			</u-form-item>

			<u-form-item
				label="城市"
				label-width="150"
				placeholder="请选择城市"
				right-icon="arrow-right"
			>
				<div
					style="width: 32vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
					@click="clickRegion"
				>
					{{ form.___path || '请选择城市' }}
				</div>
			</u-form-item>
		</u-form>
		<div style="display: flex; justify-content: center"></div>
		<div class="bottom">
			<view
				class="submit"
				@click="submit"
			>
				保存
			</view>
			<view
				class="submit light"
				@click="showModalDialog"
			>
				退出登录
			</view>
		</div>
		<u-modal
			show-cancel-button
			v-model="quitShow"
			@confirm="confirm"
			:confirm-color="lightColor"
			:async-close="true"
			:content="userInfo.id ? '确定要退出登录么？' : '确定要返回登录么？'"
		></u-modal>
		<m-city
			:provinceData="region"
			headTitle="区域选择"
			ref="cityPicker"
			@funcValue="getpickerParentValue"
			pickerSize="4"
		></m-city>
	</view>
</template>
<script>
import { saveUserInfo, geterwei } from '@/api/members.js';
import { upload } from '@/api/common.js';
import { logout } from '@/api/login';
import storage from '@/utils/storage.js';
import uFormItem from '@/uview-ui/components/u-form-item/u-form-item.vue';
import gkcity from '@/components/m-city/m-city.vue';
import { clearIm } from '@/utils/handleim.js';
export default {
	components: {
		uFormItem,
		'm-city': gkcity
	},
	data() {
		return {
			erwei: '',
			quitShow: false,
			userInfo: {},
			lightColor: this.$lightColor, //高亮颜色
			form: {
				nickName: storage.getUserInfo().nickName || '',
				birthday: storage.getUserInfo().birthday || '',
				face: storage.getUserInfo().face || '/static/imlogo.png', //默认头像
				regionId: [], //地址Id
				region: storage.getUserInfo().region || [], //地址
				sex: storage.getUserInfo().sex, //性别
				___path: storage.getUserInfo().region
			},
			birthday: storage.getUserInfo().birthday || '', //生日
			photo: [
				{
					text: '立即拍照',
					color: this.$mainColor
				},
				{
					text: '从相册选择',
					color: this.$mainColor
				}
			],
			region: [
				//请求城市默认地址
				{
					id: '',
					localName: '请选择',
					children: []
				}
			],
			showBirthday: false //显示生日日期
		};
	},
	onShow() {
		this.userInfo = this.$options.filters.isLogin();
		this.getgeterwei();
	},
	methods: {
		showQrCodeInFullSize() {
			uni.previewImage({
				urls: [this.erwei],
				current: this.erwei
			});
		},
		getgeterwei() {
			geterwei().then((res) => {
				this.erwei = res.data.result;
			});
		},
		showModalDialog() {
			this.quitShow = true;
		},
		clear() {
			storage.setRefreshVlogIndex('1'); //需要刷新
			storage.setHasLogin(false);
			storage.setAccessToken('');
			storage.setRefreshToken('');
			storage.setUuid('');
			storage.setUserInfo({});
			// 清理vlog信息
			storage.setVlogToken('');
			storage.setVlogUserInfo(null);
			// 清除初始化数据内容
			storage.setRefreshVlogIndex('1'); //需要刷新
			// 退出im登录
			clearIm();
			this.$options.filters.navigateToLogin('redirectTo');
		},
		/**
		 * 确认退出
		 * 清除缓存重新登录
		 */
		async confirm() {
			await logout();
			this.clear();
		},
		/**
		 * 退出登录
		 */
		quiteLoginOut() {
			this.$options.filters.quiteLoginOut();
		},
		/**
		 * 选择地址回调
		 */
		getpickerParentValue(e) {
			this.form.region = [];
			this.form.regionId = [];
			let name = '';

			e.forEach((item, index) => {
				if (item.id) {
					this.form.region.push(item.localName);
					this.form.regionId.push(item.id);
					if (index == e.length - 1) {
						name += item.localName;
					} else {
						name += item.localName + ',';
					}
					this.form.___path = name;
				}
			});
		},

		/**
		 * 点击选择地址
		 */
		clickRegion() {
			this.$refs.cityPicker.show();
		},

		/**
		 * 提交保存
		 */
		submit() {
			delete this.form.___path;
			let params = JSON.parse(JSON.stringify(this.form));
			saveUserInfo(params).then((res) => {
				if (res.statusCode == 200) {
					storage.setUserInfo(res.data.result);
					uni.navigateBack();
				}
			});
		},

		/**
		 * 修改头像
		 */
		changeFace(index) {
			uni.chooseImage({
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: upload,
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							accessToken: storage.getAccessToken()
						},
						success: (uploadFileRes) => {
							let data = JSON.parse(uploadFileRes.data);
							this.form.face = data.result;
						}
					});
				}
			});
		},

		/**
		 * 选择地址
		 */
		selectRegion(region) {
			this.$set(this.form, 'address', `${region.province.label} ${region.city.label} ${region.area.label}`);
		},

		/**
		 * 选择时间
		 */
		selectTime(time) {
			this.form.birthday = `${time.year}-${time.month}-${time.day}`;
			this.birthday = `${time.year} - ${time.month} - ${time.day}`;
		}
	},

	/**
	 * 加载数据
	 */
	onLoad() {}
};
</script>

<style lang="scss" scoped>
.submit {
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	margin-top: 90rpx;

	width: 100%;
	margin: 0 auto;
	color: $main-color;
	border-radius: 100px;
}

.head {
	height: 260rpx;
	color: $font-color-light;
	font-size: $font-sm;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 2em;

	image {
		width: 144rpx;
		height: 144rpx;
		border-radius: 50%;
	}
}

/deep/ .u-form {
	background-color: #ffffff;
	padding: 0;
	margin-top: 30rpx;

	.u-form-item {
		padding: 0 20rpx;
		height: 110rpx;
		line-height: 110rpx;
	}
}

.form {
	background-color: #ffffff;
}
.bottom {
	position: fixed;
	bottom: 40px;
	display: flex;
	align-items: center;
	width: 100%;
	> .submit {
		background: $light-color;
		background: #fe3c3c;
		color: #fff;
		width: 40%;
	}
}

::v-deep {
	.u-radio__icon-wrap--checked {
		//  background: #FE3C3C;
		//  border: 1px solid #FE3C3C;
		border-color: #fe3c3c !important;
		background-color: #fe3c3c !important;
	}
}

.u-form-item div {
}
</style>
