import AuditContent from '@/components/AuditContent'
import { ZhAuditBackButton, ZhCloseButton, ZhSubmitButton, ZhUploadButton } from '@/components/Button'
import DatePicker from '@/components/DatePicker'
import Header from '@/components/Header'
import Slot from '@/components/Header/slot'
import OssUploadModal from '@/components/OssUpload'
import SvgIcon from '@/components/SvgIcon'
import { userStore } from '@/store/mobx'
import { iDetailState } from '@/types/auditDetail'
import { iFile } from '@/types/file'
import { iAuditor } from '@/types/safe'
import { iUserInfo } from '@/types/setting'
import { apiDelFile, apiGetFileList, apiSaveFileInfo } from '@/utils/common/api'
import { auditProgress } from '@/utils/common/constStatus'
import consts from '@/utils/consts'
import { dayjsFormat } from '@/utils/util'
import { Button, Input, message, Pagination, Tooltip } from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'
import dayjs from 'dayjs'
import React, { useEffect, useState, useMemo } from 'react'
import { RouteComponentProps } from 'react-router'
import { apiGetSafeDetail, apiResfulSafeAudit } from './api'
import AuditModal from './components/Modal'
import styles from './index.module.scss'
const { TextArea } = Input
interface iModalObj {
  ossModal: boolean
  auditModal: boolean
  auditType: string
  curPage: number
}
const Detail: React.FC<RouteComponentProps> = props => {
  const { saveId = '' } = props.location.state as any
  const [ visible, setVisible ] = useState<iModalObj>({
    ossModal: false,
    auditModal: false,
    auditType: '',
    curPage: 1
  })
  const [ detail, setDetail ] = useState<iDetailState>({
    auditName: '',
    uid: '',
    auditors: [],
    bidsectionId: '',
    code: '',
    createTime: new Date().toDateString(),
    demand: '',
    file: { fileList: [], total: 0 },
    id: '',
    inspection: '',
    inspectionDetail: '',
    position: '',
    status: 0,
    checkOrder: { // 整改单
      name: '',
      status: 0,
      opinion: '',
      create_time: new Date().toDateString()
    },
    auditHistory: [],
    rectifiedInfo: [],
    latestAuditor: {
      audit_id: '',
      audit_order: 0,
      bidsection_id: '',
      data_id: '',
      data_type: 0,
      id: '',
      progress: '',
      project_id: '',
      status: 0
    },
    times: 0
  })
  const isEdited = useMemo(() => {
    return !!detail.status
  }, [ detail.status ])
  useEffect(() => {
    initData()
  }, [ saveId ])
  const initData = async () => {
    const { code = -1, data = {} } = await apiGetSafeDetail(saveId)
    if (code === consts.RET_CODE.SUCCESS) {
      setDetail({ ...detail, ...data })
    }
    if (!userStore.groupList.length) {
      userStore.getGroupList()
    }
  }
  const onCreate = async (fileList: iFile[]) => {
    const { code = -1 } = await apiSaveFileInfo(fileList, consts.DATA_TYPE.SAFE, detail.id)
    if (code === consts.RET_CODE.SUCCESS) {
      const newFiles = detail.file.fileList.concat(
        fileList.map(file => {
          return { ...file, accountName: userStore.userInfo.name }
        })
      )
      setDetail({ ...detail, file: { ...detail.file, total: newFiles.length } })
      await fileListChange(visible.curPage)
    }
  }
  const onOssModalShow = (show: boolean) => setVisible({ ...visible, ossModal: show })
  const fileListChange = async (pageNo: number = 1, pageSize: number = 10) => {
    const { code = -1, data, total } = await apiGetFileList(consts.DATA_TYPE.SAFE, detail.id, pageNo, pageSize)
    if (code === consts.RET_CODE.SUCCESS) {
      setVisible({ ...visible, curPage: pageNo, ossModal: false })
      setDetail({ ...detail, file: { ...detail.file, fileList: data, total } })
    }
  }

  const delFile = async (id: string, isLast: boolean) => {
    const { code = -1 } = await apiDelFile(id)
    if (code === consts.RET_CODE.SUCCESS) {
      console.log(visible.curPage - 1)
      await fileListChange(isLast ? visible.curPage - 1 : visible.curPage)
      isLast && (setVisible({ ...visible, curPage: visible.curPage - 1 }))
    }
  }

  const addAuditor = (type: string, user: iUserInfo) => {
    if (detail.auditors.find(item => item.progress === (type === 'check' ? '0' : '2') && item.audit_id === user.id)) {
      return message.error('该审批组下已存在该审批人，请勿重复添加!')
    }
    if (type === "check") {
      const newAuditors = detail.auditors
      const len = detail.auditors.filter((item: iAuditor) => item.progress === "0").length
      newAuditors.push({ id: '', mobile:'', audit_id: user.id, audit_order: len + 1,position: user.position, progress: "0", name: user.name,accountGroup: user.accountGroup, company: user.company, status: 0 })
      setDetail({ ...detail, auditors: newAuditors })
    } else {
      const newAuditors = detail.auditors
      const len = detail.auditors.filter((item: iAuditor) => item.progress === "2").length
      newAuditors.push({ id: '', audit_id: user.id, mobile:'', audit_order: len + 1,position: user.position, progress: "2",  name: user.name, accountGroup: user.accountGroup, company: user.company, status: 0 })
      setDetail({ ...detail, auditors: newAuditors })
    }
  }

  const delAuditor = (id: string, progress: string) => {
    const newAuditors = detail.auditors.filter(item => item.progress !== progress)
    const auditor = detail.auditors.find(item => item.progress === progress && item.audit_id !== id)

    if (auditor) {
      newAuditors.push(auditor)
    }
    setDetail({ ...detail, auditors: newAuditors })
  }

  const btnClick = (type: string) => {
    setVisible({ ...visible, auditType: type, auditModal: true })
  }
  const onModalConfirm = (values?: object) => {
    let payload: any = { safe_id: detail.id, bidsection_id: detail.bidsectionId, ...values }
    if (visible.auditType === 'start') {
      payload.auditors = detail.auditors.filter(item => item.progress === '0').map(item => item.audit_id)
      payload.reAuditors = detail.auditors.filter(item => item.progress === '2').map(item => item.audit_id)
      payload.times = detail.times
      if (!payload.auditors.length || !payload.reAuditors.length) {
        return message.error('审批人或复查人不能为空!')
      }
    }

    if (visible.auditType === 'delete') {
      payload = { id: detail.id }
    }

    if (visible.auditType === 'pass' || visible.auditType === 'back') {
      payload.id = detail.latestAuditor.id
      if (detail.latestAuditor.progress === '1') {
        if (!detail.checkOrder.opinion) {
          return message.error("请填写整改单!")
        } else {
          payload.rectifiedInfo = detail.checkOrder.opinion
        }
      }
    }

    if (visible.auditType === 'close') {
      payload.id = detail.latestAuditor.id
    }
    apiResful(visible.auditType, payload)
  }
  const apiResful = async (type: string, payload: any) => {
    const { code } = await apiResfulSafeAudit(type, payload)
    if (code === consts.RET_CODE.SUCCESS) {
      setVisible({ ...visible, auditModal: false })
      if (type === 'delete') {
        props.history.goBack()
      } else {
        initData()
      }
    }
  }
  const renderHeaderBtn = (status: number) => {

    if (!detail.latestAuditor.audit_id && userStore.userInfo.id !== detail.uid) return null
    if (detail.latestAuditor.audit_id && userStore.userInfo.id !== detail.latestAuditor.audit_id) return null
    if (!status) {
      return (
        <div className="pi-flex-row pi-align-center">
          <ZhCloseButton size="small" onClick={() => btnClick('delete')}>删除巡检</ZhCloseButton>
          <ZhSubmitButton size="small" className="pi-mg-left-5" onClick={() => btnClick('start')}>提交审批</ZhSubmitButton>
        </div>
      )
    } else if(status === auditProgress.checking || status === auditProgress.checkNo) {
      return (
        <div className="pi-flex-row pi-align-center">
          <Button type="primary" danger size="small" onClick={() => btnClick('close')}>关闭</Button>
          <ZhAuditBackButton size="small" className="pi-mg-left-5" onClick={() => btnClick('back')}>审批退回</ZhAuditBackButton>
          <ZhSubmitButton size="small" className="pi-mg-left-5" onClick={() => btnClick('pass')}>审批通过</ZhSubmitButton>
        </div>
      )
    } else if (status === auditProgress.checked) {
      return (
        <div className="pi-flex-row pi-align-center">
          <ZhAuditBackButton size="small" onClick={() => btnClick('back')}>审批退回</ZhAuditBackButton>
          <ZhSubmitButton size="small" className="pi-mg-left-5" onClick={() => btnClick('pass')}>整改完成</ZhSubmitButton>
        </div>
      )
    }
  }

  return (
    <div className="wrap-contaniner">
      <Header title="安全巡检">
        <Slot position="right">
          {renderHeaderBtn(detail.status)}
        </Slot>
      </Header>
      <div className={styles.detailContainer}>
        <div className={styles.content}>
          <h4 className={styles.header}>{detail.code}</h4>
          <table className="pi-table pi-bordered">
            <thead>
              <tr>
                <th colSpan={2} className="pi-text-center">
                  安全巡检单
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th style={{ width: '150px' }}>检查项目</th>
                <td>
                  {
                    isEdited ? <span>{detail.inspection}</span> : <TextArea value={detail.inspection} ></TextArea>
                  }
                </td>
              </tr>
              <tr>
                <th style={{ width: '150px' }}>现场检查情况</th>
                <td>
                  {
                    isEdited ? <span>{detail.inspectionDetail}</span> : <TextArea value={detail.inspectionDetail} ></TextArea>
                  }
                </td>
              </tr>
              <tr>
                <th style={{ width: '150px' }}>处理要求及措施</th>
                <td>
                  {
                    isEdited ? <span>{detail.demand}</span> : <TextArea value={detail.demand}></TextArea>
                  }
                </td>
              </tr>
              <tr>
                <th style={{ width: '150px' }}>检查日期</th>
                <td>
                  {
                    isEdited ? <span>{detail.createTime && dayjsFormat(detail.createTime, 'YYYY-MM-DD')}</span> :
                    <DatePicker
                    size="small"
                    locale={locale}
                    allowClear={false}
                    value={dayjs(detail.createTime)}
                    onChange={value => setDetail({ ...detail, createTime: value?.format() })}></DatePicker>
                  }

                </td>
              </tr>
              <tr>
                <th style={{ width: '150px' }}>质检员</th>
                <td>{detail.auditName}</td>
              </tr>
            </tbody>
          </table>
          {
            detail.status === auditProgress.checked && detail.latestAuditor.progress === '1'?
            <table className="pi-table pi-bordered">
            <thead>
              <tr>
                <th colSpan={2} className="pi-text-center">
                  整改单
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th style={{ width: '150px' }}>整改情况</th>
                <td>
                  <TextArea value={detail.checkOrder.opinion} onChange={(e) => setDetail({ ...detail, checkOrder: { ...detail.checkOrder, opinion: e.currentTarget.value } })}></TextArea>
                </td>
              </tr>
              <tr>
                <th style={{ width: '150px' }}>整改日期</th>
                <td>
                  <DatePicker
                    size="small"
                    locale={locale}
                    allowClear={false}
                    value={dayjs(detail.checkOrder.create_time)}
                    onChange={value => setDetail({ ...detail, checkOrder: { ...detail.checkOrder, create_time: value?.format() } })}></DatePicker>
                </td>
              </tr>
              <tr>
                <th style={{ width: '150px' }}>整改人</th>
                <td>{detail.auditors.find(item => item.progress === '1')?.name}</td>
              </tr>
            </tbody>
          </table>
          : detail.rectifiedInfo.map(item => (
            <table className="pi-table pi-bordered" key={item.create_time}>
            <thead>
              <tr>
                <th colSpan={2} className="pi-text-center">
                  整改单
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th style={{ width: '150px' }}>整改情况</th>
                <td>{item.opinion}</td>
              </tr>
              <tr>
                <th style={{ width: '150px' }}>整改日期</th>
                <td>{dayjsFormat(item.create_time, 'YYYY-MM-DD')}</td>
              </tr>
              <tr>
                <th style={{ width: '150px' }}>整改人</th>
                <td>{item.name}</td>
              </tr>
            </tbody>
          </table>
          ))

          }
          <table className="pi-table pi-bordered mt-3">
            <thead>
              <tr>
                <th></th>
                <th className="pi-text-center">附件</th>
                <th className="pi-text-center">上传者</th>
                <th className="pi-text-center" style={{ width: 200 }}>
                  上传时间
                </th>
                <th className="pi-text-center">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td colSpan={5}>
                  <ZhUploadButton size="small" icon={<SvgIcon type="xxh-cloud-upload" />} onClick={() => setVisible({ ...visible, ossModal: true })}>
                    上传附件
                  </ZhUploadButton>
                </td>
              </tr>

              {detail.file.fileList?.map((file, idx) => (
                <tr key={idx}>
                <td className="pi-width-70">{idx + 1}</td>
                <td style={{ width: 383, maxWidth: 383, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
                  <a href={consts.OSS_PATH.REVIEW + file.filepath} target="_blank" rel="noopener noreferrer">
                    {file.filename}
                  </a>
                </td>
                <td className="pi-text-center">{file.accountName}</td>
                <td className="pi-text-center">{dayjsFormat(file.createTime)}</td>
                <td className="pi-text-center pi-width-90">
                  <Tooltip title="移除">
                    <Button size="small" type="text" icon={<SvgIcon type="xxh-times-circle1" />} style={{ color: '#df3f45' }} onClick={() => delFile(file.id, !idx)}></Button>
                  </Tooltip>
                </td>
              </tr>
              ))}
              {detail.file.total > consts.PAGE_SIZE ? (
                <tr>
                  <td colSpan={5} className="pi-text-right">
                    <Pagination
                      current={visible.curPage}
                      size="small"
                      pageSize={consts.PAGE_SIZE}
                      hideOnSinglePage={true}
                      total={detail.file.total}
                      onChange={(page, pageSize) => fileListChange(page, pageSize)}></Pagination>
                  </td>
                </tr>
              ) : null}
            </tbody>
          </table>
          <AuditContent
            auditors={detail.auditors}
            onSelect={addAuditor}
            onDelete={delAuditor}
            latest={detail.latestAuditor}
            auditHistory={detail.auditHistory}
            status={detail.status}
            uName={detail.auditName}
            ></AuditContent>
        </div>
      </div>
      <OssUploadModal
        visible={visible.ossModal}
        onCancel={() => setVisible({ ...visible, ossModal: false })}
        onCreate={onCreate}
        onShow={onOssModalShow}>
      </OssUploadModal>
      <AuditModal
        type={visible.auditType}
        visible={visible.auditModal}
        onCancel={() => setVisible({ ...visible, auditModal: false })}
        onCreate={onModalConfirm}
        auditors={detail.auditors}
        curAuditor={detail.latestAuditor}
        ></AuditModal>
    </div>
  )
}

export default Detail