<template>
	<view class="content">
		<view class="caritem">
			<view class="text">{{$t('infoAvatar')}}</view>
			<image :src="user.head_pic" class="image"></image>
		</view>
		<view class="caritem">
			<view class="text">{{$t('infoNickname')}}</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('/body/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('/body/setting/password')">
			<view class="text">{{$t('titleSetPassword')}}</view>
			<uni-icons type="right"></uni-icons>
		</view>
		<view class="caritem" @click="navTo('/body/setting/email')">
			<view class="text">{{$t('btnDeleteAccount')}}</view>
			<uni-icons type="forward" size="20" color="#666"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				isEdit: false,
				headimg: null,
				nickname: ""
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('titleSet')
			})
		},
		computed: {
			...mapState(["accountNumber"]),
			user() {
				return this.accountNumber
			}
		},
		methods: {
			// 修改昵称
			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>