<template>
    <div class="monthlyReport">
        <div class="el-card__header">
            <span>月度报表</span>

        </div>
        <div class="content">
            <el-form label-width="160px">
                <el-form-item label="更新时间">
                    <div class="row ">
                        <span v-if="UserDate==''">暂无更新时间</span>
                        <span v-else>{{UserDate}}</span>
                        <el-button type="primary" size="small" style="margin-left: 15px;" @click="initialization">初始化数据
                        </el-button>
                    </div>
                </el-form-item>
                <el-form-item label="时间范围">
                    <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" size="small"
                        :clearable="false" @change='getdaterange' value-format="yyyy-MM-dd" end-placeholder="结束日期">
                    </el-date-picker>
                    
                </el-form-item>
                <el-form-item label="新增下线">
                    <el-button type="primary" size="small" style="margin-left: 15px;" @click="newAdd" :loading='loading1'>导出
                    </el-button>
                </el-form-item>
                <el-form-item label="订单佣金">
                    <el-button type="primary" size="small" style="margin-left: 15px;" @click="commission" :loading='loading2'>导出
                    </el-button>
                </el-form-item>
                <el-form-item label="vip购买">
                    <el-button type="primary" size="small" style="margin-left: 15px;" @click="vippurchase" :loading='loading3'>导出
                    </el-button>
                </el-form-item>
                <el-form-item label="新用户下单">
                    <el-button type="primary" size="small" style="margin-left: 15px;" @click="newoverbooking" :loading='loading4'>导出
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                UserDate: '',
                value: [],
                msg: {
                    StartTime: '',
                    EndTime: '',
                },
                loading1:false,
                loading2:false,
                loading3:false,
                loading4:false,
            }
        },
        created() {
            let date1 = new Date();
            //今天时间
            let time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate()
            this.value = [time1, time1]
            this.msg.StartTime = time1;
            this.msg.EndTime = time1;
            this.getUserReferrals()
        },
        methods: {
            //获取顶部客户统计
            getUserReferrals() {
                this.apipost("/api/Report/GetUserReferralsNew", {}, res => {
                    if (res.data.resultCode == 1) {
                        this.UserDate = res.data.data;
                    } else {
                        this.Error(res.data.message);
                    }
                })
            },
            initialization() {//初始化数据
                let that = this;
                that.$confirm('确定初始化数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: '更新中,请耐心等待...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    that.apipost(
                        "/api/Report/SetInitializeReferrals", {},
                        res => {
                            loading.close();
                            if (res.data.resultCode == 1) {
                                that.Success(res.data.message);
                                that.getUserReferrals()
                            } else {
                                that.Error(res.data.message);
                            }
                        },
                    );
                }).catch(() => {

                });

            },
            getdaterange() {
                this.msg.StartTime = this.value[0];
                this.msg.EndTime = this.value[1];
            },
            newAdd() {//新增下线
                this.loading1 = true
                this.GetLocalFile(
                    "/api/Report/GetNewReferralsListToExcel",
                    this.msg,
                    '新增下线'+this.msg.StartTime+'~'+this.msg.EndTime,'',
                    res=>{
                        this.loading1 = false
                    }
                );
            },
            commission(){//订单佣金
                this.loading2 = true
                this.GetLocalFile(
                    "/api/Report/GetOrderCommissionListToExcel",
                    this.msg,
                    '订单佣金'+this.msg.StartTime+'~'+this.msg.EndTime,'',
                    res=>{
                        this.loading2 = false
                    }
                );
            },
            vippurchase(){//Vip购买
                this.loading3 = true
                this.GetLocalFile(
                    "/api/Report/GetVipBuyListToExcel",
                    this.msg,
                    'Vip购买'+this.msg.StartTime+'~'+this.msg.EndTime,'',
                    res=>{
                        this.loading3 = false
                    }
                );
            },
            newoverbooking(){//新用户下单
                this.loading4 = true
                this.GetLocalFile(
                    "/api/Report/GetNewUserListToExcel",
                    this.msg,
                    '新用户下单'+this.msg.StartTime+'~'+this.msg.EndTime,'',
                    res=>{
                        this.loading4 = false
                    }
                );
            }

        },
        mounted() {

        }
    }

</script>

<style>
    .monthlyReport .el-card__header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: #fff;
    }

    .monthlyReport .el-button--small {
        padding: 9px 15px;
    }

    .monthlyReport .content .searchInput {
        border: 1px solid #DCDFE6;
        border-radius: 4px;
    }

    .monthlyReport .content .searchInput .el-input__inner {
        border: none;
        outline: none;
        height: 30px;
        line-height: 30px;
    }

    .monthlyReport .content .searchInput {
        line-height: normal;
        display: inline-table;
        border-collapse: separate;
        border-spacing: 0;
        width: 250px;
        margin-right: 20px;
    }

    .monthlyReport .content {
        background: #fff;
        margin-top: 10px;
        padding: 15px;
        box-sizing: border-box;
    }

    .monthlyReport .el-icon-date {
        line-height: 24px;
    }

    .monthlyReport .el-range-separator {
        line-height: 24px;
    }

    .monthlyReport .zong {
        width: 100%;
        height: 57px;
        padding: 18px 20px;
        border-bottom: 1px solid #EBEEF5;
        background: white;
    }

    .monthlyReport .table-area {
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
    }

    .monthlyReport .table-area .el-card {
        width: 49.5%;
        color: #303133;
    }

    .monthlyReport .el-card {
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        color: #303133;
        -webkit-transition: .3s;
        transition: .3s;
    }

    .monthlyReport .el-card__header {
        padding: 18px 20px;
        border-bottom: 1px solid #EBEEF5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .monthlyReport .el-card__body {
        padding: 20px;
    }

    .monthlyReport .num-info {
        display: flex;
        width: 100%;
        height: 60px;
        font-size: 24px;
        color: #303133;
        margin: 20px 0;
    }

    .monthlyReport .num-info .num-info-item {
        text-align: center;
        flex-grow: 1;
        border-left: 1px dashed #EFF1F7;
    }

    .monthlyReport .info-item-name {
        font-size: 14px;
        color: #92959B;
    }
</style>