<template>
    <!-- <TopNavigation/> -->
    <div class="content">
        <div class="account_security">账户安全</div>
        <div class="modify_list" v-for="(item,index) in modifyList" :key="index" @click="modifyAccount(index)">
            <div class="modify_list_title">{{item.title}}</div>
            <img :src="item.img" alt="" class="modify_list_img">
        </div>
        <div class="log_out">
            <div class="log_out_con" @click="logout">退出登录</div>
        </div>
        <div class="cancellation_of_account" @click="cancel">注销账户</div>
    </div>
</template>

<script>
// import TopNavigation from "../../components/TopNavigation.vue"
export default {
    components: {
        // TopNavigation
    },
    data(){
        return{
            modifyList: [
                {
                    title: "修改登录密码",
                    img: require('@assets/icon_inter.png')
                },
                {
                    title: "修改支付密码",
                    img: require('@assets/icon_inter.png')
                },
                {
                    title: "修改手机号",
                    img: require('@assets/icon_inter.png')
                }
            ]
        }
    },
    methods: {
        modifyAccount(index){
            switch(index){
                case 0:
                    this.$router.push("/forget")
                    break;
                case 1:
                    this.$router.push("/tradingPassword")
                    break;
                default:
                    this.$router.push("/changePhone")
            }
        },
        logout() {
            this.$dialog
                .confirm({
                    title: '提示',
                    message: '确认要退出登录吗?'
                })
                .then(() => {
                    localStorage.removeItem('nineToken');
                    this.$router.go(-1);
                });
        },
        cancel() {
            this.$dialog
                .confirm({
                    title: '提示',
                    message:
                        '亲爱的用户，你确定要注销该账号吗？如果你选择继续注销你APP的所有的订单以及内容将会全部清除，请您谨慎操作，如果你确定注销，我们会在15个工作日以内将您的账号注销?'
                })
                .then(() => {
                    this.$router.go(-1);
                });
        }
    }
};
</script>

<style lang="less" scoped>
.content{
        // margin-top: 44px;
        padding: 16px 10px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        // position: absolute;
        background: #0F0F27;
        .account_security{
            margin-left: 6px;
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            margin-bottom: 20px;
        }
        .modify_list{
            height: 52px;
            background: #29293F;
            border-radius: 8px;
            padding: 14px 12px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .modify_list_title{
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                margin-top: 4px;
            }
            .modify_list_img{
                width: 24px;
                height: 24px;
            }
        }
        .log_out{
            margin-top: 90px;
            padding: 0 58px;
            box-sizing: border-box;
            margin-bottom: 264px;
            .log_out_con{
                height: 40px;
                border-radius: 8px;
                border: 1px solid #939599;
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #939599;
                line-height: 40px;
                text-align: center;
            }
        }
        .cancellation_of_account{
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #939599;
            text-align: center;
        }
}
</style>
