<template>
    <div class="conts">
        <img src="../../assets/paimingbj.png" style="width: 100%; height: 43vh;">
        <div class="flex-box">
            <div class="jifen">
                <div v-for="(item,index) in number.length" :key="index" style="position: relative;">
                    <img src="../../assets/rili.png" style="width:18vw;height:18vw; display: inline-block;">
                    <div class="fen">{{sub(number,index)}}</div>
                </div>
            </div>
            <div class="wenzi">累计积分</div>
            <div class="btn">当前全省排第<span class="shuzi">{{order}}</span>名</div>
        </div>
        <div class="white-box">
            <el-tabs v-model="activeName" stretch @tab-click="handleClick">
                <el-tab-pane label="采集记录" name="first">
                    <div class="scroll scorll-div">
                        <div class="flex-shu scroll " v-for="(item,index) in valueInfoList" :key="index">
                            <div>
                                <div>{{item.oldName}}</div>
                                <div class="tabs-time">{{getIme(item.time)}}</div>
                            </div>
                            <div class="addfive">
                                +5
                            </div>
                        </div>
                    </div>
                    <el-button size="small" style="margin-top: 2vh" type="primary" @click="goBack">返回上一页</el-button>
                </el-tab-pane>
                <el-tab-pane label="巡访记录" name="second">
                    <div class="scroll scorll-div">
                        <div class="flex-shu scroll " v-for="(item,index) in valueVisitList" :key="index">
                            <div>
                                <div>{{item.oldName}}</div>
                                <div class="tabs-time">{{getIme(item.time)}}</div>
                            </div>
                            <div class="addfive">
                                +1
                            </div>
                        </div>
                    </div>
                    <el-button size="small" style="margin-top: 2vh" type="primary" @click="goBack">返回上一页</el-button>
                </el-tab-pane>
            </el-tabs>

        </div>


    </div>
</template>

<script>
    import {
        getpaixing
    } from "../../api";
    import formateTime from '../../util/times'
    import {decryptListData_ECB_Value} from "@/api/tool/sm4";

    export default {
        name: "mypersonalInterests",
        data() {
            return {
                activeName: 'first',
                valueInfoList: [],
                valueVisitList: [],
                order: 0,
                number: ''
            };
        },
        methods: {
            submit() {

            },
            sub(val,index) {
                return val.slice(index, index + 1)
            },
            goBack() {
                this.$router.replace("/my/index");
            },
            handleClick() {

            },
            getIme(time) {
                return formateTime.setNowTimes(time)
            },
            async getpaixing() {
                const result = await getpaixing();
                decryptListData_ECB_Value(result);
                if (result.code == 0) {
                    console.log(result.data)
                    this.valueInfoList = result.data.valueInfoList;
                    this.valueVisitList = result.data.valueVisitList;
                    this.order = result.data.order;
                    this.number = result.data.userTotalValue.toString();

                }
            },
        },
        mounted() {
            this.getpaixing();
        },

    };
</script>

<style scoped>

    .wenzi {
        margin-top: 1vh;
        font-size: 5vw;
    }

    .btn {
        width: 100%;
        background: linear-gradient(0deg, rgba(255, 160, 53, 1) 0%, rgba(255, 226, 63, 1) 100%);
        border-radius: 39px;
        color: #333333;
        text-align: center;
        padding: 3vw 0;
        margin-top: 4vh;
    }

    .flex-box {
        width: 80%;
        margin: 0 auto;
        position: absolute;
        top: 5vh;
        left: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
    }

    .white-box {
        width: 90%;
        padding-bottom: 20px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 21px 0px rgba(13, 109, 195, 0.2);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border: 5px solid white;
        margin: 0 auto;
        position: absolute;
        top: 32vh;
        left: 5%;
    }

    .flex-shu {
        display: flex;
        justify-content: space-between;
        padding: 5px 30px;
        border-bottom: 1px solid rgba(227, 229, 235, 1);
        font-size: 17px;

    }

    .scorll-div {
        overflow-y: auto;
        overflow-x: hidden;
        height: 45vh;
    }

    .tabs-time {
        color: #878787;
        font-size: 16px;
        margin-top: 1vh;
    }

    .addfive {
        color: #FD1200;

    }

    .scroll::-webkit-scrollbar {
        background-color: #F3F3F3;
        height: 8px;
        width: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .scroll::-webkit-scrollbar-track {
        opacity: 0;
        transition: opacity 0.12s ease-out;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .scroll::-webkit-scrollbar-thumb {
        background-color: #368FF9;
        transition: background-color 0.3s;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

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


    .jifen {
        /* color: #2087F7; */
        color: white;
        height: 10vh;
        font-size: 38px;
        display: flex;
    }


    .fen {
        position: absolute;
        top: 10px;
        left: 33%;
        color: #2188f7;
        font-size: 10vw;
    }
</style>
