<template>
	<view class="account_safe" :style="vuex_theme">
		<view class="cell top">
			<u-cell-group>
				<u-cell title="登录账号" :isLink="true" url="/pages/main/my/editAccount/editAccount" arrow-direction="right"
					:rightIconStyle="{fontSize:'26rpx'}" :title-style="{color:'#909097', fontSize:'28rpx'}">
					<text slot="value" class="u-slot-value">{{accountName}}</text>
				</u-cell>
				<u-cell title="修改登录密码" :isLink="true" url="/pages/main/my/editPassword/editPassword"
					arrow-direction="right" :rightIconStyle="{fontSize:'26rpx'}"
					:title-style="{color:'#909097', fontSize:'28rpx'}">
					<text slot="value" class="u-slot-value">******</text>
				</u-cell>
			</u-cell-group>
		</view>

		<view class="cell bottom">
			<u-cell-group :border="false">
				<u-cell title="手机号" :isLink="true" url="/pages/main/my/editMobile/editMobile" arrow-direction="right"
					:rightIconStyle="{fontSize:'26rpx'}" :title-style="{color:'#909097', fontSize:'28rpx'}">
					<text slot="value" class="u-slot-value">{{getPhone}}</text>
				</u-cell>
				<u-cell title="注销账户" :isLink="true" url="/pages/main/my/removeAccount/removeAccount" arrow-direction="right"
					:rightIconStyle="{fontSize:'26rpx'}" :title-style="{color:'#909097', fontSize:'28rpx'}">
				</u-cell>
			</u-cell-group>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		replaceTextToStar
	} from '@/common/commonUtil.js'

	export default {
		data() {
			return {

			}
		},

		computed: {
			...mapState({
				accountName: (state) => state.vuex_user.username ? state.vuex_user.username : '',
				
				getPhone(state) {
					let phone = state.vuex_user.phone;
					return phone ? replaceTextToStar(phone) : '';
				},
				
			}),
		},

		methods: {
			link(type) {

				switch (type) {
					case 'account':
						this.$u.route('/pages/student/my/edit-account/edit-account');
						break;

					case 'password':
						this.$u.route('/pages/student/my/edit-password/edit-password');
						break;
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.account_safe {
		width: 100%;
		height: 100%;
		background-color: #F7F7F7;
		padding: 20rpx 0 0 0;

		.top {
			margin: 0 0 20rpx 0;
		}

		.cell {
			background-color: #FFFFFF;

			.u-slot-value {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #202131;
			}
		}

		.cell /deep/ .u-cell {
			padding: 12rpx 0;

			.u-cell__value {
				font-size: 34rpx;
				color: rgba(0, 0, 0, 0.5);
			}
		}
	}
</style>