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 OrgPicker from '@/components/OrgPicker';
import OrgTree from '@/components/OrgTree';
import { getIssueOrg } from '@/services/stat';

export default (props) => {

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

  const valStr = React.useMemo(() => {
    if (!org) {
      return '请选择单位'
    }

    return org.name;
  }, [org]);

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

  const onOrgChange = (orgId, orgInfo) => {
    setShow(false);
    setOrg(orgInfo);
  }

  React.useEffect(() => {
    if (!org) return;

    getIssueOrg({orgId: org.orgId}).then((res) => {
      setOption({
        grid: {
          top: 6,
          bottom: 40,
        },
        xAxis: [
          {
            type: 'category',
            data: res.map(x => x.name),
          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1,
            name: '交办次数'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              color: getLinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#F772D1' },
                { offset: 0.5, color: '#C872F2' },
                { offset: 1, color: '#E5BEF8' }
              ])
            },
            data: res.map(x => x.value)
          }
        ]
      });
    });
  }, [org]);
  
  return (
    <Card>
      <Cell title="交办统计" isLink value={valStr} onClick={() => setShow(true)} />
      <Chart option={option} style={{ height: '30vh'}} />
      <OrgTree show={show} onChange={onOrgChange} onClose={onCancel} />
    </Card>
  )
}