management/src/pages/Quality/Content/Info/Detail/components/Modal/index.tsx

import { GroupItem } from '@/components/AuditContent'
import Authorization from '@/components/Authorization'
import { ZhAuditBackButton, ZhButton, ZhCloseButton, ZhSubmitButton } from '@/components/Button'
import { userStore } from '@/store/mobx'
import { iAuditor, iLatestAuditorState } from '@/types/safe'
import { iAccountGroupItem, iUserInfo } from '@/types/setting'
import { getUserGroup } from '@/utils/common/user'
import { Button, Form, Input, message, Modal, Popover } from 'antd'
import React, { ChangeEvent, useEffect, useMemo, useState } from 'react'
interface iAuditModalProps {
  type: 'safe' | 'quality'
  onCancel: () => void
  modalObj: {
    visible: boolean
    type: string
    loading: boolean
  }
  auditors: iAuditor[]
  onCreate: (values?: any) => void
  curAuditor: iLatestAuditorState
}
interface iModalObjState {
  searchValue: string
  visible: boolean
  auditType: string
}

const textObj = {
  start: {
    title: '提交审批',
    okText: '确认提交'
  },
  delete: {
    title: '删除巡检',
    okText: '确认删除'
  },
  close: {
    title: '审批关闭',
    okText: '确认关闭'
  },
  back: {
    title: '审批退回',
    okText: '确认退回'
  },
  pass: {
    title: '审批通过',
    okText: '确认通过'
  }
}


const AuditModal: React.FC<iAuditModalProps> = props => {
  const [ form ] = Form.useForm()
  const { modalObj: { visible, type, loading }, onCancel, onCreate, auditors, curAuditor, type: auditType } = props


  const [ modal, setModal ] = useState<iModalObjState>({
    searchValue: '',
    visible: false,
    auditType: ''
  })
  // 是否是审批组的最后一个审核人
  const isLastAuditor = useMemo(() => {
    const len = auditors.filter(item => item.progress === '0').length
    if (len && auditors.filter(item => item.progress === '0')[len - 1].audit_id === userStore.userInfo.id) {
      return true
    }
    return false
  }, [ auditors ])
  const [ groups, setGroups ] = useState<Array<iAccountGroupItem>>([])
  const [ user, setUser ] = useState<iUserInfo>({
    account: '',
    accountGroup: 0,
    company: '',
    csrf: '',
    enable: 0,
    id: '',
    isAdmin: 0,
    mobile: '',
    name: '',
    password: '',
    position: '',
    projectId: '',
    role: '',
    telephone: ''
  })
  const comfirmBtnClick = () => {
    form.validateFields().then(values => {
      form.resetFields()
      if (user.id) {
        values.audit_id = user.id
      }

      if (type === 'pass' && isLastAuditor && curAuditor.progress === '0' && !user.id) {
        return message.error('请指定整改人!')
      }
      onCreate(values)
    })
  }

  useEffect(() => {
    if (visible && isLastAuditor && type === 'pass') {
      initGroupList()
    }
    if (visible && type === 'back') {
      if (curAuditor.progress === '1') {
        const len = auditors.filter(item => item.progress === '0').length
        const lastChecker = auditors.filter(item => item.progress === '0')[len - 1]
        setUser({ ...user, id: lastChecker.id, name: lastChecker.name })
      } else {
        const newGroup = initAuditBackGroup()
        setGroups(newGroup)
      }
    }
  }, [ visible ])
  const initGroupList = async (serach?: string) => {
    const data = await getUserGroup({ name: serach })
    setGroups(data)
  }

  // 初始化审批退回下拉选择框
  const initAuditBackGroup = () => {
    const newGroup: iAccountGroupItem[] = []
    for (let index = 0; index < 3; index++) {
      if (index === 0) {
        const newAuditors = auditors
          .filter(item => item.progress === '')
          .map(item => {
            return mapUser(item.name, '', item.position, item.company, item.mobile)
          })
        newGroup.push({ value: '检查人', children: newAuditors })
      }
      if (index === 1) {
        const newAuditors = auditors
          .filter(item => item.progress === '0')
          .map(item => {
            return mapUser(item.name, item.id, item.position, item.company, item.mobile)
          })
        newGroup.push({ value: '审批', children: newAuditors })
      }
      if (index === 2) {
        const newAuditors = auditors
          .filter(item => item.progress === '1')
          .map(item => {
            return mapUser(item.name, item.id, item.position, item.company, item.mobile)
          })
        newGroup.push({ value: '整改', children: newAuditors })
      }

    }
    function mapUser(name: string, id: string, position: string, company: string, mobile: string) {
      return {
        account: '',
        accountGroup: 0,
        company,
        csrf: '',
        enable: 0,
        id,
        isAdmin: 0,
        mobile,
        name,
        password: '',
        position,
        projectId: '',
        role: '',
        telephone: ''
      }
    }
    return newGroup
  }

  const renderOkBtn = (type: string) => {
    if (type === 'start' || type === 'pass') {
      return (
        <ZhSubmitButton size="small" onClick={comfirmBtnClick} loading={loading}>
          {textObj[type]?.okText}
        </ZhSubmitButton>
      )
    } else if (type === 'delete') {
      return (
        <Authorization type={auditType} auth="delete">
          <Button danger size="small" onClick={comfirmBtnClick} loading={loading}>
            {textObj[type]?.okText}
          </Button>
        </Authorization>
      )
    } else if (type === 'close') {
      return (
        <Button danger size="small" onClick={comfirmBtnClick} loading={loading}>
          {textObj[type]?.okText}
        </Button>
      )
    } else if (type === 'back') {
      return (
        <ZhAuditBackButton size="small" onClick={comfirmBtnClick} loading={loading}>
          {textObj[type]?.okText}
        </ZhAuditBackButton>
      )
    }
  }

  const search = (value: string) => {
    if (value != modal.searchValue) {
      setModal({ ...modal, searchValue: value })
      initGroupList(value)
    }
  }

  const change = (e: ChangeEvent) => {
    e.persist()
    const target = e.target as HTMLTextAreaElement
    if (!target.value) {
      initGroupList()
    }
  }

  const itemSelectHandler = (item: iUserInfo, type: string = '') => {
    setUser({ ...user, ...item })

    setModal({ ...modal, visible: false, auditType: type })
  }

  const handleVisibleChange = (visible: boolean) => {
    setModal({ ...modal, visible })
  }

  const showPopover = () => {
    setModal({ ...modal, visible: true })
  }

  return (
    <Modal
      visible={visible}
      title={textObj[type]?.title}
      onCancel={onCancel}
      getContainer={false}
      footer={
        <div className="pi-justify-end">
          <ZhCloseButton size="small" onClick={onCancel} className="pi-mg-right-5">
            关闭
          </ZhCloseButton>
          {renderOkBtn(type)}
        </div>
      }>
      <Form form={form} layout="vertical">
        {type === 'back' ? (
          <>
            <Form.Item name="opinion" label="审批意见">
              <Input.TextArea rows={5} />
            </Form.Item>
            {curAuditor.progress !== '1' ? (
              <Popover
                content={groups.map(item => (
                  <GroupItem {...item} key={item.value} onSelect={(item: iUserInfo, type?: string) => itemSelectHandler(item, type)} />
                ))}
                overlayClassName="popover-card"
                trigger="click"
                visible={modal.visible}
                onVisibleChange={visible => handleVisibleChange(visible)}
                placement="bottomLeft">
                <ZhButton size="small" onClick={showPopover}>
                  选择退回流程
                </ZhButton>
              </Popover>
            ) : null}

            {user.name ? (
              <div className="pi-bordered pi-warning">
                <span>已选择退回流程: </span>
                <span>{user.name}</span>
              </div>
            ) : null}
          </>
        ) : null}
        {type === 'delete' ? (
          <>
            <p className="mb-2">删除后，数据无法恢复，请谨慎操作。</p>
            <p className="mb-2">
              请在下方文本框输入文本「<span className="pi-red">确认删除本次巡检</span>」，以此确认删除操作。
            </p>
            <Form.Item
              name="warningText"
              rules={[
                () => ({
                  validator(rule, value) {
                    if (!value || value !== '确认删除本次巡检') {
                      return Promise.reject('请按照提示信息进行删除操作!')
                    }
                    return Promise.resolve()
                  }
                })
              ]}>
              <Input placeholder="输入文本, 确认删除" />
            </Form.Item>
          </>
        ) : null}
        {type === 'start' ? <p>请确认审批流程及信息无误。</p> : null}
        {type === 'close' ? (
          <>
            <Form.Item name="opinion" label="审批意见">
              <Input.TextArea rows={5} />
            </Form.Item>
            <p className="pi-warning">审批关闭，将直接停止该巡检流程。</p>
          </>
        ) : null}
        {type === 'pass' ? (
          <>
            <Form.Item name="opinion" label="审批意见">
              <Input.TextArea rows={5} />
            </Form.Item>
            {isLastAuditor && curAuditor.progress === '0' ? (
              <Popover
                title={<Input.Search size="small" placeholder="姓名/手机 检索" onSearch={search} onChange={e => change(e)} />}
                content={groups.map(item => (
                  <GroupItem {...item} key={item.value} onSelect={(item: iUserInfo, type?: string) => itemSelectHandler(item, type)} />
                ))}
                overlayClassName="popover-card"
                trigger="click"
                visible={modal.visible}
                onVisibleChange={visible => handleVisibleChange(visible)}
                placement="bottomLeft">
                <ZhButton size="small" onClick={showPopover}>
                  指派整改人
                </ZhButton>
              </Popover>
            ) : null}

            {user.id ? (
              <p className="pi-bordered pi-pd-8 pi-mg-top-5">
                <span>已指派整改人: </span>
                <span>
                  {user.name}-{user.position}-{user.company}
                </span>
              </p>
            ) : null}
          </>
        ) : null}
      </Form>
    </Modal>
  )
}

export default AuditModal