<template>
    <div>
        <div class="rvsreport-all">
            <div class="rvsreport-haed">
                <div>
                    <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-input style="width:250px" placeholder="请输入团组名称" v-model="input" clearable>
                    </el-input>
                    <el-button @click="datechange" type="primary">查询</el-button>
                </div>
                <div>
                    <el-button style="margin-bottom: 10px;" @click="Skeclick(2)" type="primary">按搜索日期生成</el-button>
                    <el-button style="margin-bottom: 10px;" @click="Skeclick(3)" type="primary">标注团组颜色生成</el-button>
                </div>
            </div>
            <div class="hjbox">
                应收合计：{{total_fr}} 已收合计：{{total_pr}} 余款合计：{{total_balance}}
            </div>
            <div class="rvsreport-table">
                <el-table :row-style="changRed" height="720" :data="tableData" style="width: 100%"
                    :row-class-name="rowClassName">
                    <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">
                            <template slot-scope="scope">
                                <el-popover placement="right" width="400" trigger="click">
                                    <div style="white-space: pre-line;" v-html="FeeDetailsinfo"></div>
                                    <div slot="reference" style="cursor: pointer;"
                                        @click="GetSyntheticalReceivableFeeDetails(scope.row)">
                                        {{scope.row.teamName}}
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column prop="visitDate" label="出访时间" width="100">
                        </el-table-column>
                        <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">
                                <el-popover placement="top" width="350" trigger="hover">
                                    <div>
                                        <div v-for="(item,index) in scope.row.groupCostItem" :key="index">
                                            {{item.typeName}}:  {{item.singlePrice}} × {{ item.totalPeople }} = {{ item.totalPrice }}
                                        </div>
                                    </div>
                                    <span
                                        style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;cursor: pointer;color: #48a2ff;"
                                        slot="reference">{{scope.row.groupCost+' RMB'}}</span>
                                </el-popover>
                            </template>
                        </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">
                            <template slot-scope="scope">
                                <el-popover placement="top" width="300" trigger="hover">
                                    {{scope.row.prClient}}
                                    <span
                                        style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;cursor: pointer;color: #48a2ff;"
                                        slot="reference">{{scope.row.prClient}}</span>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column prop="schedule" label="收款进度">
                            <template slot-scope="scope">
                                <el-popover placement="top" width="300" trigger="hover">
                                    {{scope.row.schedule}}
                                    <span
                                        style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;cursor: pointer;color: #48a2ff;"
                                        slot="reference">{{scope.row.schedule}}</span>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userid:'',
            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]);
                    }
                }]
            },
            input:'',
            value2: '',
            tableData: [],
            total_balance:'0.00',
            total_fr:'0.00',
            total_pr:'0.00',
            FeeDetailsinfo:'',
        };
    },
    methods:{
        changRed({ row }) {
            if (row.isChangeColorRed) { // 变颜色的条件
                if(row.isChangeColor){
                    return {
                        color: "#ff9c02"  // 这个return的就是样式 可以是color 也可以是backgroundColor
                    }
                }else{
                    return {
                        color: "red"  // 这个return的就是样式 可以是color 也可以是backgroundColor
                    }
                }
            }
        },
        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(val){
            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: val,
                }
            }).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,
                    currUserId:that.userid,
                    requestType: requestType,
                    groupName:that.input
                }
            }).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;
                }
            })
        },
        //获取费用标识
        GetSyntheticalReceivableFeeDetails(row){
            this.FeeDetailsinfo='';
            var url = "/api/Financial/GetSyntheticalReceivableFeeDetails?groupId="+row.diid
            var that = this
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
            }).then(function (res) {
                if(res.data.code==200){
                   that.FeeDetailsinfo=res.data.data;
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        rowClassName({ row, rowIndex }) {
            // console.log(row, rowIndex);
            
            if (rowIndex % 2 === 0) {
                return 'warning-row';
            }else{
                return 'success-row';
            }
        }
    },
    mounted(){
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
    }
}
</script>
<style>
.el-table .warning-row {
    background: #f9f9f9;
}

.el-table .success-row {
    background: #efefef;
}
.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;
}
.rvsreport-all .callondialog-li .el-input, .el-range-editor.el-input__inner{
    margin-bottom: 0px;
}
</style>