import React, { useState } from 'react';
import { Card } from 'antd';
import * as echarts from 'echarts/core';
import Chart from '@/components/chart';
import { getStatProblem } from "@/service/stat";

export default (props) => {
  const [option, setOption] = useState({});

  React.useEffect(() => {
    getStatProblem().then((res) => {
      setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#FB9900'
            }
          }
        },
        grid: {
          left: '3%',
          bottom: '3%',
          height: '90%',
          width: '90%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: res.map(x => x.name),
            // boundaryGap: true,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '20%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FB9900' },
                { offset: 1, color: '#FFD38F' }
              ]),
              // barBorderRadius: [8, 0, 0, 0]
            },
            data: res.map(x => x.value),
          }
          // {
          //   type: 'bar',
          //   barWidth: '4%',
          //   itemStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          //         offset: 0,
          //         color: "#FCA319" // 0% 处的颜色
          //       }, {
          //         offset: 1,
          //         color: "#ED8224" // 100% 处的颜色
          //       }], false),
          //       barBorderRadius: [0, 0, 100, 0]
          //     }
          //   },
          //   barGap: 0,
          //   data: res.map(x => x.value)
          // }, {
          //   type: 'pictorialBar',
          //   itemStyle: {
          //     borderWidth: '20%',
          //     color: '#FEC05F'
          //   },
          //   symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
          //   symbolSize: ['34%', '8'],
          //   symbolOffset: ['-1', '-1'], // 左右 ，上下
          //   symbolRotate: 0,
          //   symbolPosition: 'end',
          //   data: res.map(x => x.value),
          //   z: 3
          // }
        ]
      });
    }).catch(console.error);
  }, []);

  return (
    <Card title="问题分类">
      <Chart option={option} style={props.style}></Chart>
    </Card>
  )
}