<template>
    <div class="conts">
        <img class="bg-photo" src="../../assets/card.jpg">
        <div class="title">
            <div style="margin-bottom: 2vh;padding: 1vh; width: 10vw;"  @click="goBack"><</div>
            <img class="photo" :src="servelUrl+info.headPicPath">
            <div>采集巡访员</div>
            <div class="name">{{info.userName}}</div>
            <img class="tupian" width="200" height="20" src="../../assets/shuangjian.png">
        </div>
        <div class="content-box">
            <div class="flex-box">
                <div style="width: 28%">身份证号:</div>
                <div class="right-content">{{info.idCardNumber}}</div>
            </div>

            <div class="flex-box">
                <div style="width: 28%">认证时间:</div>

                <div class="right-content">{{getIme(info.time) }}</div>
            </div>
            <div class="flex-box">
                <div style="width: 28%">认证地点:</div>
                <div class="right-content" v-if="info.dept1 && info.dept1.name  ">
                    {{info.dept1.name}}{{info.dept2.name}}{{info.dept3.name}}{{info.dept4.name}}{{info.dept5.name}}
                </div>
            </div>

            <div class="flex-box">
                <div style="width: 28%">联系方式:</div>
                <div class="right-content">{{info.phone}}</div>
            </div>


        </div>
        <img class="zhang" src="../../assets/zhang.png">
        <div class="time">{{time}}</div>
    </div>
</template>

<script>
    import {
        getLoginUserInfo
    } from "../../api";
    import formateTime from '../../util/formateTime'
    import formateTimes from '../../util/times'
    import { decryptData_ECB } from '@/api/tool/sm4'
    export default {
        name: "aboutme",
        data() {
            return {
                currentWordNumber: 0,
                max: 0,
                textarea: '',
                time: '',
                info: {},
            };
        },
        methods: {
            goBack() {
                this.$router.replace("/my/index");
            },
            getIme(time) {
                return formateTimes.setNowTimes(time)
            },
            async getLoginUserInfo() {
                const result = await getLoginUserInfo();
                decryptData_ECB(result, ["userName", "idCardNumber", "phone"]);
                if (result.code == 0) {
                    this.info = result.data
                }
            }

        },
        mounted() {
            var that = this;
            setInterval(function () {
                let result = formateTime.setNowTimes(new Date())
                that.time = result
            }, 1000);

            this.getLoginUserInfo();
        },

    };
</script>

<style scoped>
    .conts {
        width: 100%;
        height: 100%;
        position: absolute;
        /*z-index: -99999;*/

    }

    .conts .bg-photo {
        width: 100%;
        height: 100%;
    }

    .photo {
        /*width: 125px;*/
        /*height: 125px;*/

        width: 35vw;
        height: 35vw;
        border-radius: 10px;
        border: 1px solid seagreen;
        margin-bottom: 10%;
    }

    .title {
        position: absolute;
        top: 2%;
        width: 100%;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }

    .name {
        font-size: 17px;
        margin-top: 10px;

    }

    .content-box {
        position: absolute;
        top: 50%;
        left: 18%;
        width: 70%;
        font-size: 2.3vh;
    }

    .flex-box {
        display: flex;
        width: 100%;
    }

    .right-content {
        min-width: 0;
        flex: 1;
    }

    .content-box > div {
        margin-bottom: 20px;
    }

    .zhang {
        position: absolute;
        top: 70%;
        right: 10%;
        width: 110px;
        height: 110px
    }

    .time {
        position: absolute;
        top: 94%;
        width: 100%;
        color: white;
        font-size: 17px;
        text-align: center;
    }

    .buttons {
        position: absolute;
        z-index: 900;
        top: 90%;
    }


    /deep/ .el-button {
        width: 90%;
        margin-left: 5%;
    }

    .tupian {
        position: relative;
        top: -10vw;
    }

</style>
