<template>
	<view>
		<u-navbar title="设置"></u-navbar>
		<u-cell-group>
			<u-cell-item title="修改手机号" v-model="userPhone" @click="gotoUrl('pages/user/phone')"></u-cell-item>
			<u-cell-item title="注销账号" value="注销后无法恢复，请谨慎操作" :value-style="valueStyle" @click="gotoUrl('pages/user/logout')"></u-cell-item>
		</u-cell-group>
		<view class="logout-btn" @click="signOut">
			退出帐号
		</view>
		<view>
			<u-modal v-model="show" @confirm="confirm":show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" :content="content"></u-modal>
		</view>
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	
	export default {
		data() {
			return {
				show: false,
				title: '退出账号',
				content: '是否退出当前账号?',
				userId: '',
				userPhone: '',
				valueStyle: {
					color:'#ff3300',
				}
			}
		},
		onReady() {
			if(this.carhelp.getPersonInfo()) {
				this.userId = this.carhelp.getPersonInfo().id;
				
				var phone = this.carhelp.getPersonInfo().phone;
				var phone1 = phone.slice(0,3);
				var phone2 = phone.slice(-4);
				this.userPhone = phone1 + '****' + phone2;
			}
		},
		methods: {
			signOut() {
				this.show = true;
			},
			confirm() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.logout().then((res) => {
					uni.hideLoading();
					this.show = false;
					this.carhelp.logoff()
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logout-btn{
		background-color: #fff;
		padding: 12px 0;
		text-align: center;
		margin-top: 12px;
	}
</style>
