<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"
                border
                style="width: 100%">
                    <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="180">
                    </el-table-column>
                    <el-table-column
                    prop="frPrice"
                    label="应收"
                    width="180">
                        <template slot-scope="scope">
                            {{scope.row.frPrice+' RMB'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="prPrice"
                    label="已收"
                    width="180">
                        <template slot-scope="scope">
                            {{scope.row.prPrice+' RMB'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="balPrice"
                    label="余款"
                    width="180">
                        <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>
            </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;
}
</style>