import { CheckOutlined, CloseOutlined } from "@ant-design/icons"
import React from "react"
import { Icon } from "../../../../../components/icons"
import { isMobile } from "../../../../../utils/helper"
import { FlowDetail } from "../../type"

const Mobile: boolean = isMobile()
const currentaudit = (value: string, title = '', titletype = false) => {
  if (title !== 'doneItem' || titletype) {
    switch (value) {
      case "doing":
        // 待审批
        return <span className={`process_content_icon ${!Mobile ? 'process_content_' + value : ""}`}>
          {Mobile ? <Icon icon={"under-approval"} className="icon" /> : '待审批'}
        </span>
      case "refuse":
        // 已拒绝
        return <span className={`process_content_icon ${!Mobile ? 'process_content_' + value : ""}`}>
          {Mobile ? <Icon icon={"refuse"} className="icon" /> : '已拒绝'}
        </span>
      case "pass":
        // 已通过
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          {Mobile ? <Icon icon={"passed"} className="icon" /> : '已通过'}
        </span>
      case "revert":
        // 已撤回
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          {Mobile ? <Icon icon={"withdrawn"} className="icon" /> : '已撤回'}
        </span>
      case "return":
        // 已退回
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          {Mobile ? <Icon icon={"returnicon"} className="icon" /> : '已退回'}
        </span>
      default:
        // 未定义
        return <span >
          {'未定义'}
        </span>
    }
  } else {
    switch (value) {
      case "refuse":
        // 已拒绝
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          <Icon icon={"rejected-icon"} className="icon" />
        </span>
      case "pass":
        // 已通过
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          <Icon icon={"passed-icon"} className="icon" />
        </span>
      case "revert":
        // 已撤回
        return <span className={`process_content_icon ${'process_content_' + value}`}>
          <Icon icon={"refuse-icon"} className="icon" />
        </span>
      // case "":
      //   // 失效
      //   return <span className={`process_content_icon ${'process_content_' + value}`}>
      //     <Icon icon={"cancel-icon"} className="icon" />
      //   </span>
      default:
        // 未定义
        return <span >
        </span>
    }
  }
}
// 判断按钮颜色
const handleBotton = (data: string) => {
  switch (data) {
    case "flow_agree":
      return <CheckOutlined />
    case "flow_refuse":
      return <CloseOutlined />
    case "flow_revert":
      return <Icon icon='undo' className="icon" style={{ marginRight: '10px' }} />
    default:
      return
  }
}
// 抽屉头部
const handleTltle = (flowDetail: FlowDetail) => {
  return <>
    <div className={`detailed_title ${!Mobile ? "detailed_border detailed_Mobile" : ""}`}>
      {/* 左 */}
      <div className='detailed_title_left'>
        {/* 头像 */}
        <div className='detailed_title_img_text'>
          <span className='detailed_title_img'>
            <Icon icon='camera' className="icon"></Icon>
          </span>
          {/* 标题 */}
          <span className='detailed_title_text'>
            {flowDetail && flowDetail.flowProcess.processDefinitionName}
          </span>
        </div>
        {/* icon */}
        {flowDetail && currentaudit(flowDetail.flowProcess.processStatus)}
      </div>
      {/* 右 */}
      <div className='detailed_title_right'>
      </div>
    </div>
    <div className='characteristic'>
      审批编号:{flowDetail?.processInstanceId}
    </div>
  </>
}

const handleRevert = () => {
  return <div className='revert_value' style={{ display: 'flex', }}>
    <div className='revert_icon' style={{ fontSize: '42px', marginRight: '24px' }}>
      <Icon icon='alert-warning' className='icon' style={{ top: 0 }}></Icon>
    </div>
    <div className='revert_text' >
      <div style={{ fontSize: '16px' }}>确认撤回当前表单</div>
      {/* <div>撤回当前表单可在当前页重新提交表单</div> */}
    </div>
  </div>
}

//按钮弹窗样式
const handleContainers = (textValue: string) => {

  switch (textValue) {
    case 'flow_revert':
      return handleRevert();
    default:
      return <></>;
  }
}


export { currentaudit, handleBotton, handleTltle, handleRevert, handleContainers }