import { useContext, useState } from 'react';
import { observer } from 'mobx-react';
import { StatisticCard } from '@ant-design/pro-components';
import { RingProgress, Progress, Bullet } from '@ant-design/plots';
import RcResizeObserver from 'rc-resize-observer';
import { stores_Context } from '../config';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import { Table, Space } from 'antd';

const { Statistic, Divider } = StatisticCard;

export default observer((props) => {
  const { icon, traditional, biz, kpiVal, originVal, diff, ...extProps } = props;
  const ValueIcon = props.icon;
  const valueStyle = { color: '#3f8600' };
  // const valueStyle = { color: (props?.VSrate || -1) < 0 ? '#3f8600' : '#cf1322' };
  // const VSIcon = () => ((props?.VSrate || -1) < 0 ? <ArrowDownOutlined /> : <ArrowUpOutlined />);
  // console.log(props, ';;;;');
  const [responsive, setResponsive] = useState(false);
  const showMulti = traditional.value && biz.value;
  const rangeMax = Math.max(originVal, kpiVal);
  const bulletData = [
    {
      title: '',
      ranges: [0, Math.ceil(rangeMax / 0.95)], // 留一点进度条, 不填满
      measures: [traditional.value, biz.value],
      target: kpiVal || 0,
    },
  ];

  const bulletConfig = {
    measureField: 'measures',
    rangeField: 'ranges',
    targetField: 'target',
    xField: 'title',
    height: 60,
    color: {
      range: ['#E8EDF3', '#FFF3E1'],
      // range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
      measure: ['#5B8FF9', '#61DDAA'],
      target: kpiVal ? '#FF9845' : '#5B8FF9',
    },
    label: {
      measure: {
        position: 'middle',
        style: {
          fill: '#fff',
        },
      },
    },
    xAxis: {
      line: null,
      label: false,
    },
    yAxis: false,
    tooltip: false,
    // 自定义 legend
    legend: false,
  };
  return (
    <RcResizeObserver
      key="resize-observer"
      onResize={(offset) => {
        setResponsive(offset.width < 596);
      }}
    >
      <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
        <StatisticCard
          statistic={{
            className: '__hn-sta-wrapper',
            valueStyle,
            ...extProps,
            value: props.valueSuffix ? `${props.value} ${props.valueSuffix}` : props.value,
            prefix: <ValueIcon twoToneColor={"#89B67F"} />,
            description: (
              <Space>
                <Statistic title={diff.label} value={` ${diff.value}`} />
                {diff.VSrate && <Statistic title="同比" value={`${diff.VSrate}%`} trend={diff.VSrate > 0 ? 'up' : 'down'} />}
              </Space>
            ),
          }}
          chart={showMulti ? <Bullet data={bulletData} {...bulletConfig} layout={'horizontal'} />: false}
          footer={null}
        />
      </StatisticCard.Group>
    </RcResizeObserver>
  );
});