<template>
    <div class="content">
        <div class="header">
            <u-navbar
                :background="{ backgroundColor: '#ffcb57' }"
                :border-bottom="false"
                title="账户明细"
                title-color="#472d21"
            ></u-navbar>
        </div>
        <view class="wrap">
            <view class="fl-tool" @click="handleShowFilter">
                <span class="month">{{ selectKey }}</span>
                <u-icon :name="`arrow-${showFilter ? 'up' : 'down'}`"></u-icon>
            </view>
            <view class="list">
                <view class="list-item" v-for="item in list" :key="item.Id">
                    <view class="line mark">{{ item.FOrderBillNo }}</view>
                    <view class="line">
                        <view class="line-name">{{ item.FPayType }}</view>
                        <view class="line-name">{{ item.FAmount }}元</view>
                    </view>
                    <view class="line">
                        <view class="line-desc">{{ item.FWxPayTime }}</view>
                        <view class="line-status">{{ item.FPayUserName }}</view>
                    </view>
                </view>
            </view>
        </view>
        <u-picker
            mode="selector"
            v-model="showFilter"
            :range="filterKeys"
            range-key="label"
            @confirm="changeFilter"
            confirm-color="#ffcb57"
        ></u-picker>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            group: {},
            showFilter: false,
            list: [],
            selectKey: '全部',
            filterKeys: [],
        };
    },
    onLoad() {
        const arr = this.userDetail.FWxPayEntity.reverse();
        this.group['全部'] = arr;
        arr.forEach((payitem) => {
            let groupitem = this.group[payitem.FWxPayTime.substring(0, 7)];
            if (!groupitem) {
                this.group[payitem.FWxPayTime.substring(0, 7)] = [];
            }
            this.group[payitem.FWxPayTime.substring(0, 7)].push(payitem);
        });
        this.list = arr;
        this.filterKeys = Object.keys(this.group).map((x) => {
            return {
                value: x,
                label: x,
            };
        });
    },
    computed: {
        ...mapGetters({
            userDetail: 'user/userDetail',
        }),
    },
    methods: {
        changeFilter(e) {
            this.selectKey = this.filterKeys[e[0]].value;
            this.list = this.group[this.selectKey];
        },
        handleShowFilter() {
            this.showFilter = true;
        },
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '京台分享更多精彩',
            path: '/pages/index/index',
            imageUrl: '/static/images/share/WechatIMG96.png'
        };
    },
};
</script>

<style lang="scss" scoped>
.content {
    .header {
        background-color: #ffcb57;
    }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        .fl-tool {
            padding: 24rpx 32rpx;
            background-color: #ffe58f;
            .month {
                margin-right: 12rpx;
                color: #434343;
            }
        }
        .list {
            padding: 0 32rpx;
            .list-item {
                padding: 32rpx 0;
                border-bottom: 1rpx solid #d9d9d9;
                .line {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 12rpx;
                    &.mark {
                        font-weight: 500;
                        font-size: 24rpx;
                        color: #595959;
                    }
                    &:last-child {
                        margin-bottom: 0;
                    }
                    .line-name {
                        font-size: 28rpx;
                        color: #434343;
                    }
                    .line-desc {
                        font-size: 24rpx;
                        color: #8c8c8c;
                    }
                    .line-status {
                        font-size: 24rpx;
                        color: #faad14;
                    }
                }
            }
        }
    }
}
</style>
