import { TinyArea } from '@ant-design/charts';
import { ProCard, ProColumns, ProTable, StatisticCard } from '@ant-design/pro-components';
import { Space } from 'antd';
// import type { RadioChangeEvent } from 'antd/es/radio';
import ReactEcharts from 'echarts-for-react';

import React from 'react';

// style
import styles from '../styles/bannerInfoCard.less';
// 测试数据
import testData from '../testData';
import { color } from 'echarts';
/**data 数据源 */
const { trendData, salesTypeData, salesTypeDataOnline, salesTypeDataOffline } = testData;

const { useState } = React;

// static data 静态数据
const data = [
  { rank: 1, keyword: '网点一', users: 1000, range: 37, status: 1 },
  { rank: 2, keyword: '网点二', users: 800, range: 62, status: 1 },
  { rank: 3, keyword: '网点三', users: 1500, range: 20, status: 0 },
  { rank: 4, keyword: '网点四', users: 1200, range: 36, status: 0 },
  // 添加更多数据项
];

// 前三排名颜色样式
const handleRanking = (value: number) => {
  switch (value) {
    case 1:
      return "rgba(224, 40, 40, 1)"
      break;
    case 2:
      return "rgba(255, 172, 64, 1)"
      break;
    case 3:
      return "rgba(250, 219, 20, 1)"
      break;
    default:
      return ''
      break;
  }
};

/**comp 组件分解 */
const { Statistic } = StatisticCard;

const netWorkColumns: ProColumns[] = [
  {
    title: '排名',
    dataIndex: 'rank',
    valueType: 'indexBorder',
    width: 100,
    render: ( text: React.ReactNode,  record: { rank: number }) => (
      <span className={styles.networkList} style={{ backgroundColor: handleRanking(record.rank), color: record.rank < 4 ? '#FFF' : ''}}>{record.rank}</span>
    ),
  },
  {
    title: '设备名称',
    dataIndex: 'keyword',
    sorter: (a, b) => a.keyword.localeCompare(b.keyword),
  },
  {
    title: '识别次数',
    dataIndex: 'users',
    sorter: (a, b) => a.users - b.users,
  },
  // TODO 此处排序存在问题 需要优先判断状态，再区分数值
  {
    title: '涨幅',
    dataIndex: 'range',
    key: 'range',
    sorter: (a: { range: number }, b: { range: number }) => a.range - b.range,
    render: (text: React.ReactNode, record: { status: number }) => (
      <Statistic value={`${text}%`} trend={record.status === 1 ? 'down' : 'up'} />
    ),
  },
];

/**styles 组件样式配置 */
const footItemColSpanProps = { sm: 24, md: 24, lg: 12 }; // 底部卡片项栅格配置
const footItemHeadStyleProps = { marginBottom: 30, marginLeft: 10, padding: 0 }; // 底部卡片headStyles 配置

const trendItemColSpanProps = { sm: 24, md: 16, lg: 8 }; // 每个卡片项栅格配置
const trendItemStyle = { margin: 0, padding: 0, height: 190 }; // 每个卡片独立样式
const trendItemHeadStyle = { padding: 0 };

/**state 初始化数据 */
const offendingTrendData: Record<string, any>[] = [
  { label: '一级', value1: 11093, value2: '17.1', status: 0 },
  { label: '二级', value1: 26, value2: '27.1', status: 1 },
  { label: '三级', value1: 145, value2: '37.1', status: 1 },
];

/**methods 事件交互 */

/**函数组件 */
// 子组件
// 趋势 TrendInfoCard
const TrendInfoCard: React.FC = () => {
  return (
    <>
      <ProCard
        key="resize-observer"
        style={{ margin: 0, padding: 0 }}
        bodyStyle={{ margin: 0, padding: 0 }}
        wrap
        gutter={24}
      >
        {offendingTrendData.map((item, index) => {
          return (
            <ProCard
              gutter={24}
              wrap
              ghost
              title={item.label}
              tooltip={`${item.label}提示`}
              headStyle={trendItemHeadStyle}
              colSpan={trendItemColSpanProps}
              style={trendItemStyle}
              key={index}
              bodyStyle={{ margin: 0, padding: 0 }}
            >
              <Space style={{ marginTop: 0 }}>
                <Statistic value={item.value1} style={{ marginRight: 30 }} />
                <Statistic value={item.value2} trend={item.status === 1 ? 'down' : 'up'} />
              </Space>
              <StatisticCard
                bodyStyle={{ padding: 0 }}
                chart={
                  <>
                    <TinyArea xField="x" height={45} forceFit yField="y" smooth data={trendData} />
                  </>
                }
              />
            </ProCard>
          );
        })}
      </ProCard>
    </>
  );
};

// 各类别占比环形图
const DonutChart: React.FC = () => {
  const getOption = () => {
    return {
      title: {
        text: '总量',
        x: 'center',
        y: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 10,
        data: ['一级', '二级', '三级'],
      },
      series: [
        {
          name: '类别名称',
          type: 'pie',
          radius: ['50%', '80%'], // 控制环形图大小
          color: ["#FF8110", "#FFB404", "#3250FF"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '30',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 235, name: '二级'},
            { value: 510, name: '三级' },
            { value: 134, name: '一级' },
          ],
        },
      ],
    };
  };
  return (
    <div style={{ height: 340 }}>
      <ReactEcharts option={getOption()} />
    </div>
  );
};

// const menu = (
//   <Menu>
//     <Menu.Item>操作一</Menu.Item>
//     <Menu.Item>操作二</Menu.Item>
//   </Menu>
// );

// const dropdownGroup = (
//   <span className={styles.iconGroup}>
//     <Dropdown overlay={menu} placement="bottomRight">
//       <EllipsisOutlined />
//     </Dropdown>
//   </span>

// 主组件
const FootInfoCard: React.FC = () => {
  // type SalesType = 'all' | 'online' | 'stores';
  // const [salesType, setSalesType] = useState<SalesType>('all');

  // const handleChangeSalesType = (e: RadioChangeEvent) => {
  //   setSalesType(e.target.value);
  // };

  // let salesPieData;
  // if (salesType === 'all') {
  //   salesPieData = salesTypeData;
  // } else {
  //   salesPieData = salesType === 'online' ? salesTypeDataOnline : salesTypeDataOffline;
  // }

  return (
    <div className="FootInfoCard_wrap">
      <ProCard key="resize-observer" wrap gutter={24} bodyStyle={{ marginTop: 40, padding: 0 }}>
        <ProCard
          gutter={24}
          title="风险人员区域分布"
          headStyle={footItemHeadStyleProps}
          colSpan={footItemColSpanProps}
          bodyStyle={{ margin: 0, padding: 0 }}
        >
          {/* <TrendInfoCard></TrendInfoCard> */}
          <ProTable
            columns={netWorkColumns}
            dataSource={data}
            rowKey="rank"
            search={false} // 禁用搜索框
            options={false}
            pagination={{
              showQuickJumper: true,
              showSizeChanger: false,
              showTitle: false,
            }}
            dateFormatter="string"
            headerTitle=""
          />
        </ProCard>
        <ProCard
          gutter={24}
          headStyle={{...footItemHeadStyleProps}}
          colSpan={footItemColSpanProps}
          wrap
          bodyStyle={{ margin: 0, padding: 0 }}
          title="告警级别占比"
        >
           <div style={{maxWidth: '40vw'}}>
           <DonutChart ></DonutChart>
           </div>
        </ProCard>
      </ProCard>
    </div>
  );
};

export default FootInfoCard;
