import { Button, Descriptions, Badge, Popconfirm, Row, Col, Form, Input, Select, Table } from 'antd';
import React from 'react';
import {
  initFilter,
  extendRule,
  extendInclude,
  setDataFieldValue,
  showApprove,
  guid,
  ShowDateTime,
} from '../../../utils/common.js';
import ReactToPrint from 'react-to-print';
import { ExportToExcel } from '@woowalker/feui';
import XLSX from 'xlsx';
import { connect } from 'dva';
import moment from 'moment';
import { message } from 'antd/lib/index';
import styles from './OperateLog.css';
import config from '../../../config.js';

class SK006ShowOperateLog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      riskCount: 1,
      riskHeight: 50,
      opEnd: null,
      // dateFirst: [
      //     [{ OPERATEPOINT: 10 }, { OPERATEPOINT: 20 }, { OPERATEPOINT: 30 }, { OPERATEPOINT: 40 }],
      //     [{ OPERATEPOINT: 48 }, { OPERATEPOINT: 50 }, { OPERATEPOINT: 60 }, { OPERATEPOINT: 70 }, { OPERATEPOINT: 80 }],
      //     [{ OPERATEPOINT: 130 }],
      //     [
      //         [{ OPERATEPOINT: 140 }, { OPERATEPOINT: 150 }, { OPERATEPOINT: 160 }, { OPERATEPOINT: 180 }, { OPERATEPOINT: 190 }, { OPERATEPOINT: 200 }, { OPERATEPOINT: 210 }, { OPERATEPOINT: 220 }]
      //     ]
      // ]
    };
  }

  componentDidMount() {
    if (this.props.data?.id) this.loadData(this.props.data?.id);
  }

  componentWillReceiveProps(NextProps) {
    if (NextProps.data?.id && this.props.data?.id != NextProps.data?.id) {
      this.loadData(NextProps.data?.id);
    }
  }

  loadData = (id) => {
    var orgId = this.props.login ? this.props.login.OrgId : '';
    let json = initFilter(orgId, id);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'SK/SKSecurityInspectionNotice/OperateLogView',
      onComplete: (ret) => {
        if (ret) {
          let riskCount = 1;
          riskCount = ret.length - 3;
          var isEnd = false;
          var opEnd = null;
          if (ret[ret.length - 1].length == 1 && ret[ret.length - 1][0].OPERATEPOINT == 220) {
            isEnd = true;
            riskCount = riskCount - 1;
            opEnd = ret[ret.length - 1][0];
          }

          let dataRiskMore = [];
          if (riskCount > 0) {
            var countOpeate = ret.length;
            if (isEnd) countOpeate--;
            for (let i = 4; i < countOpeate; i++) {
              dataRiskMore.push(ret[i]);
            }
          }
          if (riskCount == 0) riskCount = 1;
          let riskHeight = 65 * riskCount;
          this.setState({
            data: ret,
            dataRiskMore: dataRiskMore,
            riskCount: riskCount,
            opEnd: opEnd,
            riskHeight: riskHeight,
          });
        }
      },
    });
  };
  render() {
    const { data, riskCount, dataRiskMore, opEnd, riskHeight } = this.state;
    const enums = this.props.data.enums ? this.props.data.enums : this.props.app.enums;
    return (
      <div style={{ textAlign: 'center', margin: '30px 0 0 50px' }}>
        <table style={{ marginBottom: '50px' }}>
          <tbody>
            {/* <tr>
                        <td style={{ width: "150px", textAlign: "center" }}>
                            <div className={styles.rectangle} id="step0"></div>
                        </td>
                        <td colSpan={10}>
                        </td>
                    </tr> */}

            {/* 检查任务 */}

            {data &&
              data?.map((item, index) => {
                // 判断当前item的logList中是否所有STATUS都是0
                const allStatusZero = item.logList?.every((log) => log.STATUS === 0);
                {
                  return (
                    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start' }}>
                      <div style={{ width: '150px', textAlign: 'center', marginRight: '30px' }}>
                        <div className={allStatusZero ? styles.stepno : styles.step} id="ste1">
                          {item.FORM_NAME}
                        </div>
                        {index < data.length - 1 && (
                          <div className={allStatusZero ? styles.rectangleno : styles.rectangle} id="step1"></div>
                        )}
                      </div>
                      <div className={styles.logListContainer}>
                        <div className={styles.flowchartx}>
                          {item.logList &&
                            item.logList.map((item1, index1) => {
                              {
                                return (
                                  <div
                                    style={{
                                      display: 'flex',
                                      flexDirection: 'row',
                                      alignItems: 'center',
                                      justifyContent: 'center',
                                    }}
                                    key={index1}
                                  >
                                    <div>
                                      <div
                                        className={
                                          item1.STATUS == 0
                                            ? styles.stepxEnable
                                            : item1.STATUS == 5
                                            ? styles.stepx
                                            : styles.stepxOutTime
                                        }
                                        id="step20"
                                      >
                                        {item1.NAME}
                                      </div>
                                      <div id="step21" className={styles.discribeSpan}>
                                        <span className={styles.discribeSpanUser}> 用户：{item1.USER_NAME}</span>
                                        <span className={styles.discribeSpanTime}>
                                          {' '}
                                          时间：{ShowDateTime(item1.DEAL_DATE, 'MM-dd HH:mm')}
                                        </span>
                                      </div>
                                    </div>
                                    {index1 < item.logList.length - 1 ? <div className={styles.linex}></div> : null}
                                  </div>
                                );
                              }
                            })}
                        </div>
                      </div>
                    </div>
                  );
                }
              })}

            {/* 检查任务 */}

            {/* 隐患整改记录 */}
          </tbody>
        </table>
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(SK006ShowOperateLog);