import React from 'react'
import './index.scss'
import { RendererEnv } from '../../../env'
import { Icon } from '../../icons'
import { isMobile } from '../../../utils/helper'
import { CloudDownloadOutlined } from '@ant-design/icons'
import { byteSize, downloadFile } from '../../../renderers/Lion/utils/utils'
import { attachments, FlieText, FlowDetail, processNodeList } from '../../MobileProcess/type'
import ImageComponent, { ImageThumbProps } from '../../../renderers/Image'
import { SchemaNode } from '../../../types'
import { Badge } from 'antd'
import FlowTableRow from './FlowTableRow'
import FlowResultBody from './FlowResultBody'
type Badgeicon = "success" | "processing" | "error" | "default" | "warning";

interface FlowViewProps {
  processNode: processNodeList[],
  flowDetail: FlowDetail
  env?: RendererEnv
  render: (region: string, node: SchemaNode, props?: any) => JSX.Element
  onImageEnlarge?: (
    info: Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'> & {
      index?: number;
      list?: Array<
        Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'>
      >;
    }
  ) => void;
  language: (data: string) => string
}

// 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";//退回
// String OPERATION_STATUS_PASS ="referral";//已转办
// nodeType表示加签|| 会签 ||或签 || 2 || 1 || 0

const statusObj = { submit: '提交申请', waiting: '待签核', doing: '签核中', revert: '撤销', refuse: '拒绝', pass: '通过', return: '退回' }

const nodeTypeObj = { 0: '或签', 1: '会签', 2: '加签', 3: '系统签核' }

const FlowInformation: React.FC<FlowViewProps> = (props) => {
  const { processNode, flowDetail, env, render, onImageEnlarge, language } = 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', 'approver_opinion10', 'approver_opinion11', 'approver_opinion12']
  const opinion = [
    // '通过',
    language('Flow.adopt'),
    // '待审核',
    language('Flow.pending.review'),
    // '撤销',
    language('Flow.revoke'),
    // '可签核',
    language('Flow.signable'),
    // '拒绝',
    language('Flow.refuse'),
    // '审核中',
    language('Flow.under.review'),
    // '提交申请',
    language('Flow.submit.application'),
    // '退回',
    language('Flow.returne'),
    // '已转办',
    language('Flow.transferred'),
    // '无需处理',
    language('Flow.no.processing.required'),
    // '自动退回',
    language('Flow.automatic.rollback'),
    // '未定义'
    language('Flow.undefined'),
  ]

  const filetext = (fileName: string) => {
    if (/(.pdf)/i.test(fileName)) {
      return <Icon icon={'file-pdf'} className="icon"></Icon>
    } else if (/(.ppd)/i.test(fileName)) {
      return <Icon icon={'file-ppd'} className="icon"></Icon>
    } else if (/(.jpe?)g|(.png)|(.svg)|(.gif)/i.test(fileName)) {
      return <Icon icon={'file-img'} className="icon"></Icon>
    } else if (/(.xlsx)|(.xls)/i.test(fileName)) {
      return <Icon icon={'file-xls'} className="icon"></Icon>
    } else if (/(.docx)|(.doc)/i.test(fileName)) {
      return <Icon icon={'file-doc'} className="icon"></Icon>
    } else {
      return <Icon icon={'file-file'} className="icon"></Icon>
    }
  }
  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, constants: string[]) => {
    const options: any = {
      pass: constants[0],                // 审核通过
      waiting: constants[1],             // 等待中
      revert: constants[2],              // 撤销
      ondo: constants[3],                // 进行中
      refuse: constants[4],              // 拒绝
      doing: constants[5],               // 正在处理
      submit: constants[6],              // 提交
      return: constants[7],              // 退回
      referral: constants[8],            // 转交
      nothandled: constants[9],          // 未处理
      auto_return: constants[10],        // 自动退回
    };

    return options[val] || constants[11];
  };

  const decision = (val: string) => {
    const classNames: any = {
      submit: 'submit',                  // 提交
      pass: 'pass',                      // 通过
      waiting: 'waiting',                // 等待
      revert: 'revert',                  // 撤销
      ondo: 'ondo',                      // 进行中
      refuse: 'refuse',                  // 拒绝
      doing: 'doing',                    // 处理中
    };
    const className = classNames[val] || '';
    return <div className={`decision_icon ${className}`}></div>;
  };

  // 文件分组
  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 handleStatus = (body: string, dot?: boolean) => {
    let value = '';
    let icon: Badgeicon = 'default';
    switch (body) {
      case 'doing':
        value = statusObj[body];
        icon = 'processing';
        break;
      case 'submit':
        value = statusObj[body];
        icon = 'success';
        break;
      case 'pass':
        value = statusObj[body];
        icon = 'success';
        break;
      case 'return':
      case 'refuse':
        value = statusObj[body];
        icon = 'error';
        break;
      case 'revert':
        value = statusObj[body];
        icon = 'warning';
        break;
      case 'waiting':
        value = statusObj[body];
        icon = 'default';
        break;
      case 'ondo':
        value = '';
        icon = 'processing';
        break;
      default:
        value = '';
        icon = 'default';
        break;
    }
    if (dot) {
      value = ''
    }
    return <Badge status={icon} text={value} dot={dot} />;
  }

  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' key={index}>
                <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={language('Image.zoomIn')}
                        data-position="bottom"
                        target="_blank"
                        rel="noopener"
                        onClick={() => previewImage(item, dataImg)}
                      >
                        <Icon icon="view" className="icon" />
                      </a>
                      <a
                        data-tooltip={language('download')}
                        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, index) => {
            return (
              <div className='textfile_xls' key={index}>
                {/* 左边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={language('download')} 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.assignComment && <>
            <p className='approver_content'>
              <p style={{ color: '#1890ff', marginBottom: 4 }}> 加签意见：</p>
              {val.assignComment}
            </p>
          </>}
          {val.attachments && handledownload(val)}
        </div>
      </div>
    </div>
  }

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

  const handleResultBody = (result: processNodeList[][]) => {
    return result.map((item: processNodeList[], Inx) => {
      item.sort((a, b) => {
        const dateA = a.nodeEndTime ? new Date(a.nodeEndTime) : new Date('9999-12-31');
        const dateB = b.nodeEndTime ? new Date(b.nodeEndTime) : new Date('9999-12-31');
        return dateA.getTime() - dateB.getTime();
      });

      const processTitleClassName = before(item, 'doing') ? 'process_doing' : before(item, 'waiting') ? 'process_waiting' : '';
      const [firstNode] = item;
      return (
        <div key={Inx} className="process_group">
          <div className={`process_title ${processTitleClassName}`}>
            {firstNode.nodeStatus === 'submit' ? (
              <div className="process_icon">
                <Icon icon="apply-for" className="icon" />
              </div>
            ) : firstNode.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">{firstNode.nodeName}</div>
            <div>
              {firstNode.nodeType === 2 && (
                <span style={{ color: '#00000040' }}>
                  {language('Flow.add.signature')}
                </span>
              )}
              {item.length > 1 && firstNode.nodeType === 1 && (
                <span title={language('Flow.countersign')} style={{ cursor: 'pointer', color: 'rgba(0, 0, 0, 0.45)' }}>
                  {language('Flow.countersign')}
                  <span> </span>
                  <Icon icon="head-meeting" className="icon" />
                </span>
              )}
              {firstNode.nodeType === 3 && (
                <span style={{ color: '#00000040' }}>
                  系统签核
                </span>
              )}
            </div>
          </div>
          <FlowResultBody node={item} handledBy={handledBy} />
        </div>
      );
    });
  };

  return Mobile ? (
    <div className='technological'>
      <div className='title'>
        {/* 内容 */}
        <div className='titlecontent'>
          <h3 className='name_const'>{language('Flow.approval.details')}</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'>
                {language('Flow.process.start')}
              </span>
            </div>
            <div className='titlecontent_line' style={{ height: 'calc(100% + 38px)' }}></div>
          </div>
          {/* 处理人 */}
          {
            result && handleResultBody(result)
          }
        </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'>
                {language('Flow.end.of.process')}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  ) : (
    <div className='technological-table-wrapper'>
      <table id='flow-technological' className='technological-table' cellSpacing={0} >
        <colgroup>
          <col width={55} ></col>
          <col width={170}></col>
          <col width={100}></col>
          <col width={200}></col>
          <col width={200}></col>
          <col width={200}></col>
          <col ></col>
          {processNode.some(itme => itme.assignComment) && <col ></col>}
          <col ></col>
        </colgroup>
        <thead>
          <tr >
            <td style={{ textAlign: 'center' }}>序号</td>
            <td>审批节点</td>
            <td>签核类型</td>
            <td>审批人</td>
            <td>审批结果</td>
            <td>审批时间</td>
            <td>审批意见</td>
            {processNode.some(itme => itme.assignComment) && <td>加签意见</td>}
            <td>附件</td>
          </tr>
        </thead>
        <tbody >
          {result.map((node, index) =>
            <FlowTableRow key={index} node={node} nodeTypeObj={nodeTypeObj} env={env} handleStatus={handleStatus} processNode={processNode} render={render} />
          )}
        </tbody>
      </table>
    </div>

  )
}

export default FlowInformation