import { Button, Descriptions, Badge, Popconfirm, Row, Col, Form, Input, Select, Table, Modal } from 'antd';
import React from 'react';
import {
  initFilter,
  extendRule,
  extendInclude,
  setDataFieldValue,
  showApprove,
  guid,
  ShowDateTime,
  GetFileModel,
} 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';
import FormPage from '../../FormPage';

class SK006ShowOperateLog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      riskCount: 1,
      riskHeight: 50,
      opEnd: null,
      detailForm: {
        isShow: false,
        formCode: '',
        title: '',
        ID: '',
      },
      fileData: [],
      fileForm: {
        title: '',
        visible: false,
      },
      // 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,
          });
        }
      },
    });
  };
  showDetailModalPage = (ID, CODE) => {
    if (ID == null) return message.warning('暂无待办');
    const newtmpData = {
      data: {
        id: ID,
        // USER_ID: USER_ID,
      },
      formCode: CODE,
    };
    this.setState({ tmpDataPage: newtmpData }, () => {
      var detailForm = {
        isShow: true,
        title: '',
      };
      console.log(this.state.tmpDataPage, '00');
      this.setState({
        detailForm: detailForm,
      });
    });
  };
  //详情弹窗关闭（隐藏）
  detailFormClose = () => {
    var detailForm = {
      isShow: false,
    };
    this.setState({
      detailForm: detailForm,
    });
  };
  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);
                // 获取上一个item的FORM_NAME
                const prevFormName = index > 0 ? data[index - 1].FORM_NAME : null;
                // 判断当前FORM_NAME是否与上一个重复
                const isDuplicate = item.FORM_NAME === prevFormName;

                {
                  return (
                    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start' }}>
                      <div style={{ width: '150px', textAlign: 'center', marginRight: '30px' }}>
                        {/* 当不是重复的FORM_NAME时才显示步骤名称 */}
                        {!isDuplicate && (
                          <div className={allStatusZero ? styles.stepno : styles.step} id="ste1">
                            {item.FORM_NAME}
                          </div>
                        )}
                        {!isDuplicate && 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 onClick={() => this.showDetailModalPage(item1.ID, item1.CODE)}>
                                      <div
                                        className={styles.stepx}
                                        style={{
                                          backgroundColor:
                                            item1.STATUS === 0
                                              ? '#A5A5A5' // STATUS=0 → 灰色背景
                                              : item1.STATUS === 10
                                              ? '#FFC000' // STATUS=10 → 橙色背景
                                              : item1.STATUS === 20
                                              ? '#f56c6c' // STATUS=20 → 红色背景
                                              : item1.STATUS === 16
                                              ? '#ADCDEA' // STATUS=16 → 蓝色背景
                                              : '#70AD47', // STATUS=5，15 → 绿色背景
                                        }}
                                        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 style={{ display: 'inline-block' }}>
          <Modal
            visible={this.state.detailForm.isShow}
            title={this.state.detailForm.title}
            maskClosable={false}
            closeModal={this.detailFormClose}
            onCancel={this.detailFormClose}
            footer={null}
            width="95%"
          >
            <FormPage {...this.state.tmpDataPage} />
          </Modal>
        </div>
        {GetFileModel(Modal, FormPage, this, this.state.fileForm.visible)}
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(SK006ShowOperateLog);