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

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

const data = [
    { genre: '0', sold: 275 },
    { genre: '2', sold: 115 },
    { genre: '4', sold: 120 },
    { genre: '6', sold: 330 },
    { genre: '8', sold: 150 },
    { genre: '10', sold: 250 },
    { genre: '12', sold: 150 },
    { genre: '14', sold: 230 },
    { genre: '16', sold: 170 },
    { genre: '18', sold: 300 },
    { genre: '20', sold: 246 },
    { genre: '22', sold: 170 },
  ];


export default class F2Demo  extends React.Component{

    constructor(props) {
        super(props);
        this.chartRender= this.chartRender.bind(this); 
        const{height,width}=this.props;
        this.state={
            height:height?height:300,
            width:width?width:360,
        }
    }
    componentWillReceiveProps(nextProps) {
        const{height,width}=nextProps;
        this.setState({
            height:height?height:this.state.height,
            width:width?width:this.state.width,
        });
    }

    componentDidUpdate(){
        this.chartRender();
    }
    componentDidMount(){
        F2.Global.pixelRatio = window.devicePixelRatio;
        this.chartRender();
    }
    chartRender=()=>{
        const chart = new F2.Chart({
            id: 'c1', // 指定图表容器 ID
            width: this.state.width, // 指定图表宽度
            height: this.state.height // 指定图表高度    
        });
        const defs = {
            time: {
              tickCount: 7,
              range: [ 0, 1 ]
            },
            tem: {
              tickCount: 5,
              min: 0
            }
          };

        chart.source(data);
          
        // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
        chart.line().position('genre*sold')
        .shape('smooth');

        // Step 4: 渲染图表
        chart.render();
    }
    render() { 
          
        return (
            <canvas id="c1"></canvas>
        )
    }
}