<template>
	<view class="content">
		<view class="caritem">
			<view class="text">{{$t("common.infoAvatar")}}</view>
			<image :src="user.head_pic" class="image"></image>
		</view>
		<view class="caritem">
			<view class="text">{{$t("common.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('/pageTwo/setting/phone')">
			<view class="text">{{$t("common.infoMobile")}}</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">{{$t("common.infoEmail")}}</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">{{$t("common.titleSetPassword")}}</view>
			<uni-icons type="right"></uni-icons>
		</view>
		<view class="btn mb-15" @click="handleOutLogin">{{$t("common.btnDeleteAccount")}}</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				isEdit: false,
				headimg: null,
				nickname: ""
			};
		},
		computed: {
			...mapState(["accountNumber"]),
			user() {
				return this.accountNumber
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t('common.titleSet'),
			})
		},
		methods: {
			handleOutLogin() {
				let that = this
				uni.showModal({
					title: that.$t('tips.msgTitle'),
					content: that.$t('tips.verifyDeleteAccount'),
					cancelText: that.$t('tips.btnSancellation'),
					confirmText: that.$t('tips.btnDelete'),
					success: function(res) {
						if (res.confirm) {
							that.$model.getdeleteAccount({}).then((res) => {
								if (res.code != 0) return
								that.$tools.msg(that.$t("tips.msgDelete"));
								uni.$emit('need-login');
							})
						} else if (res.cancel) {
							that.$tools.msg(that.$t("tips.msgCancel"));
						}
					},
				})
			},
			// 修改昵称
			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: 30rpx;
	}

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

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

		text {
			width: 100%;
			display: inline-block;
			margin-right: 7px;
		}

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

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

	.caritem {
		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>