import { Component, PropsWithChildren } from 'react'
import { View, Text } from '@tarojs/components'
import * as echarts from '../../lib/ec-canvas/echarts'
import './index.scss'

export default class Index extends Component {
  // this.state = {
  //   ec:{
  //     onInit:function(){}
  //   }
  // }

  constructor(props) {
    super(props);
    this.state = {
      ec: {
        onInit: function (canvas, width, height) {
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          canvas.setChart(chart);
          const option = {
            title: {
              text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
              data: ['销量']
            },
            xAxis: {
              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          };
          chart.setOption(option)
          return chart;
        }
      }
    }
  }
  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  callback(e){
  }

  render() {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
        <View className='canvas-container'>
          <ec-canvas id='mychart-dom-bar' canvas-id='mychart-bar' ec={this.state.ec}></ec-canvas>
        </View>
        <demo content="hi" detail={{a:'1',b:2}} onApple={(e)=>{
          debugger
        }}/>
        <Text>Just say hi</Text>
        <View className='demo'></View>
      </View>
    )
  }
}