<template>
    <div class="page">
        <div class="profit-info">
            <div class="item">
                <h6 class="tit">余额</h6>
                <div class="money green" v-if="dataInfo">
                    {{ dataInfo.balance / 100 }}
                </div>
            </div>
            <div class="item">
                <h6 class="tit">待结算金额</h6>
                <div class="money green" v-if="dataInfo">
                    {{ dataInfo.waitingSettleAmount / 100 }}
                </div>
            </div>
        </div>

        <div class="filter">
            <span class="key">时间：</span>
            <picker
                mode="date"
                @change="dateChange($event, 'startDate')"
                :end="filter.endDate || endDate"
                ><input
                    class="value"
                    placeholder="开始日期"
                    :disabled="true"
                    v-model="filter.startDate"
            /></picker>
            <span class="row">至</span>
            <picker
                mode="date"
                @change="dateChange($event, 'endDate')"
                :start="filter.startDate"
                :end="endDate"
                ><input
                    class="value"
                    placeholder="结束日期"
                    :disabled="true"
                    v-model="filter.endDate"
            /></picker>
        </div>

        <ul class="list">
            <h1 class="list-tit">账单列表</h1>
            <li v-for="item of listData" :key="item.id">
                <div class="other">
                    <div class="title">
                        {{ item.title }}
                        <span class="shop">({{ item.shopName }})</span>
                    </div>
                    <div class="time">
                        {{ item.createdTime | dateFormat("yyyy-MM-dd hh:mm") }}
                    </div>
                </div>
                <div class="other">
                    <div class="status">
                        {{ item.type | minaBillType }}({{
                            item.status === 0 ? "未结算" : "已结算"
                        }})
                    </div>
                    <div class="money">￥{{ item.amount / 100 }}</div>
                </div>
                <div class="good-main">
                    <div class="img">
                        <my-image :src="item.productImage"></my-image>
                    </div>
                    <div class="info">
                        <h2 class="good-name">{{ item.productName }}</h2>
                    </div>
                </div>
            </li>
        </ul>
        <div class="more-text" v-if="dataEnd">- 没有更多数据了 -</div>
    </div>
</template>

<script>
let minaBillTypeEnum = {
    1: "充值",
    2: "消费",
    3: "退款",
    4: "收益",
    5: "收益返还",
    6: "提现",
    7: "收入",
    8: "优选佣金",
    9: "优选佣金返还",
    10: "BD佣金",
    11: "BD佣金返还",
    12: "BDM佣金",
    13: "BDM佣金返还",
};
import MyImage from "../../components/image/index";
export default {
    name: "",
    components: { MyImage },
    filters: {
        minaBillType(v) {
            return minaBillTypeEnum[v];
        },
    },
    // 数据
    data() {
        return {
            filter: {
                startDate: "",
                endDate: "",
            },
            pageIndex: 1,
            dataEnd: false,
            listData: [],
            dataInfo: null,
            endDate: "",
        };
    },
    onShow() {},

    onLoad() {
        this.getList();
        this.getInfo();
        this.endDate = this.fn.dateFormat2(new Date());
    },
    onPullDownRefresh() {
        this.getList(true);
        this.getInfo();
    },
    onReachBottom() {
        this.getMoreList();
    },

    // 函数
    methods: {
        getInfo() {
            this.api.get("/Supplier/GetIncomeInfo").then((res) => {
                this.dataInfo = res.data;
            });
        },

        getList(isPull) {
            uni.showLoading({
                title: "加载中...",
            });
            this.pageIndex = 1;
            this.dataEnd = false;
            let sendData = {
                pageIndex: this.pageIndex++,
            };
            if (this.filter.startDate) {
                sendData.startTime = this.filter.startDate;
            }
            if (this.filter.endDate) {
                sendData.endTime = this.filter.endDate;
            }
            this.api.get("/Supplier/GetBillList", sendData).then((res) => {
                if (isPull) {
                    uni.stopPullDownRefresh();
                }
                uni.hideLoading();
                this.listData = res.data;
                if (!this.listData.length) {
                    this.dataEnd = true;
                }
            });
        },
        getMoreList() {
            uni.showLoading({
                title: "加载中...",
            });
            let sendData = {
                pageIndex: this.pageIndex++,
            };
            if (this.filter.startDate) {
                sendData.startTime = this.filter.startDate;
            }
            if (this.filter.endDate) {
                sendData.endTime = this.filter.endDate;
            }
            this.api.get("/Supplier/GetBillList", sendData).then((res) => {
                uni.hideLoading();
                this.listData = [...this.listData, ...res.data];
                if (!res.data.length) {
                    this.dataEnd = true;
                }
            });
        },

        dateChange(e, name) {
            this.filter[name] = e.detail.value;
            this.getList();
        },
    },

    // 数据计算
    computed: {},

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.filter {
    display: flex;
    align-items: center;
    padding: px(40);
    font-size: px(44);
    background-color: #fff;
    .row {
        padding: 0 px(20);
        flex-shrink: 0;
    }
    .key {
        flex-shrink: 0;
    }
    .value {
        border: 1px solid #f1f1f1;
        height: px(80);
        width: px(200);
        padding: 0 px(10);
        width: 90%;
    }
}

.profit-info {
    text-align: center;
    padding: px(60) px(40);
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
        width: 50%;
    }
    .tit {
        font-size: px(44);
    }
    .money {
        font-size: px(56);
        color: #ff4b26;
        margin-top: px(30);
    }
}
.list {
    padding: px(50) 0;
    border-top: 1px solid #f1f1f1;
    background-color: #fff;
    .list-tit {
        font-size: px(50);
        text-align: center;
        padding: px(30) 0;
    }
    li {
        border-bottom: 2px solid #f1f1f1;
        padding: px(30) px(40);
    }
    .other {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: px(10) 0;
        .title {
            font-size: px(44);
            .shop {
                font-size: px(40);
                color: #999;
            }
        }
        .time {
            font-size: px(42);
        }
            .money {
                color: #ff4b26;
            }
    }
    .good-main {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        background-color: #f9f9f9;
        padding: px(10);
        margin-top: px(20);
        .img {
            width: px(250);
            height: px(250);
            margin-right: px(30);
            flex-shrink: 0;
            /deep/ img {
                width: px(250);
                height: px(250);
            }
        }
        .info {
            .good-name {
                font-size: px(42);
                @include omits(2);
            }
        }
    }
}
.blod {
    font-weight: bold;
}
.more-text {
    display: flex;
    justify-content: center;
    padding-bottom: px(60);
    font-size: px(34);
    color: #999;
}
.shop-name {
    color: #666;
    display: inline-block;
    margin-left: px(10);
    font-size: px(40);
}
.green {
    color: #27a34f !important;
}
.red {
    color: #f85e5e !important;
}
</style>