import * as React from 'react'
import * as echarts from 'echarts'
import Card from '@components/Card'
import Table from '@components/Table'
import { getRandomNum, addInterFn, removeInterFn } from '@utils/index'
import * as style from './style.scss'

export interface Left2Props {
}

export default class Left2 extends React.Component<Left2Props, {}> {
  pieContent: any = null;

  componentDidMount() {
    this.renderPie = this.renderPie.bind(this)
    this.renderPie()
    // addInterFn(this.renderPie.bind(this), 10)
  }

  componentWillUnmount () {
    removeInterFn(this.renderPie)
  }

  renderPie() {
    const resizePercent: number = (window as any)['resizePercent']
    var option: echarts.EChartOption = {
      color: ['#f7584e', '#0196fe', '#ac5bea', '#18cf8f', '#ffcb00'],
      title: {
        show: false,
      },
      tooltip: {
        trigger: 'item',
        formatter: "{b} : {c} ({d}%)",
      },
      legend: {
        show: false,
        x: 'left',
        y: 'top',
        orient: 'vertical',
        data: ['刑事拘留', '治安拘留', '逮捕', '取保候审', '移交诉讼'],
        textStyle: {
          color: '#b6deff'
        }
      },
      toolbox: {
        show: false
      },
      series: [
        {
          type: 'pie',
          radius: ['20%', '50%'],
          roseType: 'radius',
          data: [
            { value: 23, name: '刑事拘留' },
            { value: 0, name: '治安拘留' },
            { value: 5, name: '逮捕' },
            { value: 0, name: '取保候审' },
            { value: 3, name: '移交诉讼' }
          ],
          label: {
            formatter: [
              '{a|{c}}',
              '{b|{b}}'
            ].join('\n'),
            rich: {
              a: {
                fontSize: 32 * resizePercent,
                lineHeight: 10,
                align: 'center'
              },
              b: {
                height: 25,
              }
            }
          }
        }
      ]
    }

    var myChart = echarts.init(this.pieContent)

    myChart.setOption(option)
  }

  render() {
    return <div className={style.content}>
      <Card>
        <Table img={require('./icon.png')} title={'法制质态'} contentBorder={false}>
          <div className={style.pie} ref={dom => this.pieContent = dom}></div>
        </Table>
      </Card>
    </div>
  }
}