<template>
    <div class="page">
        <div class="profit-info">
            <h6 class="tit">累计直邮佣金</h6>
            <div class="money green" v-if="dataInfo">
                {{ dataInfo.totalCommission / 100 }}
            </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">
            <li v-for="item of listData" :key="item.id">
                <div class="top">
                    <div class="tit">
                        {{ item.title }}
                        <span class="shop-name">({{ item.shopName }})</span>
                    </div>
                    <!-- <div class="money" :class="{green:item.type===8 || item.type===10 || item.type===12}">{{(item.type===8 || item.type===10 || item.type===12)?'+':'-'}}{{ item.amount / 100 }}</div> -->
                    <div class="date">{{ item.createdTime | dateFormat("yyyy-MM-dd hh:mm") }}</div>
                </div>
                <div class="info">
                    <div class=""></div>
                    <div class="formula blod" v-if="item.type === 8">
                        ￥{{ item.totalCommission / 100 }}(佣金) - ￥{{item.pointsPrice / 100}}(积分抵扣) = 
                        <span class="green">+￥{{ item.amount / 100 }}</span>
                    </div>
                    <div class="formula blod" v-if="item.type === 9">
                        佣金回退：
                        ￥{{ item.totalCommission / 100 }}(佣金) - ￥{{item.pointsPrice / 100}}(积分抵扣) =  
                        <span class="red">-￥{{ item.amount / 100 }}</span>
                    </div>
                    <div class="formula blod" v-if="item.type === 10">
                        BD佣金：￥{{ item.totalCommission / 100 }}(佣金) * 20% = 
                        <span class="green">+￥{{ (item.totalCommission * 0.2) | minuteToRmb }}</span>
                    </div> 
                    <div class="formula blod" v-if="item.type === 11">
                        BD佣金回退：￥{{ item.totalCommission / 100 }}(佣金) * 20% =
                        <span class="red">-￥{{ (item.totalCommission * 0.2) | minuteToRmb }}</span>
                    </div>
                    <div class="formula blod" v-if="item.type === 12">
                        BDM佣金：￥{{ item.totalCommission / 100 }}(佣金) * 5% = 
                        <span class="green">+￥{{ (item.totalCommission * 0.05) | minuteToRmb }}</span>
                    </div>
                    <div class="formula blod" v-if="item.type === 13">
                        BDM佣金回退：￥{{ item.totalCommission / 100 }}(佣金) * 5% = 
                        <span class="red">-￥{{ (item.totalCommission * 0.05) | minuteToRmb }}</span>
                    </div>
                </div>
                <div class="bottom">
                    <div class="num">订单号：{{ item.orderNo }}</div>
                    <div
                        class="link"
                        @click="
                            jump({
                                path: '/pages/youxuan/order/detail',
                                query: { id: item.orderId, type: item.type },
                            })
                        "
                    >
                        查看订单
                    </div>
                </div>
            </li>
        </ul>
        <div class="more-text" v-if="dataEnd">- 没有更多数据了 -</div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
export default {
    name: "",
    components: { MyImage },
    // 数据
    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("/Yx/GetProfitInfo").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("/Yx/GetProfitList", 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("/Yx/GetProfitList", 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;
    .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;
    li {
        border-bottom: 1px solid #f1f1f1;
        padding: px(30) px(40);
    }
    .top,
    .info,
    .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .tit {
        font-size: px(48);
    }
    .money {
        color: #ff4b26;
    }
    .green {
        color: #27a34f;
    }
    .info,
    .bottom {
        font-size: px(40);
        color: #666;
        margin-top: px(10);
    }
    .formula {
        font-weight: bold;
    }
    .link {
        color: #4395ff;
    }
    .num {
        color: #999;
    }
}
.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>