import {
    WeaEchart,
} from 'ecCom'

import {
    Row,
    Col,
    message,
} from 'antd';
import {
    i18n
} from '../../public/i18n';


import React from 'react'

class PieChart extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidUpdate() {
        if (this.refs.echart) this.refs.echart.paint();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.winWidth !== nextProps.winWidth) {
            if (this.refs.echart) this.refs.echart.chart.resize();
        }
    }

    getDOM() {
        const {
            isChartsShow,
            chartTitle,
            linkStyle
        } = this.props;
        return (
            <div style={{position: 'absolute', right: 0}}>
                <div style={{float: 'left', padding: '8px 20px 10px 10px', fontSize: 16}}> 
                    { isChartsShow ?  <a onClick={() => this.download()} className={linkStyle}>
                                          <i className='icon-coms-download2' />
                                      </a>
                                   :  <a onClick={() => {message.info(i18n.message.dataNone())}} className={linkStyle}>
                                          <i className='icon-coms-download2' />
                                      </a>
                    }
                </div>
            </div>
        )
    }

    download() {
        const {
            canvasPosition
        } = this.props;
        let cvs = document.getElementsByTagName('canvas');
        this.downloadCvs2Img(cvs[canvasPosition]);
    }

    downloadCvs2Img(cvs) {
        const {
            chartTitle
        } = this.props;
        let $a = document.createElement('a');
        $a.download = chartTitle + '.jpg';
        $a.target = '_blank';
        let url;
        if (cvs) {
            url = cvs.toDataURL("image/jpg");
        } else {
            message.info(i18n.message.dataNone());
        }

        if (url) $a.href = url;

        if (typeof MouseEvent === 'function') {
            var evt = new MouseEvent('click', {
                view: window,
                bubbles: true,
                cancelable: false
            });
            $a.dispatchEvent(evt);
        } else {
            if (window.navigator.msSaveOrOpenBlob) {
                var bstr = atob(url.split(',')[1]);
                var n = bstr.length;
                var u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                var blob = new Blob([u8arr]);
                window.navigator.msSaveOrOpenBlob(blob, chartTitle + '.jpg');
            } else {
                var lang = model.get('lang');
                var html = '' +
                    '<body style="margin:0;">' +
                    '<img src="' + url + '" style="max-width:100%;" title="' + ((lang && lang[0]) || '') + '" />' +
                    '</body>';
                var tab = window.open();
                tab.document.write(html);
            }
        }
    }

    chartAction(chart) {
        chart.off('click');
        chart.on('click', (params) => this.handleClick(params));
    }

    handleClick(params) {
        const {
            ids,
            setVisible
        } = this.props;
        setVisible('4', true, ids[params.dataIndex]);
    }

    render() {
        const {
            option,
            chartTitle,
            isChartsShow
        } = this.props;

        return (
            <div style={{height: 400, margin: '8px 16px', border: '1px solid #DDD', borderRadius: 3}}>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@tjualo`}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@n5sqnt`}>
                        <div style={{height: 40, backgroundColor: '#F9F9F9', position: 'relative'}}>
                            <div style={{height: '100%', padding: '11px 0 12px 16px', color: '#333', float: 'left' }}>{chartTitle}</div>
                            <div style={{height: 50 }}>
                                {this.getDOM()} 
                            </div>
                        </div>
                    </Col>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@b89szb`}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8t1x0g`}>
                        {isChartsShow ? <div style={{height: 340}}>
                                            <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@mixfir`} ref="echart" option={option} useDefault={false} chartAction={ (chart) => this.chartAction(chart)}/>
                                        </div>
                                      : <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -24, textAlign: 'center'}}>
                                            <div style={{fontSize: 50}}><i className='icon-coms-blank'></i></div>
                                            <div style={{fontSize: 15, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div>
                                        </div>
                        }
                    </Col>
              </Row>
          </div>
        )
    }
}

export default PieChart