<template>
    <div class="donations">
        <van-row type="flex" justify="center" align="center">
            <van-col span="24">
                <div class="dk-banner">
                    <img src="@/assets/donations_banner.png" alt="" class="dk-banner-img">
                    <div class="dk-banner-content">
                        截止当前已经累计为武汉捐款
                        <div style="font-size: 41px;margin-top: 10px">{{totalMoney}}</div>
                    </div>
                </div>
            </van-col>
        </van-row>
        <van-row class="dk-content">
            <div class="dk-top"></div>
            <van-swipe
                    style="flex: 1;padding: 10px 0;box-sizing: border-box"
                    duration="2000"
                    :autoplay="dkPunchClockAPIList.length>10?2000:''"
                    vertical
                    :loop="true"
                    :height="44"
                    :touchable="false"
                    :show-indicators="false">
                <van-swipe-item v-for="(item,index) in dkPunchClockAPIList" :key="index">
                    <van-row
                            type="flex"
                            justify="space-between"
                            align="center"
                            style="font-size: 14px;padding: 0 15px">
                        <van-col>
                            {{item.dkStaff.name | getStr}}
                        </van-col>
                        <van-col>
                            成功为武汉捐赠0.01元
                        </van-col>
                        <van-col>
                            {{item.punchTime | getDate}}
                        </van-col>
                    </van-row>
                </van-swipe-item>
            </van-swipe>
            <!--            <div class="dk-bottom"></div>-->
        </van-row>

    </div>
</template>

<script>
    import {Button, Col, Row, Calendar, Swipe, SwipeItem} from 'vant';
    import {punchClockContributionMoney} from '@/api/index'
    import {getAction} from '@/api/manage'

    export default {
        name: "index",
        components: {
            [Button.name]: Button,
            [Col.name]: Col,
            [Row.name]: Row,
            [Calendar.name]: Calendar,
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
        },
        data() {
            return {
                totalMoney: 0,
                dkPunchClockAPIList: []
            }
        },
        filters: {
            getStr(str) {
                return str[0] + '**'
            },
            getDate(date) {
                let _date = date.split(' ');
                let _arr = _date[1].split(':');
                _arr.pop();
                return _date[0] + ' ' + _arr.join(':')
            }
        },
        mounted() {
            getAction(punchClockContributionMoney).then(data => {
                this.totalMoney = data.data.totalMoney;
                this.dkPunchClockAPIList = data.data.dkPunchClockAPIList;
            })
        }
    }
</script>

<style scoped>
    .donations {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
    }

    .dk-banner {
        height: 334px;
        background: #4F7DA5;
        position: relative;
    }

    .dk-banner-img {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }

    .dk-banner-content {
        font-size: 14px;
        text-align: center;
        color: #fff;
        position: absolute;
        left: 0;
        top: 177px;
        width: 100%;
    }

    .dk-content {
        flex: 1;
        overflow: hidden;
        position: relative;
    }

    .dk-top {
        height: 240px;
        width: 100%;
        background-image: linear-gradient(to bottom, #fff, transparent);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
    }

    .dk-bottom {
        height: 160px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        background-image: linear-gradient(to top, #fff, transparent);
        z-index: 9999;
    }
</style>
