<template>
    <div v-if="isTrue">
        <el-image :src="require('../assets/bg_main_new4.jpg')"/>
        <div class="title">
            <span class="red">{{formData.userName}} </span>感谢您总共巡访了
            <span class="red">{{formData.totalCount}} </span>次老人
            <div class="title-text">迄今为止</div>
            <div>
                已经有
                <span class="red">{{formData.visitCount}} </span>位老人得到您的关爱
            </div>
            <div class="title-text">
                您的省排名为
                <span class="red">{{formData.visitOrder}}</span>
            </div>
            <div class="title-text">您的行为配得上一切赞美</div>
            <div class="title-text">因为有您同行我们倍感荣耀</div>
            <div class="title-text">
                恭喜您成为
                <span class="red">“黄钻爱心人士”</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {sumUserOne} from "../api";
    import {Loading} from "element-ui";
    import {decryptData_ECB} from "@/api/tool/sm4";
    export default {
        name: "visitInfoRanking",
        data() {
            return {
                openid: "",
                isTrue: false,
                formData: {
                    userName: "",
                    totalCount: "",
                    visitCount: "",
                    visitOrder: 0
                }
            };
        },
        methods: {
            async sumUserOne1() {
                let loadingInstance = Loading.service();
                let result = await sumUserOne();
                decryptData_ECB(result, ["userName"]);
                if (result.code === 0) {
                    console.log(result.data);
                    this.formData.userName = result.data.userName;
                    this.formData.totalCount = result.data.totalCount;
                    this.formData.visitCount = result.data.visitCount[0].count;
                    this.formData.visitOrder = result.data.visitOrder[0].count + 1;
                    this.isTrue = true;
                    loadingInstance.close();
                }
            }
        },
        computed: {},
        mounted() {
        },
        created() {
            this.$nextTick(function () {
                this.sumUserOne1();
            });
        }
    };
</script>
<style scoped>
    .title {
        height: 100px;
        position: absolute;
        top: 18%;
        left: 36%;
        font-weight: bold;
        text-align: center;
        font-size: 15px;
        color: #551900;
        line-height: 20px;
    }

    .red {
        color: #ff4200;
        font-size: 16px;
        font-weight: bold;
    }
    .title-text {
        margin: 4% 0 4% 0;
    }
    @media (max-width: 320px) {
        .title {
            height: 100px;
            position: absolute;
            top: 9%;
            left: 39%;
            font-weight: bold;
            text-align: center;
            font-size: 10px;
        }

        .red {
            color: #ff4200;
            font-size: 14px;
            font-weight: bold;
        }

        .title-text {
            margin: 4% 0 4% 0;
        }
    }
</style>
