import React from 'react'
import { Icon } from '../../../../../components/icons'
import { CloudDownloadOutlined } from '@ant-design/icons'
import { RendererEnv } from '../../../../../env'
import { isMobile } from '../../../../../utils/helper'
import { attachments, FlieText, FlowDetail, processNodeList } from '../../../MobileProcess/type'
import { byteSize, downloadFile } from '../../../utils/utils'
import './index.scss'
import ImageComponent, { ImageThumbProps } from '../../../../Image'

interface FlowViewProps {
  processNode: processNodeList[],
  flowDetail: FlowDetail
  env?: RendererEnv
  onImageEnlarge?: (
    info: Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'> & {
      index?: number;
      list?: Array<
        Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'>
      >;
    }
  ) => void;
}

// String OPERATION_STATUS_WAITING ="waiting";// 待审核   
// String OPERATION_STATUS_ONDO ="ondo";// 可签核         
// String OPERATION_STATUS_DOING ="doing";// 处理中       
// String OPERATION_STATUS_REVERT ="revert";//撤销        
// String OPERATION_STATUS_REFUSE ="refuse";//拒绝        
// String OPERATION_STATUS_PASS ="pass";//通过  
// String OPERATION_STATUS_PASS ="submit";//提交申请
// String OPERATION_STATUS_PASS ="return";//退回
// nodeType表示加签|| 会签 ||或签 || 2 || 1 || 0

const FlowInformation: React.FC<FlowViewProps> = (props) => {
  const { processNode, flowDetail, env, onImageEnlarge } = props
  const Mobile: boolean = isMobile()
  const baseUrl = env?.axiosInstance?.defaults?.baseURL || env?.ajaxApi || ''
  const canonicalImg = /(.jpe?)g|(.png)|(.svg)|(.gif)/i
  const canonicalPpd = /(.ppd)/i;
  const canonicalPdf = /(.pdf)/i;
  const canonicalXlsx = /(.xlsx)|(.xls)/i;
  const canonicalDocx = /(.docx)|(.doc)/;

  const last = ['approver_opinion1', 'approver_opinion2', 'approver_opinion3', 'approver_opinion4', 'approver_opinion5', 'approver_opinion6', 'approver_opinion7', 'approver_opinion8', 'approver_opinion9']
  const opinion = ['通过', '待审核', '撤销', '可签核', '拒绝', '审核中', '提交申请', '退回', '未定义']

  const mergeNodes = (nodes: processNodeList[]) => {
    const result: processNodeList[][] = [];
    let group: processNodeList[] = [];
    for (let i = 0; i < nodes.length; i++) {
      const curr = nodes[i];
      const prev = nodes[i - 1];
      if (i > 0 && curr.nodeName !== prev.nodeName) {
        result.push(group);
        group = [];
      }
      group.push(curr);
    }
    if (group.length > 0) {
      result.push(group);
    }
    return result;
  }

  const result = mergeNodes(processNode);

  const actual = (val: string, constent: string[]) => {
    switch (val) {
      case 'pass':
        return constent[0]
      case 'waiting':
        return constent[1]
      case 'revert':
        return constent[2]
      case 'ondo':
        return constent[3]
      case 'refuse':
        return constent[4]
      case 'doing':
        return constent[5]
      case 'submit':
        return constent[6]
      case 'return':
        return constent[7]
      default:
        return constent[8]
    }
  }

  const decision = (val: string) => {
    switch (val) {
      case 'submit':
        return <div className='decision_icon submit' ></div>
      case 'pass':
        return <div className='decision_icon pass'></div>
      case 'waiting':
        return <div className='decision_icon waiting'></div>
      case 'revert':
        return <div className='decision_icon revert'></div>
      case 'ondo':
        return <div className='decision_icon ondo' ></div>
      case 'refuse':
        return <div className='decision_icon refuse'></div>
      case 'doing':
        return <div className='decision_icon doing'></div>
      default:
        return <div className='decision_icon'></div>
    }
  }

  const filetext = (fileName: string) => {
    if (canonicalPdf.test(fileName)) {
      return <Icon icon={'file-pdf'} className="icon"></Icon>
    } else if (canonicalPpd.test(fileName)) {
      return <Icon icon={'file-ppd'} className="icon"></Icon>
    } else if (canonicalImg.test(fileName)) {
      return <Icon icon={'file-img'} className="icon"></Icon>
    } else if (canonicalXlsx.test(fileName)) {
      return <Icon icon={'file-xls'} className="icon"></Icon>
    } else if (canonicalDocx.test(fileName)) {
      return <Icon icon={'file-doc'} className="icon"></Icon>
    } else {
      return <Icon icon={'file-file'} className="icon"></Icon>
    }
  }
  // 文件分组
  const filetsort = (fileName: attachments[]) => {
    const filePdf: attachments[] = [];
    const filePpd: attachments[] = [];
    const fileRun: attachments[] = [];
    const fileXlsx: attachments[] = [];
    const fileDocx: attachments[] = [];
    fileName.forEach((item) => {
      if (canonicalPdf.test(item.name)) {
        filePdf.push(item)
      } else if (canonicalPpd.test(item.name)) {
        filePpd.push(item)
      } else if (canonicalXlsx.test(item.name)) {
        fileXlsx.push(item)
      } else if (canonicalDocx.test(item.name)) {
        fileDocx.push(item)
      } else {
        fileRun.push(item)
      }
    })
    return [...filePdf, ...filePpd, ...fileXlsx, ...fileDocx, ...fileRun]
  }
  // 下载


  const previewImage = (file: FlieText, showfileimg: FlieText[]) => {
    if (onImageEnlarge) {
      onImageEnlarge({
        // 预览地址
        src: file.thumbnailAddr as string,
        originalSrc: file.thumbnailAddr as string,
        list: showfileimg.map(file => ({
          src: file.thumbnailAddr as string,
          originalSrc: file.thumbnailAddr as string,
          title: file.name
        }))
      });
    }
  }

  const handledownload = (data: processNodeList) => {
    const dataImg = data.attachments.filter(Item => canonicalImg.test(Item.name))
    const dataText = filetsort(data.attachments.filter(Item => !canonicalImg.test(Item.name)))

    return <>
      <div className='data_img'>
        {
          dataImg.map((item, index) => {
            return <div className='pieceimg'>
              <ImageComponent
                className='pieceimg_img'
                key={index}
                src={baseUrl + item.thumbnailAddr}
                originalSrc={item.addr}
                alt={item.name || item.preview_name}
                thumbRatio={'1:1'}
                imageClassName={'icon-fill'}
                thumbClassName={'pieceimg_img_data'}
                overlays={
                  <>
                    <a
                      data-tooltip={"查看大图"}
                      data-position="bottom"
                      target="_blank"
                      rel="noopener"
                      onClick={() => previewImage(item, dataImg)}
                    >
                      <Icon icon="view" className="icon" />
                    </a>
                    <a
                      data-tooltip={"下载"}
                      data-position="bottom"
                      target="_blank"
                      rel="noopener"
                      onClick={() => { downloadFile(baseUrl + item.addr, item.name) }}
                    >
                      <span className="fa fa-download" style={{ fontSize: '13px' }} ></span>
                    </a>
                  </>
                }
              />
            </div>
          })
        }
      </div>
      <div className='data_text'>
        {
          dataText.map((item) => {
            return <div className='textfile_xls'>
              {/* 左边icon和名字 */}
              <div className='textfile_text'>
                <span className='textfile_icon'>
                  {filetext(item.name)}
                </span>
                <span className='text'>
                  {item.name}
                </span>
              </div>
              <div className='textfile_size'>
                <span className='item-select-tag-size'>{byteSize(item.size)}</span>
                {/* 下载按钮 */}
                <span className='item-select-tag-btn' title='下载' onClick={() => {
                  downloadFile(baseUrl + item.addr, item.name)
                }}>
                  <CloudDownloadOutlined />
                </span>
              </div>
            </div>
          })
        }
      </div>
    </>
  }

  const handledBy = (val: processNodeList) => {
    return <div className='approver'>
      <div className='decision'>
        <div className='outer-layer'>
          {decision(val.nodeStatus)}
        </div>
      </div>
      <div className='approver_usercontent'>
        <div className='approver_user'>
          <div className='approver_personnel'>
            <span className='approver_img'>
              < Icon icon='camera' className="icon"></Icon>
            </span>
            <span className='approver_name'>
              <span>{val.nodeUser.userName}</span>
              {val.nodeUser.userRole && <>
                <span style={{ fontSize: "20px", verticalAlign: 'top' }}> · </span>
                <span> {val.nodeUser.userRole} </span>
              </>}
            </span>
          </div>
          {val.nodeStatus && <div className='approver_status'>
            {
              val.nodeEndTime &&
              < span className={`approver_time`} >
                {val.nodeEndTime}
              </span>
            }
            <span
              className={`${actual(val.nodeStatus, last)}`} >
              {actual(val.nodeStatus, opinion)}
            </span>
          </div>}
        </div>
        {/* 文本内容 */}
        <div className='put-on-display' >
          {
            val.remarkComment &&
            <p className='approver_content'>
              {val.remarkComment}
            </p>
          }
          {val.attachments && handledownload(val)}

        </div>
      </div>
    </div>
  }

  const before = (item: processNodeList[], data: any) => {
    return item.some(item => item.nodeStatus == data)
  }

  return (
    <div className='technological'>
      <div className='title'>
        {/* 内容 */}
        <div className='titlecontent'>
          <h3 className='name_const'>审批详情</h3>
        </div>
        <div className='titlecontent' style={{ paddingLeft: '16px' }}>
          <div className={`flow_path ${!Mobile ? "flow_Mobile" : ""}`}>
            <div>
              <span className='outlined'>
              </span>
              <span className='flow_path_text'>
                流程开始
              </span>
            </div>
            <div className='titlecontent_line' style={{ height: 'calc(100% + 38px)' }}></div>
            {/* {currentaudit(flowDetail.flowProcess.processStatus)} */}
          </div>
          {/* 处理人 */}
          {
            result && result.map((item: processNodeList[], Inx) => {
              return <>
                <div key={item[0].nodeId} className="process_group">
                  <div className={`process_title ${before(item, 'doing') ?
                    'process_doing' :
                    before(item, 'waiting') ?
                      "process_waiting" :
                      ''}`}>
                    {item[0].nodeStatus == 'submit' ?
                      <div className='process_icon'>
                        <Icon icon="apply-for" className="icon" />
                      </div>
                      :
                      item[0].nodeType == 2 ?
                        <div className='process_icon' style={{
                          fontSize: '28px',
                          left: '8px'
                        }}>
                          <Icon icon="approval-plus" className="icon" />
                        </div>
                        :
                        <div className='process_icon'>
                          <Icon icon="examineicon" className="icon" />
                        </div>
                    }
                    <div className='process_list'>
                      {item[0].nodeName}
                    </div>
                    <div >
                      {item[0].nodeType == 2 &&
                        <span style={{ color: '#00000040' }}>
                          由 {item[0].nodeAddUser.userName} 加签
                        </span>
                      }
                      {
                        item.length > 1 && item[0].nodeType == 1 && <span title='会签' style={{ cursor: 'pointer', color: 'rgba(0, 0, 0, 0.45)', }}>
                          会签 <span> </span>
                          <Icon icon="head-meeting" className="icon" />
                        </span>
                      }
                    </div>

                  </div>
                  {item.map((data, index) => {
                    return <div className='process' key={index}>
                      {handledBy(data)}
                      <div className={`titlecontent_line ${(data.nodeStatus == 'doing' || data.nodeStatus == 'waiting') ? 'before_doing' : ''}`}></div>
                    </div>
                  })}
                </div>
              </>
            })
          }
        </div>
        <div className='titlecontent' style={{ paddingLeft: '16px' }}>
          <div className={`flow_path`}>
            <div>
              <span className={`${flowDetail.flowProcess.processStatus == 'doing' ? 'outlined_doing' : 'outlined'}`}>
              </span>
              <span className='flow_path_text'>
                流程结束
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default FlowInformation