import React, { PureComponent } from 'react';
import { Card, Button, Alert, Dropdown, Row, Col, Tree, Statistic } from 'antd';
import {
  BuildingOutlined,
  TeamOutlined,
  ClockCircleOutlined,
  DownloadOutlined,
  DownOutlined,
  SyncOutlined,
  UserOutlined,
  DollarOutlined,
  SettingOutlined,
  BellOutlined
} from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import styles from './OrganChart.less';

class OrganChart extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedYear: '2023',
      expandedKeys: ['0-0', '0-0-0', '0-0-1', '0-0-2'],
      organizationData: [
        {
          title: '集团公司',
          key: '0-0',
          count: 1284,
          children: [
            {
              title: '行政中心',
              key: '0-0-0',
              count: 356,
              children: [
                { title: '人力资源部', key: '0-0-0-0', count: 45 },
                { title: '财务部', key: '0-0-0-1', count: 32 },
                { title: 'IT部', key: '0-0-0-2', count: 28 }
              ]
            },
            {
              title: '营销中心',
              key: '0-0-1',
              count: 268,
              children: [
                { title: '市场部', key: '0-0-1-0', count: 86 },
                { title: '销售部', key: '0-0-1-1', count: 124 },
                { title: '客户服务部', key: '0-0-1-2', count: 58 }
              ]
            },
            {
              title: '研发中心',
              key: '0-0-2',
              count: 232,
              children: [
                { title: '前端开发部', key: '0-0-2-0', count: 76 },
                { title: '后端开发部', key: '0-0-2-1', count: 92 },
                { title: '移动开发部', key: '0-0-2-2', count: 64 }
              ]
            }
          ]
        }
      ]
    };
  }

  // 获取处理后的树形数据
  getTreeData = () => {
    const { organizationData } = this.state;
    
    const processNode = (node) => ({
      key: node.key,
      title: (
        <span className={styles['tree-node-title']}>
          {this.getNodeIcon(node.title)}
          <span className={styles['node-title']}>{node.title}</span>
          <span className={styles['node-count']}>({node.count})</span>
        </span>
      ),
      children: node.children ? node.children.map(processNode) : undefined
    });
    
    return organizationData.map(processNode);
  };

  // 获取节点图标
  getNodeIcon = (title) => {
    if (title.includes('集团')) return <TeamOutlined />;
    if (title.includes('中心')) return <TeamOutlined />;
    if (title.includes('人力')) return <UserOutlined />;
    if (title.includes('财务')) return <DollarOutlined />;
    if (title.includes('IT') || title.includes('开发')) return <SettingOutlined />;
    return <TeamOutlined />;
  };

  // 获取年份菜单
  getYearMenu = () => {
    const years = ['2021', '2022', '2023', '2024'];
    const menuItems = years.map(year => ({
      key: year,
      label: year,
    }));
    
    return {
      items: menuItems,
      onClick: ({ key }) => this.setState({ selectedYear: key })
    };
  };

  // ECharts配置选项
  getDepartmentChartOption = () => {
    return {
      title: {
        text: '各部门人员分布',
        left: 'center',
        textStyle: {
          fontSize: 16,
          fontWeight: 'normal'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: '{b}: {c}人'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: {
          lineStyle: { color: '#f0f0f0' }
        }
      },
      yAxis: {
        type: 'category',
        data: ['人力资源部', '财务部', 'IT部', '市场部', '销售部', '客户服务部', '前端开发部', '后端开发部', '移动开发部'],
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          fontSize: 12
        }
      },
      series: [
        {
          name: '人数',
          type: 'bar',
          data: [45, 32, 28, 86, 124, 58, 76, 92, 64],
          itemStyle: {
            color: '#1890ff',
            borderRadius: [0, 4, 4, 0]
          },
          barWidth: 20,
          label: {
            show: true,
            position: 'right',
            formatter: '{c}人',
            fontSize: 11
          }
        }
      ]
    };
  };

  // 组织架构分布饼图配置
  getOrgPieChartOption = () => {
    return {
      title: {
        text: '部门人员占比',
        left: 'center',
        textStyle: {
          fontSize: 16,
          fontWeight: 'normal'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}人 ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        top: 'middle',
        textStyle: {
          fontSize: 12
        }
      },
      series: [
        {
          name: '部门分布',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['65%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '14',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 356, name: '行政中心' },
            { value: 268, name: '营销中心' },
            { value: 232, name: '研发中心' },
            { value: 428, name: '其他部门' }
          ],
          itemStyle: {
            borderRadius: 5,
            borderColor: '#fff',
            borderWidth: 2
          }
        }
      ]
    };
  };

  // 树节点展开/收起处理
  onExpand = (expandedKeys) => {
    this.setState({ expandedKeys });
  };

  render() {
    const { selectedYear, expandedKeys } = this.state;

    return (
      <div className={styles['organ-chart-page']} style={{ 
        height: '100vh', 
        overflowY: 'auto', 
        overflowX: 'hidden',
        padding: '16px'
      }}>
        {/* 公告栏 */}
        <Alert
          message={
            <div className={styles['announcement-container']}>
              <div className={styles['announcement-badge']}>
                <BellOutlined />
                公告
              </div>
              <div className={styles['announcement-content']}>
                <div className={styles['marquee-text']}>
                  <span>2023年度绩效考核方案已发布，请各部门负责人及时查阅</span>
                  <span>系统将于2023年12月25日00:00-06:00进行升级维护</span>
                  <span>新员工入职培训计划已更新，请相关人员注意查收邮件</span>
                  <span>年度优秀员工评选活动正式启动，详情请见内网公告</span>
                </div>
              </div>
            </div>
          }
          type="info"
          closable
          className={styles['organ-chart-announcement']}
        />

        <Row gutter={24}>
          {/* 左侧组织架构树 */}
          <Col xs={24} md={6}>
            <Card
              title={
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <TeamOutlined style={{ marginRight: 8, color: '#1890ff' }} />
                    <span>组织架构</span>
                  </div>
                  <Button
                    type="text"
                    icon={<SyncOutlined />}
                    size="small"
                    style={{ color: '#1890ff' }}
                  />
                </div>
              }
              className={styles['org-sidebar']}
              style={{ height: 'calc(100vh - 200px)', overflowY: 'auto' }}
            >
              <div style={{ maxHeight: 'calc(100vh - 280px)', overflowY: 'auto' }}>
                <Tree
                  showIcon
                  expandedKeys={expandedKeys}
                  onExpand={this.onExpand}
                  treeData={this.getTreeData()}
                />
              </div>
            </Card>
          </Col>

          {/* 右侧内容区 */}
          <Col xs={24} md={18}>
            <div style={{ height: 'calc(100vh - 200px)', overflowY: 'auto', paddingRight: '8px' }}>
              {/* 筛选区域 */}
              <Card className={styles['filter-section']} style={{ marginBottom: '16px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <h2 className={styles['section-title']}>组织架构详情</h2>
                <div className={styles['filter-actions']}>
                  <div className={styles['year-selector']}>
                    <span>年份:</span>
                    <Dropdown 
                      menu={this.getYearMenu()} 
                      trigger={['click']}
                    >
                      <Button type="default">
                        {selectedYear} <DownOutlined />
                      </Button>
                    </Dropdown>
                  </div>
                  <Button type="primary" icon={<DownloadOutlined />}>
                    导出
                  </Button>
                </div>
              </div>
            </Card>

            {/* 主要内容区 */}
            <Card className={styles['main-content']}>
              {/* 组织架构图 */}
              <div className={styles['org-chart-container']}>
                <Card className={`${styles['org-chart-node']} ${styles['company-node']}`}>
                  <div className={styles['node-title']}>集团公司</div>
                  <div className={styles['node-count']}>1,284人</div>
                </Card>
                
                <Row gutter={32} className={styles['center-row']}>
                  <Col xs={24} md={8} className={styles['center-column']}>
                    <Card className={`${styles['org-chart-node']} ${styles['center-node']}`}>
                      <div className={styles['node-title']}>行政中心</div>
                      <div className={styles['node-count']}>356人</div>
                    </Card>
                    <div className={styles['department-list']}>
                      <Card className={styles['department-node']}>
                        <div className={styles['node-title']}>人力资源部</div>
                        <div className={styles['node-count']}>45人</div>
                      </Card>
                      <Card className={styles['department-node']}>
                        <div className={styles['node-title']}>财务部</div>
                        <div className={styles['node-count']}>32人</div>
                      </Card>
                      <Card className={styles['department-node']}>
                        <div className={styles['node-title']}>IT部</div>
                        <div className={styles['node-count']}>28人</div>
                      </Card>
                    </div>
                  </Col>
                  
                  <Col xs={24} md={8} className={styles['center-column']}>
                    <Card className={`${styles['org-chart-node']} ${styles['center-node']}`}>
                      <div className={styles['node-title']}>营销中心</div>
                      <div className={styles['node-count']}>268人</div>
                    </Card>
                    <div className={styles['department-list']}>
                      <Card className={styles['department-node']}>
                        <div className={styles['node-title']}>市场部</div>
                        <div className={styles['node-count']}>86人</div>
                      </Card>
                      <Card className={styles['department-node']}>
                        <div className={styles['node-title']}>销售部</div>
                        <div className={styles['node-count']}>124人</div>
                      </Card>
                      <Card className={styles['department-node']}>
                        <div className={styles['node-title']}>客户服务部</div>
                        <div className={styles['node-count']}>58人</div>
                      </Card>
                    </div>
                  </Col>
                  
                  <Col xs={24} md={8} className={styles['center-column']}>
                    <Card className={`${styles['org-chart-node']} ${styles['center-node']}`}>
                      <div className={styles['node-title']}>研发中心</div>
                      <div className={styles['node-count']}>232人</div>
                    </Card>
                    <div className={styles['department-list']}>
                      <Card className={styles['department-node']}>
                        <div className={styles['node-title']}>前端开发部</div>
                        <div className={styles['node-count']}>76人</div>
                      </Card>
                      <Card className={styles['department-node']}>
                        <div className={styles['node-title']}>后端开发部</div>
                        <div className={styles['node-count']}>92人</div>
                      </Card>
                      <Card className={styles['department-node']}>
                        <div className={styles['node-title']}>移动开发部</div>
                        <div className={styles['node-count']}>64人</div>
                      </Card>
                    </div>
                  </Col>
                </Row>
              </div>

              {/* 统计卡片 */}
              <Row gutter={16} className={styles['statistics-row']}>
                <Col xs={24} sm={8}>
                  <Card className={styles['stat-card']}>
                    <Statistic
                      title="部门总数"
                      value={24}
                      prefix={<TeamOutlined />}
                      suffix="个"
                      valueStyle={{ color: '#1890ff' }}
                    />
                    <div className={styles['stat-desc']}>较上月增加2个</div>
                  </Card>
                </Col>
                <Col xs={24} sm={8}>
                  <Card className={styles['stat-card']}>
                    <Statistic
                      title="员工总数"
                      value={1284}
                      prefix={<UserOutlined />}
                      suffix="人"
                      valueStyle={{ color: '#52c41a' }}
                    />
                    <div className={styles['stat-desc']}>较上月增加56人</div>
                  </Card>
                </Col>
                <Col xs={24} sm={8}>
                  <Card className={styles['stat-card']}>
                    <Statistic
                      title="平均在职时长"
                      value={3.2}
                      prefix={<ClockCircleOutlined />}
                      suffix="年"
                      precision={1}
                      valueStyle={{ color: '#fa8c16' }}
                    />
                    <div className={styles['stat-desc']}>较上月增加0.1年</div>
                  </Card>
                </Col>
              </Row>
            </Card>

            {/* 图表区域 */}
            <Row gutter={16} className={styles['charts-row']}>
              <Col xs={24} lg={14}>
                <Card title="各部门人员分布" className={styles['chart-section']}>
                  <ReactECharts
                    option={this.getDepartmentChartOption()}
                    style={{ height: '300px' }}
                  />
                </Card>
              </Col>
              <Col xs={24} lg={10}>
                <Card title="部门人员占比" className={styles['chart-section']}>
                  <ReactECharts
                    option={this.getOrgPieChartOption()}
                    style={{ height: '300px' }}
                  />
                </Card>
              </Col>
            </Row>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}

export default OrganChart;