<template>
    <div class="activateSta">
        <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 v-model="defalutAPP" 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
            :disabled-date="disabledDate"
            format="YYYY-MM-DD"
            style="width: 250px;"
            @change="dateChange"
            v-model="dateRange"
            />
            <span class="caozuoxitong">操作系统：</span>
             <a-select v-model="selectValue" 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>

        <div class="detailInfo">
            <span>激活总数：{{totalActivate}}</span> 
            <span>日均激活数：{{averageDailyActivate}}</span> 
            
        </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" size="small" />
        </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: '单元ID',
        dataIndex: 'channelName',
        key: 'channelName',
        align: 'center',
    },
    {
        title: '应用名称',
        dataIndex: 'appName',
        key: 'appName',
        align: 'center',
    },
    {
        title: '操作系统',
        dataIndex: 'oprateSystem',
        key: 'oprateSystem',
        align: 'center',
    },
    {
        title: '激活数',
        dataIndex: 'externalActivation',
        key: 'externalActivation ',
        align: 'center',
    },
    {
        title: '预估结算金额(元)',
        dataIndex: 'totalPrice',
        key: 'totalPrice ',
        align: 'center',
    },
    
    {
        title: '留存率',
        dataIndex: 'retentionRatio',
        key: 'retentionRatio',
        align: 'center',
    },
]


export default {
    data() {
        return {
            //应用下拉选择框的
            optionArr:[],
            APPID:0,
            defalutAPP:'0',
            //日期选择器的值
            dateRange:[],
            dateStr:[],
            //下拉选择器的值
            selectValue:'all',
            //分页器的参数
            currentPage:1,
            totalItem:10,
            //详细信息
            totalActivate:'',
            averageDailyActivate:'',
            //table的参数
            loading:false,
            columns,
            dataSource:[],

            //treeselect的参数
            treeValue:[],
            treeData:[],
            SHOW_PARENT,


        }
    },
    
    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)
                }
            })
            this.optionArr=[]
            
            this.defalutAPP='0'
            this.selectValue='all'
            if(this.treeValue.length==0){
                this.optionArr=[]
            }
           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
        },

        disabledDate(current) {
        // console.log(current)
            return current && current > moment().subtract(1, 'day')
        },
        //日期改变事件
        dateChange(data, dataString) {
            this.dateStr = dataString
        },
         //确定按钮的事件
        getData(){
           
            console.log(this.monthStr,this.selectValue);
            this.loading=true;
            this.HttpPost()
            
        },


        //请求事件
        HttpPost(){
            postAction('/pangolin/api/activation/list',{
                pageSize:10,
                pageNo:this.currentPage,
                startDate:this.dateStr[0],
                endDate:this.dateStr[1],
                operateSystem:this.selectValue,
                appId:this.APPID,
                projectId:this.projectId,
                accountName:this.accountName
            }).then(res => {
                
                console.log(res)
                if (res.success) {
                    this.loading=false;
                    this.averageDailyActivate=res.avgActive
                    this.totalActivate=res.totalActive
                    res.data.list.map((item, index) => {
                        item.key = index
                        item.date=moment(item.date).format('YYYY-MM-DD')
                        if(!item.retentionRatio){
                            item.retentionRatio='-'
                        }
                    })
            
                    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.dateStr=[moment().subtract(1,'days').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
        this.dateRange=[moment().subtract(1,'days'),moment()]
        this.HttpPost();
        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()
    },
}
</script>

<style lang="scss" scoped>
.activateSta{
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 10px 15px;
}
.optionLine{
    padding: 30px 5px;
    position: relative;
    margin-top: 20px;;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    span{
        display: inline-block;
        padding: 0 3px;
    }
    .timedate,.caozuoxitong{
        margin-left: 30px;;
    }
    .btn{
        position: absolute;
        right: 10px;
        top: 30px;
    }
}
.optionLine:hover{
    border-color:rgb(24,144,255);
    box-shadow: 0 0 15px rgba(0,0,0,.3);
}
.fenye{
    margin: 30px 15px 10px;
    overflow: hidden;
}
.detailInfo{
    margin: 10px 0 25px;
    span{
        display: inline;
        margin:5px 20px 5px 10px;
    }

}
.xiangmuxuanze{
  margin-bottom: 20px;;
}
</style>