<template>
    <div class="page">
        <van-cell-group :border="false">
            <van-cell title="修改登录密码" :to="{ path: '/forget' }" is-link />
            <!-- <van-cell title="修改支付密码" :to="{ path: '/tradingPassword' }" is-link /> -->
            <!-- <van-cell title="修改手机号" :to="{ path: '/changePhone' }" :value="userInfo.phone" is-link /> -->
            <van-cell title="注销账号" @click="cancel" is-link />
            <van-cell title="当前版本" value="1.0.0" />
        </van-cell-group>
        <div class="logout">
            <van-button type="primary" @click="logout" plain block round>退出登录</van-button>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    computed: {
        ...mapState(['userInfo'])
    },
    methods: {
        logout() {
            this.$dialog
                .confirm({
                    title: '提示',
                    message: '确认要退出登录吗?'
                })
                .then(() => {
                    localStorage.removeItem('dianjinToken');
                    this.$router.go(-1);
                });
        },
        cancel() {
            this.$dialog.confirm({
                title: '提示',
                message:
                    '亲爱的用户，你确定要注销该账号吗？注销账号涉及个人信息与链上资产，建议提交客服进行人工审核与处理。',
                confirmButtonText: '确认注销'
            });
        }
    }
};
</script>

<style lang="less" scoped>
.title {
    background-color: @bg;
    padding: 10px 16px;
    font-size: 20px;
    font-weight: bold;
    color: @text0;
    line-height: 30px;
}
.page {
    background-color: @bg3;
}

.van-cell-group {
    background-color: @bg;
}
.van-cell {
    padding: 23px 16px;
}
.logout {
    padding: 50px 30px 50px;
}
.van-button {
    border-width: 1px;
}
</style>
