<template>
    <div class="paymentstatement-all">
        <el-dialog width="60%" title="日常付款类型筛选" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <div class="paymentstatement-dialog-ul">
                <div v-for="(item,index) in DailypaymentTypelist" :key="index" class="paymentstatement-dialog-li">
                    <div>
                        <div class="modulename">{{item.name}}</div>
                        <div class="paymentstatement-dialog-type">
                            <el-checkbox v-model='items.isChecked' v-for="(items,index) in item.subData" :key="index" :label="items.name"></el-checkbox>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button size="small" @click="checkidall">全 选</el-button>
              <el-button size="small" @click="checkidclear">清 空</el-button>
              <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
              <el-button size="small" type="primary" @click="checkidarr">确 定</el-button>
            </div>
        </el-dialog>
        <div class="paymentstatement-haed">
            <div>
                <el-date-picker 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-select
                v-model="valuecorporation"
                multiple
                collapse-tags
                style="width:300px;"
                placeholder="请选择">
                    <el-option
                    v-for="item in corporationoptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <el-input
                style="width:200px;"
                placeholder="请输入内容"
                v-model="filter"
                clearable>
                </el-input>
                <el-button  @click="Dailychange" type="primary">查 询</el-button>
            </div>
            <div>
                <el-button @click="deriveclick" type="primary">导出</el-button>
                <el-button @click="dialogFormVisible = true" type="primary">更改筛选器</el-button>
            </div>
        </div>
        <div class="paymentstatement-tree">
            <div class="paymentstatement-tree-title">
                <span>日付统计列表</span>
                <span>总计金额：{{processingprice(total)}} 元</span>
            </div>
            <el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            <!-- <el-tree 
            :data="treedata" 
            ref="abc"
            node-key="id" 
            :props="defaultProps"
            highlight-current>
                <span class="custom-tree-node" slot-scope="{ data }">
                    <span>
                        {{ data.viewStr?data.viewStr:'' }}
                    </span>
                </span>
            </el-tree> -->
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            token:'',
            dialogFormVisible:false,
            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]);
                    }
                }, {
                    text: '最近一年',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value2:'',
            DailypaymentTypelist:[],
            typeIds:[],
            treedata:[],
            defaultProps: {
                children: 'contents',
                label: 'viewStr'
            },
            total:0,
            valuecorporation:[],
            corporationoptions:[],
            filter:'',
        }
    },
    methods:{
        //处理金额
        processingprice(val){
            if(Number(val)){
                return val.toFixed(2);
            }else{
                return val
            }
        },
        handleNodeClick(data) {
            console.log(data);
        },
        //日付类型
        DailypaymentTypeInit(){
            var url = "/api/Statistics/DailypaymentTypeInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: { 
                    portType: 1 ,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.DailypaymentTypelist=res.data.data.dailyTypeData;
                    that.corporationoptions=res.data.data.companyData;
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("接口错误，请联系信息部！");
            });
        },
        //获取勾选id
        checkidarr(){
            this.typeIds=[];
            for(let i=0;i<this.DailypaymentTypelist.length;i++){
                for(let j=0;j<this.DailypaymentTypelist[i].subData.length;j++){
                    if(this.DailypaymentTypelist[i].subData[j].isChecked==true){
                        this.typeIds.push(this.DailypaymentTypelist[i].subData[j].id);
                    }
                }
            }
            this.DailypaymentTypeDataSave(this.typeIds)
        },
        //all in
        checkidall(){
            for(let i=0;i<this.DailypaymentTypelist.length;i++){
                for(let j=0;j<this.DailypaymentTypelist[i].subData.length;j++){
                    this.DailypaymentTypelist[i].subData[j].isChecked=true;
                }
            }
        },
        //清空
        checkidclear(){
            for(let i=0;i<this.DailypaymentTypelist.length;i++){
                for(let j=0;j<this.DailypaymentTypelist[i].subData.length;j++){
                    this.DailypaymentTypelist[i].subData[j].isChecked=false;
                }
            }
        },
        //保存筛选条件
        DailypaymentTypeDataSave(val){
            var url = "/api/Statistics/DailypaymentTypeDataSave"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: { 
                    portType: 1 ,
                    typeIds:val
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.dialogFormVisible=false;
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    if(!that.value2<=0){
                        that.DailypaymentRange(that.getdate(that.value2[0]),that.getdate(that.value2[1]),1)
                    }
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("接口错误，请联系信息部！");
            });
        },
        //处理时间
        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
        },
        //日期切换
        Dailychange(){
            // console.log(this.getdate(val[0]));
            this.DailypaymentRange(this.getdate(this.value2[0]),this.getdate(this.value2[1]),1);
        },
        deriveclick(){
            this.DailypaymentRange(this.getdate(this.value2[0]),this.getdate(this.value2[1]),2);
        },
        //获取列表
        DailypaymentRange(beginDt,endDt,type){
            var url = "/api/Statistics/DailypaymentRange"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: { 
                    portType: 1 ,
                    pageIndex:1,
                    pageSize:99999,
                    companyIds:that.valuecorporation,
                    beginDt:beginDt,
                    filter:that.filter,
                    endDt:endDt,
                    type:type,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    if(type==2){
                        window.open(res.data.data.url);
                        return
                    }
                    that.treedata=res.data.data.data;
                    that.total=res.data.data.total;
                    for(let i=0;i<that.treedata.length;i++){
                        for(let j=0;j<that.treedata[i].contents.length;j++){
                            that.treedata[i].contents[j].viewStr=j+1+'、'+that.treedata[i].contents[j].priceName+" 单价："+that.processingprice(that.treedata[i].contents[j].price) + " 数量："+that.treedata[i].contents[j].quantity+' 总价：'+that.processingprice(that.treedata[i].contents[j].itemTotal);
                            // console.log(that.treedata[i].contents[j].priceName+" 单价："+that.treedata[i].contents[j].quantity + " 数量："+that.treedata[i].contents[j].quantity+' 总价'+that.treedata[i].contents[j].itemTotal);
                        }
                    }
                    console.log(that.treedata);
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("接口错误，请联系信息部！");
            });
        },
    },
    mounted(){
        this.DailypaymentTypeInit();
    }
}
</script>
<style>
.paymentstatement-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
}
.paymentstatement-haed{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    
}
.paymentstatement-dialog-type{
    display: flex;
    flex-wrap:wrap ;
}
.paymentstatement-dialog-type .el-checkbox{
    width: 290px;
}
.paymentstatement-dialog-li .modulename{
    font-size: 15px;
    font-weight: 600;
}
.paymentstatement-all .el-dialog__body{
    padding-top: 10px;
}
.paymentstatement-dialog-li .el-checkbox{
    margin-top: 4px;
    margin-bottom: 4px;
}
.paymentstatement-tree-title{
    color: #555;
    border-bottom: 1px solid #DCDFE6;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.paymentstatement-tree .el-tree-node__content{
    height: 45px;
}
.paymentstatement-tree .el-tree-node__label{
    display: inline-block;
    width: 100%;
    word-break: break-all;
    white-space: normal;
}
.paymentstatement-tree-title{
    font-size: 17px;
    font-weight: 600;
}
.paymentstatement-tree .el-tree{
    max-height: 700px;
    overflow: auto;
}
</style>