<config>
{
    "navigationBarTitleText": "提现明细",
    "navigationBarBackgroundColor": "#00BA64",
    "navigationBarTextStyle": "white",
    "backgroundColorBottom":'#FFFFFF'
}
</config>
<template>
    <div>
        <van-sticky :offset-top="0">
            <div class="box">
                <div class="time-box" @click="newShow = true">
                    <div class="text">{{ yearMonth ? yearMonth : '请选择时间' }}</div>
                </div>
                <div class="money1">共提现 ¥{{ count || 0 }}</div>
            </div>
        </van-sticky>
        <template>
            <div class="content" v-for="(item, index) in list" :key="index" @click="Jump(item)">
                <div class="con1">
                    <img class="con-img" :src="getIcon(item.status)" />
                    <div>
                        <div class="text1">
                            <!-- {{ item.name + '-' }} -->
                            <span
                                class="span"
                                :class="{
                                    prims: item.status === 'DENY',
                                    prims1: item.status === 'APPLY'
                                }"
                                >{{ item.remark }}</span
                            >
                        </div>
                        <div class="text2">{{ item.createdAt }}</div>
                    </div>
                </div>
                <div
                    class="money"
                    :class="{
                        prims: item.status === 'DENY',
                        prims1: item.status === 'APPLY'
                    }"
                >
                    {{ item.amount > 0 ? '-' : '' }}{{ item.amount }}
                </div>
            </div>
        </template>
        <van-empty v-if="empty" description="暂无记录哦"> </van-empty>
        <van-popup :show="newShow" position="bottom" @close="newShow = false">
            <van-datetime-picker
                type="year-month"
                @cancel="newShow = false"
                :value="currentDate"
                @confirm="onConfirm"
            />
        </van-popup>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'FeeDetail',
    metaInfo: {
        title: '余额明细'
    },
    data() {
        return {
            page: 0,
            last: false,
            time: 0,
            count: 0,
            empty: false,
            newShow: false,
            nowDate: '',
            yearMonth: '',
            list: [
                // {
                //     name: '夏秋雨',
                //     payTime: '2020-10-19',
                //     amount: 100,
                //     status: 'DENY'
                // }
            ],
            currentDate: new Date().getTime()
            // minDate: new Date().getTime()
        };
    },
    computed: {
        ...mapState(['roomInfo', 'userInfo']),
        type() {
            return this.$mp.query.type;
        },
        status() {
            if (this.type === 'ROOM') {
                return true;
            } else {
                return false;
            }
        }
    },
    mounted() {
        this.nowDate = new Date();
        let date = {
            year: this.nowDate.getFullYear(),
            month: this.nowDate.getMonth() + 1
        };
        let systemDate = date.year + '-' + date.month;
        this.yearMonth = systemDate;
        this.Info();
    },
    methods: {
        Jump(item) {
            this.navigateTo('/pages/withdrawalExamine?status=' + item.status + '&types=' + this.type);
        },
        Info() {
            if (this.type === 'ROOM') {
                wx.showLoading({
                    title: '加载中'
                });
                let query = {
                    page: 0,
                    size: 1000,
                    sort: 'createdAt,desc',
                    yearMonth: this.yearMonth
                };
                query.roomId = this.roomInfo.roomId;
                this.$http
                    .get('/roomMoneyWithdrawApply/maSearch', query)
                    .then(res => {
                        wx.hideLoading();
                        this.list = res.content;
                        this.empty = res.empty;
                        let countArr = this.list.filter(item => {
                            return item.amount > 0;
                        });
                        if (countArr.length > 0) {
                            this.count = countArr.reduce((total, item) => {
                                return total + item.amount;
                            }, 0);
                        } else {
                            this.count = 0;
                        }
                    })
                    .catch(e => {
                        wx.hideLoading();
                        wx.showToast({
                            icon: 'none',
                            title: e.error
                        });
                    });
            } else {
                wx.showLoading({
                    title: '加载中'
                });
                let query = {
                    page: 0,
                    size: 1000,
                    sort: 'createdAt,desc',
                    yearMonth: this.yearMonth
                };
                query.userId = this.userInfo.id;
                this.$http
                    .get('/userMoneyWithdrawApply/maSearch', query)
                    .then(res => {
                        wx.hideLoading();
                        this.list = res.content;
                        this.empty = res.empty;
                        let countArr = this.list.filter(item => {
                            return item.amount > 0;
                        });
                        if (countArr.length > 0) {
                            this.count = countArr.reduce((total, item) => {
                                return total + item.amount;
                            }, 0);
                        } else {
                            this.count = 0;
                        }
                    })
                    .catch(e => {
                        wx.hideLoading();
                        wx.showToast({
                            icon: 'none',
                            title: e.error
                        });
                    });
            }
        },
        getIcon(status) {
            switch (status) {
                case 'APPLY':
                    return require('../native/shenqing_shenhezhong@3x.png');
                case 'DENY':
                    return require('../native/shenqing_weitongguo@3x.png');
                case 'SUCCESS':
                    return require('../native/shenqing_yitongguo@3x.png');
            }
        },
        timeFormat(date, fmt) {
            var o = {
                'M+': date.getMonth() + 1 //月份
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp('(' + k + ')').test(fmt))
                    fmt = fmt.replace(
                        RegExp.$1,
                        RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
                    );
            return fmt;
        },
        // 时间确认按钮
        onConfirm(event) {
            this.currentDate = event.detail;
            var timeValue = this.timeFormat(new Date(event.detail), 'yyyy-MM');
            this.yearMonth = timeValue;
            this.Info();
            this.newShow = false;
        }
    }
};
</script>
<style lang="less" scoped>
.box {
    height: 70px;
    background: #f5f7fa;
    line-height: 70px;
    justify-content: space-between;
    padding: 0 20px;
    .flex();
    .time-box {
        width: 70px;
        height: 32px;
        .flex();
        justify-content: center;
        background: #ffffff;
        border-radius: 4px;
        .text {
            font-size: 12px;
            color: #000000;
            line-height: 17px;
        }
    }
    .money1 {
        font-size: 12px;
        font-weight: normal;
        color: #646566;
        line-height: 17px;
    }
}
.content {
    .flex();
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f5f7fa;
    .con1 {
        .flex();
        .con-img {
            width: 50px;
            height: 44px;
            margin-right: 10px;
        }
        .text1 {
            font-size: 14px;
            font-weight: normal;
            color: #000000;
            line-height: 20px;
        }
        .span {
            font-size: 14px;
            font-weight: normal;
            color: #00ba64;
            line-height: 20px;
            &.prims {
                color: #f42202;
            }
            &.prims1 {
                color: #ff7f1f;
            }
        }
        .text2 {
            font-size: 13px;
            font-weight: normal;
            color: #aaacad;
            line-height: 18px;
            margin-top: 4px;
        }
    }
    .money {
        font-size: 16px;
        font-weight: bold;
        color: #00ba64;
        line-height: 24px;
        &.prims {
            color: #f42202;
        }
        &.prims1 {
            color: #ff7f1f;
        }
    }
}
</style>
