import React from 'react';
import ReactDOM from 'react-dom';
import 'antd-mobile/dist/antd-mobile.css'; 

const F2 = require('@antv/f2');

export default class F2Area extends React.Component {
    
    constructor(props) {
        super(props);
        this.chartRender= this.chartRender.bind(this); 
        const{height,width,data}=this.props;
        this.state={
            height:height?height:300,
            width:width?width:360,
            data:data,
        }
    }
    componentWillReceiveProps(nextProps) {
        const{height,width,data}=nextProps;
        this.setState({
            height:height?height:this.state.height,
            width:width?width:this.state.width,
            data:data,
        });
    }

    componentDidUpdate(){
        this.chartRender();
    }
    componentDidMount(){
        F2.Global.pixelRatio = window.devicePixelRatio;
        this.chartRender();
    }
    chartRender=()=>{
          const chart = new F2.Chart({
            id: 'divarea',
            pixelRatio: window.devicePixelRatio
          });
          chart.source(data, {
            time: {
              type: 'timeCat',
              tickCount: 3,
              range: [ 0, 1 ]
            },
            tem: {
              tickCount: 5,
              min: 0
            }
          });
            // 配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
        //   chart.axis('tem', {
        //     label: {
        //       fontSize: 14
        //     }
        //   });
            // 配置time刻度文字样式
        //   const label = {
        //     fill: '#979797',
        //     font: '14px san-serif',
        //     offset: 6
        //   };
        //   chart.axis('time', {
        //     label(text, index, total) {
        //       const cfg = label;
        //         // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
        //       if (index === 0) {
        //         cfg.textAlign = 'start';
        //       }
        //       if (index > 0 && index === total - 1) {
        //         cfg.textAlign = 'end';
        //       }
        //       return cfg;
        //     }
        //   });
          chart.area().position('time*tem')
            .color('city')
            .shape('smooth')
            .style({
              opacity: 0.6
            });
          chart.render();
    }
    render() { 
          
        return (
            <canvas id="divarea"></canvas>
        )
    }
}