import React, { PureComponent } from 'react';
import { Card, Input, Button, Select, Row, Col, Avatar, Rate, message } from 'antd';
import { SearchOutlined, ReloadOutlined, SaveOutlined, RollbackOutlined, UserOutlined } from '@ant-design/icons';
import { history } from 'umi';
import styles from './PerformanceAssess.less';

const { TextArea } = Input;
const { Option } = Select;

class PerformanceAssess extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      // 筛选条件
      searchForm: {
        name: '',
        phone: '',
        idCard: '',
        performancePlan: '2025年度'
      },
      // 员工信息
      employeeInfo: {
        gender: '男',
        age: 32,
        department: '技术研发中心',
        position: '高级软件工程师',
        planName: '2025年度技术岗绩效计划'
      },
      // 绩效数据
      performanceData: {
        totalScore: 92,
        status: '已确认',
        objective: {
          codeLines: '15,672',
          docWords: '28,500',
          trainings: '8',
          projectAmount: '¥1,250,000',
          projectRatio: '35%',
          workHours: '1,850'
        },
        subjective: {
          execution: {
            score: 4.0,
            comment: '该员工能够高效执行分配的任务，在项目开发过程中表现出色，能够按时保质完成工作。在团队协作中主动承担责任，遇到问题能够积极寻求解决方案。'
          },
          loyalty: {
            score: 4.5,
            comment: '该员工高度认同公司文化和价值观，积极参与公司组织的各项活动。在日常工作中能够主动传播正能量，对新员工起到良好的示范作用。对公司发展战略有深刻理解并积极支持。'
          }
        }
      }
    };
  }

  // 处理搜索表单变化
  handleSearchFormChange = (field, value) => {
    this.setState(prevState => ({
      searchForm: {
        ...prevState.searchForm,
        [field]: value
      }
    }));
  };

  // 处理主观评价变化
  handleSubjectiveChange = (type, field, value) => {
    this.setState(prevState => ({
      performanceData: {
        ...prevState.performanceData,
        subjective: {
          ...prevState.performanceData.subjective,
          [type]: {
            ...prevState.performanceData.subjective[type],
            [field]: value
          }
        }
      }
    }));
  };

  // 查询按钮处理
  handleSearch = () => {
    message.success('查询成功');
  };

  // 重置按钮处理
  handleReset = () => {
    this.setState({
      searchForm: {
        name: '',
        phone: '',
        idCard: '',
        performancePlan: '2025年度'
      }
    });
    message.info('已重置查询条件');
  };

  // 保存评价
  handleSave = () => {
    message.success('评价已保存');
  };

  // 返回列表
  handleBack = () => {
    history.push('/topnavbar00/performancemanage/performancelist');
  };

  render() {
    const { searchForm, employeeInfo, performanceData } = this.state;

    return (
      <div className={styles['performance-assess-page']}>
        {/* 筛选区 */}
        <Card className={styles['search-section']}>
          <Row gutter={16}>
            <Col xs={24} sm={12} md={6}>
              <div className={styles['form-item']}>
                <label className={styles['form-label']}>姓名</label>
                <Input
                  placeholder="请输入姓名"
                  value={searchForm.name}
                  onChange={(e) => this.handleSearchFormChange('name', e.target.value)}
                />
              </div>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <div className={styles['form-item']}>
                <label className={styles['form-label']}>电话</label>
                <Input
                  placeholder="请输入电话"
                  value={searchForm.phone}
                  onChange={(e) => this.handleSearchFormChange('phone', e.target.value)}
                />
              </div>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <div className={styles['form-item']}>
                <label className={styles['form-label']}>身份证</label>
                <Input
                  placeholder="请输入身份证号"
                  value={searchForm.idCard}
                  onChange={(e) => this.handleSearchFormChange('idCard', e.target.value)}
                />
              </div>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <div className={styles['form-item']}>
                <label className={styles['form-label']}>绩效计划</label>
                <Select
                  style={{ width: '100%' }}
                  value={searchForm.performancePlan}
                  onChange={(value) => this.handleSearchFormChange('performancePlan', value)}
                >
                  <Option value="2025年度">2025年度</Option>
                  <Option value="2024年度">2024年度</Option>
                  <Option value="2023年度">2023年度</Option>
                </Select>
              </div>
            </Col>
          </Row>
          <div className={styles['search-actions']}>
            <Button type="primary" icon={<SearchOutlined />} onClick={this.handleSearch}>
              查询
            </Button>
            <Button icon={<ReloadOutlined />} onClick={this.handleReset}>
              重置
            </Button>
          </div>
        </Card>

        {/* 人员信息 */}
        <Card className={styles['employee-section']}>
          <div className={styles['employee-info']}>
            <Avatar size={64} icon={<UserOutlined />} className={styles['employee-avatar']} />
            <div className={styles['employee-details']}>
              <Row gutter={32}>
                <Col span={6}>
                  <div className={styles['info-item']}>
                    <span className={styles['info-label']}>性别</span>
                    <span className={styles['info-value']}>{employeeInfo.gender}</span>
                  </div>
                </Col>
                <Col span={6}>
                  <div className={styles['info-item']}>
                    <span className={styles['info-label']}>年龄</span>
                    <span className={styles['info-value']}>{employeeInfo.age}</span>
                  </div>
                </Col>
                <Col span={6}>
                  <div className={styles['info-item']}>
                    <span className={styles['info-label']}>部门</span>
                    <span className={styles['info-value']}>{employeeInfo.department}</span>
                  </div>
                </Col>
                <Col span={6}>
                  <div className={styles['info-item']}>
                    <span className={styles['info-label']}>岗位</span>
                    <span className={styles['info-value']}>{employeeInfo.position}</span>
                  </div>
                </Col>
              </Row>
            </div>
            <div className={styles['plan-info']}>
              <div className={styles['info-item']}>
                <span className={styles['info-label']}>绩效计划名称</span>
                <span className={styles['info-value']}>{employeeInfo.planName}</span>
              </div>
            </div>
          </div>
        </Card>

        {/* 绩效公式 */}
        <Card className={styles['formula-section']}>
          <h3 className={styles['section-title']}>绩效公式</h3>
          <div className={styles['formula-content']}>
            总分 = 代码量 × 0.1 + 文档字数 × 0.01 + 培训次数 × 3 + 项目金额 × 0.01 + 项目比重 × 0.1 + 工作时长 × 0.01 + 执行力 × 0.1 + 对公司认同度 × 0.1
          </div>
        </Card>

        {/* 绩效总分 */}
        <Card className={styles['score-section']}>
          <Row justify="space-between" align="middle">
            <Col>
              <div className={styles['score-info']}>
                <span className={styles['score-label']}>绩效总分</span>
                <span className={styles['score-value']}>{performanceData.totalScore}</span>
              </div>
            </Col>
            <Col>
              <div className={styles['status-info']}>
                <span className={styles['status-label']}>审批状态</span>
                <span className={styles['status-value']}>{performanceData.status}</span>
              </div>
            </Col>
          </Row>
        </Card>

        {/* 客观指标 */}
        <Card className={styles['objective-section']}>
          <h3 className={styles['section-title']}>客观指标</h3>
          <Row gutter={[32, 16]}>
            <Col xs={24} sm={12} md={8}>
              <div className={styles['metric-item']}>
                <span className={styles['metric-label']}>代码量</span>
                <span className={styles['metric-value']}>{performanceData.objective.codeLines} 行</span>
              </div>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <div className={styles['metric-item']}>
                <span className={styles['metric-label']}>文档字数</span>
                <span className={styles['metric-value']}>{performanceData.objective.docWords} 字</span>
              </div>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <div className={styles['metric-item']}>
                <span className={styles['metric-label']}>培训次数</span>
                <span className={styles['metric-value']}>{performanceData.objective.trainings} 次</span>
              </div>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <div className={styles['metric-item']}>
                <span className={styles['metric-label']}>项目金额</span>
                <span className={styles['metric-value']}>{performanceData.objective.projectAmount}</span>
              </div>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <div className={styles['metric-item']}>
                <span className={styles['metric-label']}>项目比重</span>
                <span className={styles['metric-value']}>{performanceData.objective.projectRatio}</span>
              </div>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <div className={styles['metric-item']}>
                <span className={styles['metric-label']}>工作时长</span>
                <span className={styles['metric-value']}>{performanceData.objective.workHours} 小时</span>
              </div>
            </Col>
          </Row>
        </Card>

        {/* 主观指标 */}
        <Row gutter={16} className={styles['subjective-section']}>
          {/* 执行力 */}
          <Col xs={24} md={12}>
            <Card className={styles['subjective-card']}>
              <h3 className={styles['section-title']}>执行力</h3>
              <div className={styles['rating-section']}>
                <span className={styles['rating-label']}>评分：</span>
                <Rate
                  allowHalf
                  value={performanceData.subjective.execution.score}
                  onChange={(value) => this.handleSubjectiveChange('execution', 'score', value)}
                />
                <span className={styles['rating-value']}>{performanceData.subjective.execution.score}</span>
              </div>
              <div className={styles['comment-section']}>
                <label className={styles['comment-label']}>评价</label>
                <TextArea
                  rows={4}
                  placeholder="请输入评价内容..."
                  value={performanceData.subjective.execution.comment}
                  onChange={(e) => this.handleSubjectiveChange('execution', 'comment', e.target.value)}
                />
              </div>
            </Card>
          </Col>

          {/* 对公司认同度 */}
          <Col xs={24} md={12}>
            <Card className={styles['subjective-card']}>
              <h3 className={styles['section-title']}>对公司认同度</h3>
              <div className={styles['rating-section']}>
                <span className={styles['rating-label']}>评分：</span>
                <Rate
                  allowHalf
                  value={performanceData.subjective.loyalty.score}
                  onChange={(value) => this.handleSubjectiveChange('loyalty', 'score', value)}
                />
                <span className={styles['rating-value']}>{performanceData.subjective.loyalty.score}</span>
              </div>
              <div className={styles['comment-section']}>
                <label className={styles['comment-label']}>评价</label>
                <TextArea
                  rows={4}
                  placeholder="请输入评价内容..."
                  value={performanceData.subjective.loyalty.comment}
                  onChange={(e) => this.handleSubjectiveChange('loyalty', 'comment', e.target.value)}
                />
              </div>
            </Card>
          </Col>
        </Row>

        {/* 操作按钮 */}
        <div className={styles['action-section']}>
          <Button type="primary" icon={<SaveOutlined />} onClick={this.handleSave}>
            保存评价
          </Button>
          <Button  icon={<RollbackOutlined />} onClick={this.handleBack}>
            返回列表
          </Button>
        </div>
      </div>
    );
  }
}

export default PerformanceAssess;