<template>
	<view class="content">
		<view class="set-nav-block">
			<view class="set-nav" @click="onNav('UserCertification')">
				<label>实名认证</label>
				<view class="value nowrap">
					{{certification ? certification_data.id_card : '未认证'}}<uni-icons type="right" color="gray"></uni-icons>
				</view>
			</view>
			<view class="border-solid-empty"></view>
			<view class="set-nav"@click="onNav('UserInfo')">
				<label>手机号码</label>
				<view class="value nowrap">
					{{username}}<uni-icons type="right" color="gray"></uni-icons>
				</view>
			</view>
		</view>
		<view class="set-nav-block">
			<view class="set-nav" @click="onNav('ResetPassword', { type: 'userSet' })">
				<label>修改密码</label>
				<view class="value nowrap">
					<uni-icons type="right" color="gray"></uni-icons>
				</view>
			</view>
			<view class="border-solid-empty"></view>
			<view class="set-nav" @click="onNav('UserData')">
				<label>账户信息</label>
				<view class="value nowrap">
					<uni-icons type="right" color="gray"></uni-icons>
				</view>
			</view>
		</view>
		<view class="set-nav-block">
			<view class="set-nav" @click="onLogout">
				<label>退出登录</label>
				<view class="value nowrap">
					<uni-icons type="right" color="gray"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { userInfo } from '@/apis/interfaces/user.js'
	export default {
		data() {
			return {
				username			: '',
				certification		: false,
				certification_data	: {}
			};
		},
		onShow() {
			uni.showLoading({
				title: '加载中...'
			})
			userInfo().then(res => {
				let { username, certification, certification_data } = res
				this.username = username
				this.certification = certification
				this.certification_data = certification_data
				uni.hideLoading()
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			onLogout(){
				this.$store.commit('setToken', '');
				this.$Router.replaceAll({
				    name: 'Auth'
				})
			},
			onNav(name, p){
				let params = p || {}
				this.$Router.push({name, params})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding-top: 30rpx;
		box-sizing: border-box;
		.set-nav-block{
			padding-bottom: 30rpx;
			.set-nav{
				background: white;
				display: flex;
				justify-content: space-between;
				padding: 32rpx;
				position: relative;
				label{
					width: 200rpx;
					font-size: 32rpx;
					line-height: 40rpx;
				}
				.value{
					line-height: 40rpx;
					width: calc(100% - 200rpx);
					text-align: right;
					font-size: 30rpx;
					color: gray;
				}
			}
		}
	}
</style>
