import React from 'react'
import ReactDOM from 'react-dom'
import  TdComponents from '../src/index.js'
import moment from 'moment';

import './index.css'
const RepChart = TdComponents.RepChart
const RepDetail = TdComponents.RepDetail
const RepPivot = TdComponents.RepPivot
const YearPicker = TdComponents.YearPicker

class Example extends React.Component {

    render(){
        return (
            <div>
                {/* <h1 style={{"textAlign":"center"}}>td-components示例</h1> */}
                {/* <h2>图表</h2> */}
                <div id="chart1"></div>
                {/* <h2>明细表</h2> */}
                <div id="chart2"></div>
                {/* <h2>统计表</h2> */}
                <div id="chart3"></div>
                <div id="YearPicker"></div>
                

               
            </div>
        )
    }
    

    renderDetail(id){
        let me=this;
        new RepDetail({
            el: 'chart2',
            reportId: id, //  59
            showName: true,//可选
            showSearchParams: true,//可选
            showExport: true,//可选
            showPrint: true,//可选
            linkType: false,
             moduleType: "portal",  //模块来源
            //  linkdata: window.reportManager[id]. linkdata  ||  {},   //关联 的数据
            slot:{},
             style:{  //当前窗口的宽高
                 width:"500px",
                 height:"300px"
             },
            onhandleClick:function(data){
                if(window.reportManager&&data. linkdata){
                    for(let key in data. linkdata){
                        window.reportManager[key]. linkdata = data. linkdata[key];
                        // window.reportManager[key].callback(window.reportManager[key])  
                        let item =window.reportManager[key]
                        if(item.type=="0"){  //处理统计
                            me.renderDetail(item.id)
                        }else if(item.type=="1"){
                            me.renderPovit(item.id)
                        }else{
                            me.renderChart(item.id,item.linkdata)
                        }
                    }
                }
            }
        });
    }
    renderPovit(id){
        let me=this;
        new RepPivot({
            el: 'chart3',
            reportId: id,  // 85
            showName: true,//可选
            showSearchParams: false,//可选
            showExport: false,//可选
            showModalExport:true,
            showPrint: true,//可选
            moduleType: "portal",
            linkType: true,
            //  linkdata: window.reportManager[id]. linkdata  || {},
            slot:{},
             style:{  //当前窗口的宽高
                 width:"500px",
                 height:"300px"
             },
            onhandleClick:function(data){
                if(window.reportManager&&data. linkdata){
                    for(let key in data. linkdata){
                        window.reportManager[key]. linkdata = data. linkdata[key];
                        // window.reportManager[key].callback(window.reportManager[key])  
                        let item =window.reportManager[key]
                        if(item.type=="0"){  //处理统计
                            me.renderDetail(item.id)
                        }else if(item.type=="1"){
                            me.renderPovit(item.id)
                        }
                    }
                }
            }
        });
    }
    renderChart(id, linkdata){
        let me=this;
        new RepChart({
            el: 'chart1',//dom id
            reportId: id, //报表id
            showName: true,//可选  是否显示报表名称
            showSearchParams: true,//可选 是都显示自定义查询参数
            showExport: true,//可选 是否显示导出
            showModalExport:false,
            showPrint: true,//可选 是否显示打印
            linkType: false,
            // moduleType: "portal",  //
            //  linkdata:  linkdata  || {},
            // slot: {},
            // style:{  //当前窗口的宽高
            //     width:"1000px",
            //     height:"320px"
            // },
            // onhandleClick:function(data){
            //     // alert(JSON.stringify(param))
            //     if(window.reportManager&&data. linkdata){
            //         for(let key in data. linkdata){
            //             window.reportManager[key]. linkdata = data. linkdata[key];
            //             // window.reportManager[key].callback(window.reportManager[key])  
            //             let item =window.reportManager[key]
            //             if(item.type=="0"){  //处理统计
            //                 me.renderDetail(item.id)
            //             }else if(item.type=="1"){
            //                 // me.renderPovit(item.id)
            //             }else {
            //                 // me.renderPovit(item.id)

            //             }
            //         }
            //     }
            // }
        });
    }
    componentDidMount(){
        let date=moment(new Date(),"YYYY-MM-DD");
        
        console.log(moment(date).year(Number))
        // new YearPicker({
        //     el: 'YearPicker',//dom id
        //     selectDate:"",
        //     onYearClick:function(date){
        //         console.log(date)
        //     },
        //     style:{
        //         width:"50%"
        //     },
        //     readonly:"readonly",
        //     dateFormat:"YYYY年"
        // });


        let me=this
        window.reportManager={
        }
        window.reportManager[8]={
             linkdata:{},
            id:207,
            type:2,
            callback:function(){
            }
        }
        window.reportManager[11]={
            linkdata:{},
            id:79,
            type:2,
            callback:function(){
            }
        }
        // me.renderDetail(89)

        // me.renderDetail(78)

        me.renderChart(84)

        window.reportManager[85]={
             linkdata:{},
            id:228,
            type:0,
            callback:function(data){
                //拿到数据之后处理业务
            }
        }
        window.reportManager[12]={
             linkdata:{},
            id:135,
            type:0,
            callback:function(data){
                //拿到数据之后处理业务
            }
        }
        // me.renderPovit(85)
        

        
        
        
    }
}

ReactDOM.render(
    <Example />,
    document.getElementById('example')
  );
