import React, { useState, } from 'react'
import { Checkbox, message } from 'antd';
import { RendererEnv } from '../../../../../env';
import { Api, SchemaNode } from '../../../../../types';
import { isMobile } from '../../../../../utils/helper';
import { FlowDetailList, FlowingJson, FlowDetail, AttachmentApi } from '../../type';
import { ImageThumbProps } from '../../../../Image';
import { debounce } from 'lodash';
import { currentaudit, handleRevert } from '../utils/utils';
import FlowCountersign from '../FlowCountersign';
import FlowModalReturn from '../FlowModalReturn';
import ModalFlow from '../../../Workflow';
import './index.scss'

interface Flowfields {
  // 点击当前数据
  currentProcess: FlowDetailList
  env: RendererEnv
  val: FlowingJson
  render: (region: string, node: SchemaNode, props?: any) => JSX.Element
  // 获取数据
  onChange: () => Promise<void>
  // 标题
  title: string
  // 刷新
  refresh: () => void
  // 选项开关
  isPick: boolean
  // 往上传传递选中的数据
  handleBatch: (val: string, checked: boolean) => void
  // 选中数据
  batch: string[]
  handleDetail: (value: boolean) => void
  handleOnChange: () => Promise<void>
  onImageEnlarge?: (
    info: Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'> & {
      index?: number;
      list?: Array<
        Pick<ImageThumbProps, 'src' | 'originalSrc' | 'title' | 'caption'>
      >;
    }
  ) => void;
  returnNodeApi?: Api
  attachmentApi: AttachmentApi
}

const FlowFields: React.FC<Flowfields> = (props) => {
  const {
    env,
    currentProcess,
    val,
    render,
    onChange,
    title,
    isPick,
    handleBatch,
    batch,
    handleDetail,
    handleOnChange,
    onImageEnlarge,
    returnNodeApi,
    attachmentApi
  } = props
  // pa端弹窗 移动端
  const [open, setOpen] = useState(false);
  // 个人请求数据
  const [flowDetail, setFlowDetail] = useState<FlowDetail>()
  const ChildRef: any = React.createRef();
  const api: Api = val.detailApi
  const Mobile: boolean = isMobile()

  // 获取个人请求信息
  const handleOk = async () => {
    handleDetail(true)
    const res = await env.fetcher(api, currentProcess)
    if (res.status === 0) {
      setFlowDetail(res.data)
      setOpen(true)
      handleDetail(false)
    } else {
      message.error(res.msg)
      handleDetail(false)
    }
  }

  const handleRadio = debounce(async (api: Api, value: string) => {
    let data: any = {
      ...currentProcess
    }

    if (value == 'flow_assign') {
      const content = await ChildRef.current?.handleOk?.()
      if (content?.assignFlag == undefined || content?.afterUserIds?.length == 0 || content == undefined) return
      data = {
        ...data,
        ...content,
      }
    } else {
      const content = await ChildRef.current?.handleOk?.()
      data = {
        ...data,
        ...content,
      }
    }

    if (data != null) {
      const res = await env.fetcher(api, data).finally()
      if (res.status === 0) {
        setOpen(false)
        onChange && onChange()
        handleOnChange && handleOnChange()
      } else {
        message.error(res.msg)
      }
    }
  }, 600)

  const handleContainer = (data: string, api: Api): JSX.Element => {
    switch (data) {
      case 'flow_assign': case 'flow_referral':
        // 加签
        return <FlowCountersign
          name={data}
          env={env}
          render={render}
          handleOnClick={() => { api && handleRadio(api, data) }}
          onRef={ChildRef}
          attachmentApi={attachmentApi}
        />;
      // 退回  确定  拒绝
      case 'flow_return': case 'flow_agree': case 'flow_refuse':
        return (flowDetail && currentProcess.taskId) ?
          <FlowModalReturn
            name={data}
            env={env}
            flowDetail={flowDetail}
            render={render}
            onRef={ChildRef}
            taskId={currentProcess.taskId}
            onImageEnlarge={onImageEnlarge}
            returnNodeApi={returnNodeApi}
            handleOnClick={() => {
              api && handleRadio(api, data)
            }}
            attachmentApi={attachmentApi}
          /> : <></>
      // 撤回
      case 'flow_revert':
        return handleRevert();
      default:
        return <></>;
    }
  }

  return (
    <>
      <div className={`process_tabs ${!Mobile ? 'process_pc' : ''}`}>
        {isPick && <Checkbox className='checkbox'
          onChange={(e) => handleBatch(e.target.value, e.target.checked)}
          checked={batch?.some(Item => Item == currentProcess.processInstanceId)}
          value={currentProcess.processInstanceId}
        />}
        <div className='process_content' onClick={() => { handleOk() }}>
          <div className='process_content_introduce'>
            <div className='process_content_title'>
              <span className='process_content_name'>
                {currentProcess.taskName || currentProcess.processDefinitionName}
              </span>
              {title !== 'doneItem' && (currentProcess?.taskStatus ?
                currentaudit(currentProcess?.taskStatus, title) :
                currentProcess?.processStatus &&
                currentaudit(currentProcess?.processStatus, title))
              }
            </div>
            {
              // 显示时间
              <div className='taskEndTime'>
                {
                  (currentProcess.duration && currentProcess.duration)
                  || (currentProcess.taskEndTime && currentProcess.taskEndTime)
                }
              </div>
            }
          </div>
          <div className='process_content_report_forms'>
            {
              currentProcess.workCondition && currentProcess.workCondition.map((Item: any) =>
                <div className='text'>
                  <label className='text_title'>{Item.label}</label>：<span className='textvalue'>{Item.value}</span>
                </div>
              )
            }
            <div className='process_content_report_forms_icon'>
              {title == 'doneItem' && (currentProcess?.taskStatus ?
                currentaudit(currentProcess?.taskStatus, title) :
                currentProcess?.processStatus &&
                currentaudit(currentProcess?.processStatus, title))
              }
            </div>
          </div>
        </div>
      </div >

      {
        <ModalFlow
          visible={open}
          onClose={(reload) => { setOpen(reload) }}
          env={env}
          render={render}
          onImageEnlarge={onImageEnlarge}
          flowDetail={flowDetail}
          handleContainer={handleContainer}
          handleRadio={handleRadio}
        />
      }
    </>
  )
}

export default FlowFields