<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
                </ion-buttons>
                <ion-title>{{ $t('title.balanceRecord') }}</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-refresher slot="fixed" @ionRefresh="refresh">
                <ion-refresher-content></ion-refresher-content>
            </ion-refresher>
            <ion-item class="header" sticky>
                <div class="date" @click="showPicker = true">
                    {{ yearMonth }}
                    <ion-icon :icon="caretDownOutline"></ion-icon>
                </div>
                <div class="total">{{ $t('balance.totalWithdraw') }}{{ $t('balance.symbol') }}{{ totalWithDraw }}</div>
            </ion-item>
            <van-list v-model="loading" :finished="finished" :finished-text="$t('common.loadFinish')" @load="loadmore">
                <ion-item class="record-item" v-for="item in records" :key="item.id" :class="item.remark.split('.')">
                    <ion-icon :src="balanceIcon"></ion-icon>
                    <ion-label>
                        <h3>{{ $t(item.remark) }}</h3>
                        <p>{{ item.createdAt.substr(5, 11) }}</p>
                    </ion-label>
                    <ion-label slot="end" class="amount">
                        {{ item.amount >= 0 ? '+' : '' }}{{ item.amount }}
                    </ion-label>
                </ion-item>

                <van-empty v-if="finished && records.length === 0"></van-empty>
            </van-list>
        </ion-content>
        <ion-modal id="picker" :is-open="showPicker" @didDismiss="showPicker = false">
            <ion-datetime
                v-model="date"
                presentation="month-year"
                :cancel-text="$t('common.cancel')"
                :done-text="$t('common.confirm')"
                :show-default-buttons="true"
                @ionChange="confirmPicker"
            ></ion-datetime>
        </ion-modal>
    </ion-page>
</template>
<script>
import balanceIcon from '@/assets/icon_balance.svg'
import { caretDownOutline } from 'ionicons/icons'
import { format, formatISO, parseISO, startOfMonth, endOfMonth } from 'date-fns'
export default {
    data() {
        return {
            page: 0,
            refreshing: true,
            loading: false,
            finished: false,
            records: [],
            balanceIcon,
            caretDownOutline,
            showPicker: false,
            date: formatISO(new Date())
        }
    },
    created() {
        this.getData()
    },
    computed: {
        yearMonth() {
            return format(parseISO(this.date, new Date()), 'yyyy MMM')
        },
        totalWithDraw() {
            return -this.records.filter(i => i.remark === 'balance.record.withdraw').reduce((a, b) => a + b.amount, 0)
        }
    },
    methods: {
        refresh(event) {
            this.loading = true
            this.page = 0
            this.finished = false
            this.getData(event)
        },
        loadmore() {
            this.page++
            this.getData()
        },
        getData(e) {
            const date = parseISO(this.date, new Date())
            return this.$http
                .get('/user/balanceRecord', {
                    page: this.page,
                    size: 10000,
                    start: format(startOfMonth(date), 'yyyy-MM-dd HH:mm:ss'),
                    end: format(endOfMonth(date), 'yyyy-MM-dd HH:mm:ss')
                })
                .then(res => {
                    if (res.number === 0) {
                        this.records = []
                    }
                    this.records = this.records.concat(res.content)
                    this.refreshing = false
                    this.loading = false
                    this.finished = res.last
                    if (e) {
                        e.target.complete()
                    }
                })
        },
        confirmPicker(e) {
            this.date = e.detail.value
            this.getData()
        }
    }
}
</script>
<style lang="less" scoped>
.header {
    --border-style: none;
    .date {
        width: 104px;
        height: 32px;
        background: var(--ion-color-step-0);
        border-radius: 4px;
        font-size: 12px;
        .f();
        justify-content: center;
        ion-icon {
            margin-left: 6px;
        }
    }
    .total {
        flex-grow: 1;
        text-align: right;
        font-size: 12px;
        color: var(--ion-color-step-400);
        padding-right: 6px;
    }
}
.record-item {
    --background: var(--ion-color-step-0);
    --border-color: var(--ion-color-step-100);
    ion-icon {
        width: 32px;
        height: 32px;
    }
    ion-label {
        margin-left: 10px;
    }
    .amount {
        font-weight: bold;
    }
    ion-icon {
        fill: #59b12c;
    }
    &.recharge,
    &.receipt {
        ion-icon {
            fill: #477bff;
        }
        .amount {
            color: #477bff;
        }
    }
    &.withdraw {
        h3 {
            color: #ff7f1f;
        }
        ion-icon {
            fill: #ff7f1f;
        }
        .amount {
            color: #ff7f1f;
        }
    }
}
ion-modal#picker {
    --width: fit-content;
    --min-width: calc(100vw - 80px);
    --height: fit-content;
    --border-radius: 6px;
    --box-shadow: 0 28px 48px rgba(var(--ion-color-light-contrast-rgb), 0.4);
}
ion-datetime {
    color: var(--ion-text-color);
}
</style>
