/* eslint-disable prefer-destructuring */
/* eslint no-dupe-keys: 0, no-mixed-operators: 0 */
import React from 'react';
import { Steps } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import CommobileBase from '../../mobile/common/CommobileBase';
import CommobileListEvent from './CommobileListEvent';
import * as commonUtils from '../../utils/utils';

const Step = Steps.Step;
const warningIcon = () => (
  <svg
    t="1605371264198"
    className="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="1675"
    data-spm-anchor-id="a313x.7781069.0.i6"
  >
    <path
      d="M533.333333 949.333333c-235.648 0-426.666667-191.018667-426.666666-426.666666s191.018667-426.666667 426.666666-426.666667 426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666666z m-40.021333-640V597.333333a42.666667 42.666667 0 0 0 85.333333 0V309.333333a42.666667 42.666667 0 0 0-85.333333 0z m40.021333 469.333334a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z"
      p-id="1676"
      data-spm-anchor-id="a313x.7781069.0.i5"
      className=""
      fill="#faad14"
    />
  </svg>
);
const finishIcon = () => (
  <svg
    t="1605374543748"
    className="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="2801"
  >
    <path
      d="M512 64c-247.4 0-448 200.6-448 448s200.6 448 448 448S960 759.4 960 512 759.4 64 512 64z m193.5 301.7l-210.6 292c-12.7 17.7-39 17.7-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
      p-id="2802"
      data-spm-anchor-id="a313x.7781069.0.i19"
      className="selected"
      fill="#22ac38"
    />
  </svg>
);
const errorIcon = () => (
  <svg
    t="1605374709673"
    className="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="3619"
  >
    <path
      d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667z m0-486.997334L391.338667 330.965333 330.965333 391.338667 451.669333 512l-120.704 120.661333 60.373334 60.373334L512 572.330667l120.661333 120.704 60.373334-60.373334L572.330667 512l120.704-120.661333-60.373334-60.373334L512 451.669333z"
      p-id="3620"
      data-spm-anchor-id="a313x.7781069.0.i24"
      className="selected"
      fill="#ff4d4f"
    />
  </svg>
);


// eslint-disable-next-line react/require-render-return
class CommobileStep extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // isLoading: false,
    };
  }
  onClose = key => () => {
    this.setState({
      [key]: false,
    });
  }


  render() {
    const { sSlaveId, slaveData } = this.props; /* 工单号 */
    const iIndex = slaveData.findIndex(item => item.sSlaveId === sSlaveId);
    let slaveDataRow = {};
    if (iIndex > -1) {
      slaveDataRow = slaveData[iIndex];
      const sPartNameStatus = slaveDataRow.sPartNameStatus; /* 工单状态 */
      const sPartItem = commonUtils.isNotEmptyObject(sPartNameStatus) ? sPartNameStatus.split('->') : '';
      return (
        <div
          size="lg"
          style={{
 width: '100%', padding: '0.5em', textAlign: 'left', maxHeight: 'calc(100vh - 40px)', overflowY: 'auto', height: 'calc(100vh - 40px)',
}}
        >
          <div style={{ backgrounColor: '#fff' }}>
            {
              commonUtils.isNotEmptyObject(sPartNameStatus) ?
                <Steps size="small" current={1}>
                  {
            // eslint-disable-next-line array-callback-return
            sPartItem.map((t) => {
              // const sPartItemLength = sPartItem.length;
              const ArrItemStr = t.split('#')[0];
              const ArrItemNum = t.split('#')[1];
              const ArrItemName = t.split('#')[2];
              const ArrItemBanZhu = t.split('#')[3];
              const ArrItemTime = t.split('#')[4];
              const ArrItemPCNum = t.split('#')[5];
              const ArrItemSBNum = t.split('#')[6];
              let ArrItemNumChange = '';
              let icon = null;
              let status = 'wait';
              // eslint-disable-next-line no-unused-vars
              // eslint-disable-next-line default-case
              switch (Number(ArrItemNum)) {
                case 0:
                  ArrItemNumChange = '未排程';
                  status = 'error';
                  // eslint-disable-next-line react/jsx-no-undef
                  icon = warningIcon();
                  break;
                case 1:
                  ArrItemNumChange = '未完成';
                  // icon = <Icon type="close-circle" theme="filled" style={{ margin: '0 6px 0 0', color: '#ffa39e' }} title="未完成" />;
                  status = 'error';
                  icon = errorIcon();
                  break;
                case 2:
                  ArrItemNumChange = '生产中';
                  status = 'process';
                  // icon = <Icon type="clock-circle" theme="filled" style={{ margin: '0 6px 0 0', color: '#69c0ff' }} title="生产中" />;
                  break;
                case 3:
                  ArrItemNumChange = '暂停';
                  status = 'wait';
                  // icon = <Icon type="ause-circle" theme="filled" style={{ margin: '0 6px 0 0', color: '#fff566' }} title="暂停" />;
                  break;
                case 4:
                  ArrItemNumChange = '取消';
                  status = 'wait';
                  break;
                case 5:
                  // eslint-disable-next-line no-const-assign
                  ArrItemNumChange = '完成';
                  status = 'finish';
                  icon = finishIcon();
                  break;
              }
              const title = (
                <div style={{
 width: '100%', display: 'flex', justifyContent: 'space-between', color: '#000',
}}
                >
                  <span style={{ fontSize: '16px', fontWeight: 'normal' }}>{ArrItemStr}</span>
                  <span style={{ fontSize: '14px', color: '#333333', fontWeight: 'normal' }}>{ArrItemNumChange}</span>
                </div>
              );
              const content = (
                <div style={{
 fontSize: '1.1em', color: 'rgba(0, 0, 0, 0.85)', paddingBottom: '1px', borderBottom: '1px solid #f5f5f5',
}}
                >
                  <div style={{ width: '100%', display: 'flex', flexWrap: 'nowrap' }}>
                    <div style={{ flex: '2' }}><span >机台名称：</span>{ArrItemName}</div>
                    <div style={{ flex: '1' }}><span >班组名称：</span>{ArrItemBanZhu}</div>
                  </div>
                  <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
                    <div style={{ flex: '2' }}><span >排单时间：</span>{ArrItemTime}</div>
                    <div style={{ flex: '1' }}><span >排程数量：</span>{ArrItemPCNum}</div>
                  </div>
                  <div style={{ width: '100%', display: 'flex' }}>
                    <div style={{ flex: '2' }}><span >上报时间：</span></div>
                    <div style={{ flex: '1' }}><span >上报数量：</span>{ArrItemSBNum}</div>
                  </div>
                </div>
              );

              return (
                <Step title={title} description={content} status={status} icon={icon} />
              );
            })
          }
                </Steps> : ''
            }
          </div>
        </div>
      );
    }
  }
}

export default CommobileBase(CommobileListEvent(CommobileStep));