<template>
    <div>
        <div class="rvsreport-all">
            <div class="rvsreport-haed">
                <el-date-picker @change="datechange" style="width:350px" v-model="value2" type="daterange" align="left"
                    unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
                <el-button @click="Skeclick" type="primary">生 成</el-button>
            </div>
            <div class="hjbox">
                应收合计：{{total_fr}} 已收合计：{{total_pr}} 余款合计：{{total_balance}}
            </div>
            <div class="rvsreport-table">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column label="应收报表">
                        <el-table-column prop="no" label="序号" width="50">
                        </el-table-column>
                        <el-table-column prop="clientUnit" label="单位" width="180">
                        </el-table-column>
                        <el-table-column prop="teamName" label="团组名称" width="180">
                        </el-table-column>
                        <el-table-column prop="visitDate" label="出访时间" width="100">
                        </el-table-column>
                        <el-table-column label="应收总计(应收+超支)">
                            <el-table-column label="应收" width="150">
                                <template slot-scope="scope">
                                    {{scope.row.frPrice+' RMB'}}
                                </template>
                            </el-table-column>
                            <el-table-column label="超支" width="150">
                                <template slot-scope="scope">
                                    {{scope.row.extraPrice+' RMB'}}
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="已收总计(已收-收款退还)">
                            <el-table-column label="已收" width="150">
                                <template slot-scope="scope">
                                    {{scope.row.prPrice+' RMB'}}
                                </template>
                            </el-table-column>
                            <el-table-column label="收款退还" width="150">
                                <template slot-scope="scope">
                                    {{scope.row.refundAmount+' RMB'}}
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="余款" width="150">
                            <template slot-scope="scope">
                                {{scope.row.balPrice+' RMB'}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="prClient" label="收款单位" width="180">
                        </el-table-column>
                        <el-table-column prop="schedule" label="收款进度">
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
            
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value2: '',
            tableData: [],
            total_balance:'0.00',
            total_fr:'0.00',
            total_pr:'0.00',
        };
    },
    methods:{
        datechange(){
            console.log(this.getdate(this.value2[0]))
            console.log(this.getdate(this.value2[1]))
            this.PostSyntheticalReceivableByDateRange(this.getdate(this.value2[0]),this.getdate(this.value2[1]),1)
        },
        getdate(val){
            var date=new Date(val);
            var y=date.getFullYear();
            var m=date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1;
            var d=date.getDate()<10?'0'+date.getDate():date.getDate();
            return y+'-'+m+'-'+d
        },
        //生成
        Skeclick(){
            var beginDt=this.getdate(this.value2[0]);
            var endDt=this.getdate(this.value2[1]);
            var requestType=2;

            if(beginDt=='NaN-NaN-NaN'||endDt=='NaN-NaN-NaN'){
                this.$message.error('请选择时间段');
                return
            }
            var url = "/api/Financial/PostSyntheticalReceivableByDateRange"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data:{
                    portType: 1,
                    beginDt: beginDt,
                    endDt: endDt,
                    requestType: requestType,
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                   window.open(res.data.data.url);
                }
            })
        },
        PostSyntheticalReceivableByDateRange(beginDt,endDt,requestType){
            var url = "/api/Financial/PostSyntheticalReceivableByDateRange"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType: 1,
                    beginDt: beginDt,
                    endDt: endDt,
                    requestType: requestType,
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.tableData=res.data.data.dataList;
                    that.total_fr=res.data.data.total_fr;
                    that.total_pr=res.data.data.total_pr;
                    that.total_balance=res.data.data.total_balance;
                }
            })
        },
    }
}
</script>
<style>
.rvsreport-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 830px;
}
.rvsreport-haed{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.hjbox{
    font-size: 14px;
    color: #909399;
    font-weight:600 ;
    margin-bottom: 5px;
}
.rvsreport-table .el-table th.el-table__cell>.cell {
    padding-right: 5px;
    padding-left: 5px;
}
</style>