<template>
    <div class="box" v-loading="loading">
        <div class="head">
            <div class="head_portrait"></div>
            <p style="font-size: 20px;color: #FFFFFF;">{{userName}}</p>
            <p style="margin-top: 2%;font-size: 16px;color: #FFFFFF;margin-bottom: 4%">账号: {{loginName}}</p>
        </div>
        <div class="main">
            <div class="card" v-for="(item,index) in cardList" :key="index" @click="jump(item)">
                <div class="card_main">
                    <img :src="item.url" class="card_main_img">
                    <span style="color: #333333;">{{item.label}}</span>
                    <span class="symbol">></span>
                </div>
            </div>
        </div>
        <div class="returnBefore">
            <el-button style="width: 70%" type="primary" @click="goHome">回到上一页</el-button>
        </div>
    </div>

</template>

<script>
import {getbankToken, unbind, userOne} from "../../api";
    import {decryptData_ECB} from "@/api/tool/sm4";

    export default {
        name: "Visit",
        data() {

            return {
                loading: false,
                cardList: [
                    {label: "完善资料", url: require('../../assets/myImg1.png'), address: '/my/finishinfo'},
                    {label: "身份卡", url: require('../../assets/myImg2.png'), address: '/my/card'},
                    {label: "我的排名", url: require('../../assets/myImg7.png'), address: '/my/mypaiming' },
                    {label: "个人权益", url: require('../../assets/myImg6.png'), address: '/my/mypersonalInterests'},
                    {label: "修改密码", url: require('../../assets/myImg3.png'), address: '/my/changePwd'},
                    {label: "意见反馈", url: require('../../assets/myImg4.png'), address: '/my/yijian'},
                    {label: "关于我们", url: require('../../assets/myImg5.png'), address: '/my/aboutme'},
                    // {label:"退出登录",url:require('../../assets/myImg6.png'),address:''}
                ],
                bankUrl: '',
                loginName: '',
                userName: '',
                headPicPath: '',
            };
        },
        methods: {
            goHome() {
                this.$router.replace("/main")
            },
            jump(data) {
                if (data.label === "身份卡") {
                    if (this.headPicPath) {
                        this.$router.replace('/my/idCard')
                    } else {
                        this.$router.replace(data.address)
                    }
                } else {
                  if(data.address === '/my/mypersonalInterests') {
                    window.open(this.bankUrl);
                  }else{
                    this.$router.replace(data.address)
                  }
                }
            },
            async requestLogout() {
                this.loading = true;
                let result = await unbind();
                this.loading = false;
                if (result.code === 0) {
                    this.$message({
                        type: "success",
                        message: "退出成功!"
                    });
                    this.$router.replace("/");
                }
            },
            logout() {
                this.$confirm(
                    "退出后将会解绑当前微信号,无法使用当前微信号自动登陆",
                    "是否退出？",
                    {
                        type: "warning"
                    }
                )
                    .then(() => {
                        this.requestLogout();
                    })
                    .catch(() => {
                    });
            },
            async one() {
                let result = await userOne();
                decryptData_ECB(result, ["userName", "idCardNumber","phone"]);
                if (result.data) {
                    console.log(result)
                    this.loginName = result.data.loginName;
                    this.userName = result.data.userName;
                    this.headPicPath = result.data.headPicPath;
                }
            },
          async getbankTokenT() {
            this.bankUrl = await getbankToken();

          },
        },
      mounted() {
            this.getbankTokenT();
            this.one();
        },
        computed: {}
    };
</script>

<style scoped>
    .box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #F9F9F7;
    }

    .returnBefore {
        z-index: 10;
        /*background: #fff;*/
        width: 100%;
        padding: 15px 0;
        text-align: center;
        position: fixed;
        left: 0;
        bottom: 0;
    }

    .head {
        flex: 3;
        background: url("../../assets/nav.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
    }

    .main {
        flex: 7;
    }

    .head_portrait {
        width: 18vh;
        height: 18vh;
        /*background: #FFFFFF;*/
        background: url("../../assets/my_head.png") no-repeat;
        background-size: 100% 100%;
        border-radius: 50%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 4%;
        margin-bottom: 2%;
    }

    .card {
        width: 96%;
        height: 11%;
        margin-top: 4%;
        margin-left: 2%;
        margin-right: 2%;
        background: #FFFFFF;
        border-radius: 10px;
        position: relative;
    }

    .card_main {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        left: 2%
    }

    .card_main_img {
        width: 5vh;
        height: 5vh;
        margin-right: 2%;
    }

    .symbol {
        position: absolute;
        right: 4%;
        top: 50%;
        transform: translateY(-50%);
        font-size: 30px;
        color: #9b9b9b;
    }

</style>
