import React from 'react';
import { connect } from 'dva';
import { initFilter } from '../../../utils/common';
import { Table, Row, Spin, Card } from 'antd';

class BI064FormRunAnalysis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      retData: [], // 表单运行数据
      companyData: [], // 公司数据
      loading: true,
      tableData: [], // 处理后的表格数据
      columns: [], // 动态生成的列
    };
  }

  componentDidMount() {
    this.loadData();
  }

  // 加载数据
  loadData = () => {
    this.getBaseData();
    this.getrealData();
  };

  // 获取公司数据
  getBaseData = () => {
    const json = initFilter(this.props.login.OrgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'FM/Organization/OrderPaged',
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        if (ret && ret.Data) {
          this.setState({ companyData: ret.Data }, () => {
            this.processData();
          });
        }
      },
    });
  };

  // 获取表单运行数据
  getrealData = () => {
    const json = initFilter(this.props.login.OrgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BI/BIStatiscialAnalysisController/GetTaskViewInfo',
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        if (ret && ret.Data) {
          this.setState({ retData: ret.Data, loading: false }, () => {
            this.processData();
          });
        } else {
          this.setState({ loading: false });
        }
      },
    });
  };

  // 处理数据，生成表格所需格式
  processData = () => {
    const { retData, companyData } = this.state;

    if (!retData.length || !companyData.length) return;

    // 获取所有模块和表单的列表
    const modules = [...new Set(retData.map((item) => item.MOULD_NAME))];
    const forms = [];

    // 按模块组织表单
    modules.forEach((module) => {
      const moduleForms = [
        ...new Set(retData.filter((item) => item.MOULD_NAME === module).map((item) => item.FORM_NAME)),
      ];

      moduleForms.forEach((form) => {
        forms.push({
          module,
          form,
          key: `${module}_${form}`,
        });
      });
    });

    // 处理每个公司的数据
    const tableData = forms.map((formItem) => {
      const { module, form, key } = formItem;
      const rowData = {
        key,
        module,
        form,
      };

      // 为每个公司添加数据
      companyData.forEach((company) => {
        const companyName = company.NAME;
        const companyDataKey = companyName.replace(/\s+/g, '');

        // 查找该公司该表单的数据
        const formData = retData.find(
          (item) => item.MOULD_NAME === module && item.FORM_NAME === form && item.COMPANY_NAME === companyName
        );

        if (formData) {
          // 计算完成率和及时率
          // const finishRate =
          //   formData.TOTAL_QTY > 0
          //     ? (((formData.NORMAL_FINISH + formData.OVER_FINISH + formData.DOING) / formData.TOTAL_QTY) * 100).toFixed(
          //         0
          //       )
          //     : '0';

          // const normalRate =
          //   formData.NORMAL_FINISH + formData.OVER_FINISH + formData.DOING > 0
          //     ? (
          //         (formData.NORMAL_FINISH / (formData.NORMAL_FINISH + formData.OVER_FINISH + formData.DOING)) *
          //         100
          //       ).toFixed(0)
          //     : '0';

          rowData[`${companyDataKey}_total`] = formData.TOTAL_QTY;
          rowData[`${companyDataKey}_normal`] = formData.NORMAL_FINISH;
          rowData[`${companyDataKey}_overtime`] = formData.OVER_FINISH;
          rowData[`${companyDataKey}_doing`] = formData.DOING;
          rowData[`${companyDataKey}_unfinish`] = formData.UNFINISH;
          rowData[`${companyDataKey}_overUnfinish`] = formData.OVER_UNFINISH;
          rowData[`${companyDataKey}_finishRate`] = formData.FINISH_RATE;
          rowData[`${companyDataKey}_normalRate`] = formData.NORMAL_RATE;
        } else {
          // 如果没有数据，设置默认值
          rowData[`${companyDataKey}_total`] = 0;
          rowData[`${companyDataKey}_normal`] = 0;
          rowData[`${companyDataKey}_overtime`] = 0;
          rowData[`${companyDataKey}_doing`] = 0;
          rowData[`${companyDataKey}_unfinish`] = 0;
          rowData[`${companyDataKey}_overUnfinish`] = 0;
          rowData[`${companyDataKey}_finishRate`] = '0';
          rowData[`${companyDataKey}_normalRate`] = '0';
        }
      });

      return rowData;
    });

    // 计算每个模块的行数，用于合并单元格
    const moduleRowCounts = {};
    let currentModule = null;
    let count = 0;

    tableData.forEach((row, index) => {
      if (row.module !== currentModule) {
        if (currentModule !== null) {
          moduleRowCounts[currentModule] = count;
        }
        currentModule = row.module;
        count = 1;
      } else {
        count++;
      }

      // 最后一个模块
      if (index === tableData.length - 1) {
        moduleRowCounts[currentModule] = count;
      }
    });

    // 将行数信息添加到tableData中，供render使用
    const tableDataWithRowSpan = tableData.map((row, index) => {
      // 找到该模块的起始索引
      const moduleStartIndex = tableData.findIndex((item) => item.module === row.module);

      // 如果是该模块的第一行，设置rowSpan为该模块的行数
      if (index === moduleStartIndex) {
        return {
          ...row,
          moduleRowSpan: moduleRowCounts[row.module] || 1,
        };
      } else {
        // 不是第一行，设置rowSpan为0，表示不显示
        return {
          ...row,
          moduleRowSpan: 0,
        };
      }
    });

    // 生成表格列
    const columns = this.generateColumns(companyData, tableDataWithRowSpan);

    this.setState({ tableData: tableDataWithRowSpan, columns });
  };

  // 动态生成表格列
  generateColumns = (companyData) => {
    const baseColumns = [
      {
        width: '150px',
        title: '模块',
        dataIndex: 'module',
        key: 'module',
        fixed: 'left',
        align: 'center',
        render: (value, row, index) => {
          const obj = {
            children: value,
            props: {},
          };

          // 设置rowSpan属性
          if (row.moduleRowSpan !== undefined) {
            obj.props.rowSpan = row.moduleRowSpan;
          }

          return obj;
        },
      },
      {
        width: '200px',
        title: '表单',
        dataIndex: 'form',
        key: 'form',
        fixed: 'left',
        align: 'center',
      },
    ];

    // 为每个公司生成列组
    companyData.forEach((company) => {
      const companyName = company.NAME;
      const companyDataKey = companyName.replace(/\s+/g, '');

      const companyColumns = {
        title: `${companyName}运行数据`,
        children: [
          {
            title: '总任务数',
            dataIndex: `${companyDataKey}_total`,
            key: `${companyDataKey}_total`,
            width: '80px',
            align: 'center',
          },
          {
            title: '正常完成',
            dataIndex: `${companyDataKey}_normal`,
            key: `${companyDataKey}_normal`,
            width: '80px',
            align: 'center',
          },
          {
            title: '超时完成',
            dataIndex: `${companyDataKey}_overtime`,
            key: `${companyDataKey}_overtime`,
            width: '80px',
            align: 'center',
          },
          {
            title: '进行中',
            dataIndex: `${companyDataKey}_doing`,
            key: `${companyDataKey}_doing`,
            width: '80px',
            align: 'center',
          },
          {
            title: '超期未完成',
            dataIndex: `${companyDataKey}_overUnfinish`,
            key: `${companyDataKey}_overUnfinish`,
            width: '80px',
            align: 'center',
          },
          {
            title: '完成率',
            dataIndex: `${companyDataKey}_finishRate`,
            key: `${companyDataKey}_finishRate`,
            width: '80px',
            align: 'center',
            render: (text) => <span>{text}%</span>,
          },
          {
            title: '及时率',
            dataIndex: `${companyDataKey}_normalRate`,
            key: `${companyDataKey}_normalRate`,
            width: '80px',
            align: 'center',
            render: (text) => <span>{text}%</span>,
          },
        ],
      };

      baseColumns.push(companyColumns);
    });

    return baseColumns;
  };

  render() {
    const { tableData, columns, loading } = this.state;

    return (
      <div>
        <div
          style={{
            backgroundColor: 'white',
            width: '100%',
            minHeight: '100vh',
            margin: 'auto',
            borderStyle: 'solid',
            borderColor: '#ccc',
            borderWidth: '1px',
            padding: '20px',
          }}
        >
          <h1
            style={{
              textAlign: 'center',
              marginTop: '20px',
              marginBottom: '30px',
              fontWeight: 'bold',
              fontSize: '24px',
            }}
          >
            系统运行情况统计分析
          </h1>

          <Row>
            <Spin spinning={loading}>
              {/* <Card> */}
              <Table
                style={{
                  width: '100%',
                  textAlign: 'center',
                }}
                scroll={{ x: 'max-content', y: 600 }}
                dataSource={tableData}
                columns={columns}
                pagination={false}
                loading={loading}
                size="middle"
                bordered
                rowKey="key"
                summary={() => (
                  <Table.Summary fixed="top">
                    <Table.Summary.Row style={{ backgroundColor: '#fafafa', fontWeight: 'bold' }}>
                      <Table.Summary.Cell index={0} colSpan={2}>
                        汇总
                      </Table.Summary.Cell>
                      {columns.slice(2).map((col, index) => (
                        <Table.Summary.Cell index={index + 2} key={index}>
                          {col.title === '总任务数' && (
                            <span>{tableData.reduce((sum, row) => sum + (row[col.dataIndex] || 0), 0)}</span>
                          )}
                        </Table.Summary.Cell>
                      ))}
                    </Table.Summary.Row>
                  </Table.Summary>
                )}
              />
              {/* </Card> */}
            </Spin>
          </Row>
        </div>
      </div>
    );
  }
}

export default connect(({ login, app }) => ({ login, app }))(BI064FormRunAnalysis);