import { Tooltip } from 'antd';
import { WeaLocaleProvider, WeaEchart } from 'ecCom';
import { observer } from "mobx-react";
import { toJS } from 'mobx';
const getLabel = WeaLocaleProvider.getLabel;
import '../../style/stastic.less'

@observer
export default class ProjectStastics extends React.Component {
    constructor(props) {
        super(props);
		this.chart1 = null;
        this.chart2 = null;
        this.chart3 = null;
		this.setChart1Ref = element => {
			this.chart1 = element;
		}
		this.setChart2Ref = element => {
			this.chart2 = element;
        }
        this.setChart3Ref = element => {
			this.chart3 = element;
		}
		const _this = this;
		window.onresize = function() {
			_this.chart1 && _this.chart1.chart.resize();
            _this.chart2 && _this.chart2.chart.resize();
            _this.chart3 && _this.chart3.chart.resize();
		}
    }
    componentDidMount() {

    }
    componentWillReceiveProps(nextProps) {
        let key = this.props.statkey;
        let key_ = nextProps.statkey;
        if(key!==key_){
            this.chart1 && this.chart1.paint();
            this.chart2 && this.chart2.paint();
            this.chart3 && this.chart3.paint();
        }
	}
    render() {
        
        const { contentStore: { stastics } } = this.props;
        let chartdata = toJS(stastics);
        let charts = {
            option1: {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: chartdata.chart1 ? chartdata.chart1.legend:[]
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        // data: [
                        //     { value: 335, name: '直接访问' },
                        //     { value: 310, name: '邮件营销' },
                        //     { value: 234, name: '联盟广告' },
                        //     { value: 135, name: '视频广告' },
                        //     { value: 1548, name: '搜索引擎' }
                        // ]
                        data : chartdata.chart1 ? chartdata.chart1.series:[]
                    }
                ]
            },
            option2:{
                color: ['#0270c1','#C2C9D4', '#75D294', '#F72E04'],
                tooltip: {
                    trigger: 'none',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data:[getLabel(23774,"已完成"),getLabel(1979,"未开始"),getLabel(1960,"进行中"),getLabel(32556,"已延期")]
                },
                grid: {
                    top: 70,
                    bottom: 50
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color:'#d14a61'
                            }
                        },
                        axisPointer: {
                            label: {
                                formatter: function (params) {
                                    return getLabel(1331,"数量")+'  ' + params.value
                                        + (params.seriesData.length>3 ? '：' +(parseInt(params.seriesData[0].data)+parseInt(params.seriesData[1].data)+parseInt(params.seriesData[2].data)+parseInt(params.seriesData[3].data)): '');
                                }
                            }
                        },
                        //data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
                        data : chartdata.chart2 ? chartdata.chart2.xAxis:[]
                    },
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name:getLabel(23774,"已完成"),
                        type:'line',
                        smooth: true,
                        //data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                        data : chartdata.chart2 ? chartdata.chart2.finish_data:[]
                    },
                    {
                        name:getLabel(1979,"未开始"),
                        type:'line',
                        smooth: true,
                        //data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                        data : chartdata.chart2 ? chartdata.chart2.todo_data:[]
                    },
                    {
                        name:getLabel(1960,"进行中"),
                        type:'line',
                        smooth: true,
                        data : chartdata.chart2 ? chartdata.chart2.doing_data:[]
                    },
                    {
                        name:getLabel(32556,"已延期"),
                        type:'line',
                        smooth: true,
                        data : chartdata.chart2 ? chartdata.chart2.overtime_data:[]
                    }
                ]
            },
            option3: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: [getLabel(23774,"已完成"),getLabel(1979,"未开始"), getLabel(1960,"进行中"), getLabel(32556,"已延期")]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        data : chartdata.chart3 ? chartdata.chart3.xAxis:[]
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: getLabel(23774,"已完成"),
                        type: 'line',
                        areaStyle: { normal: {} },
                        data : chartdata.chart3 ? chartdata.chart3.finish_data:[],
                        color: {
                            colorStops: [{
                                offset: 0, color: '#0270c1' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#0270c1' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    },
                    {
                        name: getLabel(1979,"未开始"),
                        type: 'line',
                        areaStyle: { normal: {} },
                        data : chartdata.chart3 ? chartdata.chart3.todo_data:[],
                        color: {
                            colorStops: [{
                                offset: 0, color: '#C2C9D4' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#C2C9D4' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    },
                    {
                        name: getLabel(1960,"进行中"),
                        type: 'line',
                        areaStyle: { normal: {} },
                        data : chartdata.chart3 ? chartdata.chart3.doing_data:[],
                        color: {
                            colorStops: [{
                                offset: 0, color: '#75D294' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#75D294' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    },
                    {
                        name: getLabel(32556,"已延期"),
                        type: 'line',
                        areaStyle: { normal: {} },
                        data : chartdata.chart3 ? chartdata.chart3.overtime_data:[],
                        color: {
                            colorStops: [{
                                offset: 0, color: '#F72E04' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#F72E04' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    }
                ]
            }

        }

        // let topTab = [
        //     {
        //         color: '#000000',
        //         groupid: 'flowAll',
        //         showcount: true,
        //         title: '任务统计',
        //         viewcondition: 0
        //     },
        //     {
        //         color: '#ff3232',
        //         groupid: 'flowNew',
        //         showcount: true,
        //         title: '按负责人',
        //         viewcondition: 1
        //     },
        //     {
        //         color: '#fea468',
        //         groupid: 'flowRes',
        //         showcount: true,
        //         title: '按看板',
        //         viewcondition: 2
        //     }
        // ];

        return (
            <div className={"prjStastics"} >
                {/* {this.getStastics(toJS(stastics))}   */}
                <div className={"folderChartBar flexRow"}>
                    <div className={"folderChartBarLeft"}>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@1eqb8g`} placement="bottom">
                            <div className={"ThemeColor3"}>
                                <span class="charBarNum1">{chartdata.allnum ? chartdata.allnum.value:0}</span>{getLabel(27591,"个")}
                                <span class="block">{chartdata.allnum ? chartdata.allnum.lable:''}</span>
                            </div>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@7y6qvi`} placement="bottom" >
                            <div>
                                <span class="charBarNum1">{chartdata.finishnum ? chartdata.finishnum.value:0}</span>{getLabel(27591,"个")}
                                <span class="block">{chartdata.finishnum ? chartdata.finishnum.lable:''}</span>
                            </div>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@7tr9jd`} placement="bottom" >
                            <div >
                                <span class="charBarNum1">{chartdata.todonum ? chartdata.todonum.value:0}</span>{getLabel(27591,"个")}
                                <span class="block">{chartdata.todonum ? chartdata.todonum.lable:''}</span>
                            </div>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@pui1a9`} placement="bottom">
                            <div>
                                <span class="charBarNum1">{chartdata.doingnum ? chartdata.doingnum.value:0}</span>{getLabel(27591,"个")}
                                <span class="block">{chartdata.doingnum ? chartdata.doingnum.lable:''}</span>
                            </div>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@ihnf6j`} placement="bottom" title={""}>
                            <div>
                                <span class="charBarNum1">{chartdata.overtimenum ? chartdata.overtimenum.value:0}</span>{getLabel(27591,"个")}
                                <span class="block">{chartdata.overtimenum ? chartdata.overtimenum.lable:''}</span>
                            </div>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@w2fm1a`} placement="bottom" >
                            <div className={"ThemeColor3"}>
                                <span class="charBarNum1">{chartdata.workday1 ? chartdata.workday1.value:0}</span>{getLabel(1925,"天")}
                                <span class="block">{chartdata.workday1 ? chartdata.workday1.lable:''}</span>
                            </div>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@gfauc3`} placement="bottom">
                            <div>
                                <span class="charBarNum1">{chartdata.workday2 ? chartdata.workday2.value:0}</span>{getLabel(1925,"天")}
                                <span class="block">{chartdata.workday2 ? chartdata.workday2.lable:''}</span>
                            </div>
                        </Tooltip>
                    </div>
                    <div className={"folderChartBarRight"}>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@1sly4y`} placement="bottom" >
                            <div>
                                <span class="charBarNum1">{chartdata.hrmidsnum ? chartdata.hrmidsnum.value:0}</span>{getLabel(127,"人")}
                                <span class="block">{chartdata.hrmidsnum ? chartdata.hrmidsnum.lable:''}</span>
                            </div>
                        </Tooltip>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@9rs98x`} placement="bottom" >
                            <div>
                                <span class="charBarNum1">{chartdata.members ? chartdata.members.value:0}</span>{getLabel(127,"人")}
                            <span class="block">{chartdata.members ? chartdata.members.lable:''}</span>
                            </div>
                        </Tooltip>
                    </div>
                </div>

                <div className={"folderChartBox"}>
                    <div className={"folderChartBoxModel flexRow"}>
                        <div className={"flex"}>
                            <div className={"folderChartBoxTitle"}>{getLabel(387425,"阶段任务分布")}</div>
                            <div className={"folderChartBoxContent"}>
                                {chartdata.chart1&&<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@3y5t05`} ref={this.setChart1Ref} option={charts.option1} useDefault={false} />}
                            </div>
                        </div>
                        <div className={"flex"}>
                            <div className={"folderChartBoxTitle"}>{getLabel(387426,"阶段任务状态统计")}</div>
                            <div className={"folderChartBoxContent"}>
                                {chartdata.chart2&&<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@wxgnge`} ref={this.setChart2Ref} option={charts.option2} useDefault={false} />}
                            </div>
                        </div>
                    </div>
                    <div className={"folderChartBoxModel flexRow"}>
                        <div className={"flex"}>
                            <div className={"folderChartBoxTitle"}>{getLabel(387427,"负责人任务状态统计")}</div>
                            <div className={"folderChartBoxContent"}>
                                {chartdata.chart3&&<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@bimm68`} ref={this.setChart3Ref} option={charts.option3} useDefault={false} />}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}