import React, { useState } from 'react';
import ReactEcharts from 'echarts-for-react';
import { Radio, Button } from 'antd';
import { SwapOutlined, CloseOutlined } from '@ant-design/icons';

interface ItemChartProps {
  type?: string;
  id?: string;
  options: any;
  handleSelect?: (type: string, id: string) => void;
  checkedItem?: string;
  card?: any;
  handleDelete?: (id: string) => void;
}

const Buttons = () => {
  const [value, setVal] = useState('default');

  const handleChange = (e: any) => {
    setVal(e.target.value);
  };
  return (
    <div className={'qx-chart-handleBtn'}>
      <Radio.Group
        value={value}
        onChange={handleChange}
        size={'small'}
        className={'qx-chart-radioBtn'}
      >
        <Radio.Button value="default">默认</Radio.Button>
        <Radio.Button value="stack">堆叠</Radio.Button>
        <Radio.Button value="percent">百分比</Radio.Button>
      </Radio.Group>
      <Button
        icon={<SwapOutlined />}
        style={{ transform: 'rotate(90deg)', marginLeft: '10px' }}
        size={'small'}
      />
    </div>
  );
};
const ItemChart: React.FC<ItemChartProps> = (props) => {
  const { type, id, checkedItem, card = {} } = props;
  const { enableTitle, title, enableTotal, total } = card.styleJson || {};

  const handleSelect = () => {
    if (props.handleSelect) props.handleSelect(type || '', id || '');
  };
  return (
    <div
      onClick={handleSelect}
      className={`qx-item-chart ${
        checkedItem === id ? 'qx-chart-selected' : null
      }`}
    >
      <span className={'qx-chart-selected_delete'}>
        <CloseOutlined
          onClick={() => {
            if (props.handleDelete) {
              props.handleDelete(id || '');
            }
          }}
        />
      </span>
      {
        // 图表标题
        enableTitle && title.name ? (
          <h4
            className={`qx-chart-title ${
              title.x === 'left'
                ? 'left'
                : title.x === 'center'
                ? 'center'
                : 'right'
            }`}
          >
            {title.name}
          </h4>
        ) : null
      }
      {
        // 总计
        enableTotal ? (
          <div style={{ margin: ' 10px 0 0 20px' }}>
            <span>
              {!!total.name ? total.name : `总计`}：
              {!!total.result && parseFloat(total.result).toFixed(2)}
            </span>
          </div>
        ) : null
      }
      {/*按钮区域*/}
      {/*<Buttons/>*/}
      <ReactEcharts
        option={props.options} // option：图表配置项
        // onEvents={events}
        notMerge={true}
        lazyUpdate={true}
        style={{ flex: 1 }}
      />
    </div>
  );
};

export default ItemChart;