<template>
	<view class="content">
		<view class="caritem">
			<view class="text">头像</view>
			<image :src="user.head_pic" class="image"></image>
		</view>
		<view class="caritem">
			<view class="text">昵称</view>
			<view class="text_r">
				<text v-if="!isEdit">{{user.nickname}}</text>
				<input v-else type="text" v-model='nickname' @blur="handleBlur" />
				<uni-icons type="compose" color="#FEC407" @click="isEdit=true" class="ml-10" size="22"></uni-icons>
			</view>
		</view>
		<view class="caritem" @click="navTo('/pageTwo/setting/phone')">
			<view class="text">手机号</view>
			<view class="text_r">
				<text>{{user.my_tel}}</text>
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<view class="caritem" @click="navTo('/pageTwo/setting/email')">
			<view class="text">邮箱</view>
			<view class="text_r">
				<text>{{user.my_email}}</text>
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<view class="caritem" @click="navTo('/pageTwo/setting/password')">
			<view class="text">设置密码</view>
			<uni-icons type="right"></uni-icons>
		</view>
		<view class="btn mb-15" @click="handleOutLogin">删除账号</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				isEdit: false,
				headimg: null,
				nickname: ""
			};
		},
		computed: {
			...mapState(["accountNumber"]),
			user() {
				return this.accountNumber
			}
		},
		methods: {
			handleOutLogin() {
				let that = this
				uni.showModal({
					title: '友情提示',
					confirmText: '删除',
					content: '删除成功后，该账号的所有关联信息将被清空且无法找回，是否删除？',
					success: function(res) {
						if (res.confirm) {
							that.$model.getdeleteAccount({}).then((res) => {
								if (res.code != 0) return
								that.$tools.msg("删除成功！");
								uni.setStorageSync('token', null)
								uni.setStorageSync('aan_id', null)
								uni.clearStorageSync()
								setTimeout(() => {
									uni.reLaunch({
										url: "/pageTwo/login/login"
									})
								}, 3000);
							})
						} else if (res.cancel) {
							that.$tools.msg("您已取消操作！");
						}
					},
				})
			},
			// 修改昵称
			handleBlur() {
				let that = this
				return that.$model.getAccountNickname({
					nickname: that.nickname,
				}).then(res => {
					if (res.code != 0) return
					that.user.nickname = that.nickname
					that.$store.commit('changeAccountNumber', {
						nickname: that.nickname
					})
					that.isEdit = false
				})
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F3F4F6;
		padding: 15px;
		min-height: 100vh;
		font-size: 36rpx;
	}
	

	.image {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.text_r {
		width: 70%;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		text {
			width: calc(100% - 30px);
			display: inline-block;
		}

		input {
			width: 80%;
			border-bottom: 1px solid #dfdfdf;
		}
	}

	.btn {
		width: 100%;
		background: #999;
		margin: 50px 15px 0 15px;
	}

	.caritem {
		width: calc(100% - 20px);
		height: 50px;
		line-height: 50px;
		background-color: #fff;
		border-radius: 10px;
		padding: 0 10px;
		margin-bottom: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.uni-icons {
			width: 30px;
			text-align: right;
		}
		
	}
</style>