import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { CellGroup, Cell, Popup } from '@antmjs/vantui';
import Card from '@/components/Card';
import Chart, { getLinearGradient } from '@/subpkg1/components/chart';
import { getIssueType } from '@/services/stat';

export default (props) => {

  const [show, setShow] = React.useState(false);
  const [option, setOption] = React.useState({});

  const onCancel = () => {
    setShow(false);
  }

  React.useEffect(() => {
    getIssueType({}).then((res) => {
      setOption({
        grid: {
          top: 6,
          bottom: 40,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: res.map(x => x.name),
            boundaryGap: true,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '20%',
            itemStyle: {
              color: getLinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FB9900' },
                { offset: 1, color: '#FFD38F' }
              ])
            },
            data: res.map(x => x.value)
          }
        ]
      });
    });
  }, []);
  
  return (
    <Card>
      <Cell title="问题分类" />
      <Chart option={option} style={{ height: '30vh'}} />
    </Card>
  )
}
