<template>
    <div class="checkBill">
        <div class="optionLine">
            <div class="xiangmuxuanze">
                <span>项目选择：</span>
                <a-tree-select
                    v-model="treeValue"
                    style="width: 50%"
                    :tree-data="treeData"
                    tree-checkable
                    :show-checked-strategy="SHOW_PARENT"
                    searchPlaceholder="请选择项目和账户"
                    :allowClear=true
                    @change="treeChange"
                />
            </div>
            <span>应用选择：</span>
            <a-select default-value="0" style="width: 150px" @change="APPChange">
                    <a-select-option value="0">全部</a-select-option>
                    <a-select-option v-for="(item,index) in optionArr" :key='index' :value='item.id'>{{item.name}}</a-select-option>                  
            </a-select>
            <span class="timedate">日期选择：</span>
            <a-range-picker
                :placeholder="['开始月份', '结束月份']"
                format="YYYY-MM"
                :value="monthRange"
                :mode="mode2"
                @change="monthChange"
                @panelChange="monthPanelChange"
                style="width: 250px;"
                :loading="loading"     
            />
            <span class="caozuoxitong">操作系统：</span>
             <a-select default-value="all" style="width: 150px" @change="handleChange">
                    <a-select-option value="all">全部</a-select-option>
                    <a-select-option value="android">Android</a-select-option>
                    <a-select-option value="ios">IOS</a-select-option>        
            </a-select>
            <div class="btn">
                <a-button type='primary'  @click="getData">查询</a-button>
            </div>
        </div>

        <a-table :columns="columns" :data-source="dataSource" tableLayout='auto' bordered :pagination='false'>
           
        </a-table>
        <div class="fenye">
            <a-pagination v-model="currentPage" :total="totalItem" show-less-items style="float:right" />
        </div>
        
    </div>
</template>

<script>
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import { TreeSelect } from 'ant-design-vue';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

let columns=[
    {
        title: '时间',
        dataIndex: 'date',
        key: 'date',
        scopedSlots: { customRender: 'date' },
        align: 'center',
    },
    {
        title: '应用',
        dataIndex: 'appName',
        key: 'appName',
        align: 'center',
    },
    {
        title: '操作系统',
        dataIndex: 'operateSystem',
        key: 'operateSystem',
        align: 'center',
    },
    {
        title: '有效激活数',
        dataIndex: 'sumInternalActivations',
        key: 'sumInternalActivations',
        align: 'center',
    },
    {
        title: '预估结算金额(元)',
        dataIndex: 'estimatedTotalPrice',
        key: 'estimatedTotalPrice',
        align: 'center',
    },
    {
        title: '账户质量分',
        dataIndex: 'accountQualityScore',
        key: 'accountQualityScore',
        align: 'center',
    },
    {
        title: '实际结算金额(元)',
        dataIndex: 'actualTotalPrice',
        key: 'actualTotalPrice',
        align: 'center',
    },
]

export default {
    data() {
        return {
            //应用下拉选择框的
            optionArr:[],
            APPID:'',
            //table的值
            columns,
            dataSource:[],
            loading:false,
            //选择的值
            selectValue:'all',
            //日期的值
            monthRange:[],
            monthStr:[],//时间-字符串的类型
            mode2: ['month', 'month'],
            monthOpen:false,

            //分页器的参数
            currentPage:1,
            totalItem:10,

             //treeselect的参数
            treeValue:[],
            treeData:[],
            SHOW_PARENT,
            projectId:[],
            accountName:[],
        }
    },
   
    methods: {
        moment,
        //项目改变后的事件
        treeChange(val){
            this.projectId=[];
            this.accountName=[];
            console.log(val,this.treeValue);
            this.treeValue.forEach((item,index)=>{
                if(parseInt(item)){
                     this.projectId.push(item)
                }else{
                    this.accountName.push(item)
                }
            });
            postAction('/pangolin/api/app/list',{
                projectId:this.projectId,
                accountName:this.accountName
            }).then(res=>{
                console.log(res)
                if(res.success){
                    this.optionArr=res.data
                }
            })
    
        },

        //应用选择
        APPChange(value){
            this.APPID=value;
        },
        handleChange(value) {
            this.selectValue=value
        },
        //月份选择器value
      
        monthChange(value){
            console.log(value)
            this.monthRange=value
        },
        monthPanelChange(value, mode){
            
            this.monthRange=value
            // console.log(value,mode)
            this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
            this.monthStr=[moment(this.monthRange[0]).format('YYYY-MM'),moment(this.monthRange[1]).format('YYYY-MM')]
        },

        //确定按钮的事件
        getData(){
           
            console.log(this.monthStr,this.selectValue);
            this.loading=true;
            this.HttpPost()
            
        },
        //请求事件
        HttpPost(){
            postAction('/pangolin/api/checkApps/list',{
                pageSize:10,
                pageNo:this.currentPage,
                startDate:this.monthStr[0],
                endDate:this.monthStr[1],
                operateSystem:this.selectValue,
                appId:this.APPID,
                projectId:this.projectId,
                accountName:this.accountName
            }).then(res => {
                
                console.log(res)
                if (res.success) {
                 this.loading=false;
                res.data.list.map((item, index) => {
                    item.key = index
                })
          
                 this.dataSource=res.data.list;
                 this.totalItem=res.data.total
                }
            })
        },
        //项目请求
        accountHttp(){
            postAction('/pangolin/api/memberList',{
                projectId:this.projectId,
                accountName:this.accountName
            }).then(res => {
                
                console.log(res)
                if(res.success){
                    res.data.forEach((element,index) => {
                        this.treeData.push({});
                        this.treeData[index].title=element.projectName;
                        this.treeData[index].value=element.projectId;
                        this.treeData[index].key=element.projectId;
                        this.treeData[index].children=[];
                        element.accountList.forEach((ele,i)=>{
                            this.treeData[index].children.push({});
                             this.treeData[index].children[i].title=ele.accountName;
                             this.treeData[index].children[i].value=ele.accountName;
                             this.treeData[index].children[i].key=ele.accountName;
                        })  
                    }); 
                }
                console.log(this.treeData)
            })
        }
    },
    mounted() {
        this.monthStr=[moment().format('YYYY-MM'),moment().format('YYYY-MM')];
        this.monthRange=[moment(),moment()]
        
        postAction('/pangolin/api/app/list',{
             projectId:this.projectId,
            accountName:this.accountName
        }).then(res=>{
            console.log(res)
            if(res.success){
                this.optionArr=res.data
            }
        })
        this.accountHttp()
        this.HttpPost()
    },
}
</script>

<style lang="scss" scoped>
.checkBill{
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 10px 15px;
}
.optionLine{
    padding: 15px 5px;
    position: relative;
    margin-bottom: 15px;
    margin-top: 20px;
    span{
        display: inline-block;
        padding: 0 3px;
    }
    .timedate,.caozuoxitong{
        margin-left: 30px;;
    }
    .btn{
        position: absolute;
        right: 10px;
        top: 15px;
    }
}
.fenye{
    margin: 30px 15px 10px;
    overflow: hidden;
}
.xiangmuxuanze{
     margin-bottom: 20px;;
}
</style>