cldV2react/src/pages/Product/Cloud/components/Detail/UpgradeModal.jsx

import React, { useEffect, useState } from 'react'
import { Modal, Form, Switch, DatePicker } from 'antd'
// import dayjs from 'dayjs'
import { dayjsFormat } from '@/utils/utils'
import { useDispatch } from 'umi'
import dayjs from 'dayjs'

export const upgradeTypeEnum = {
  UPGRADE: 1, // 升级
  DEMOTION: 2, // 降级
  DEADLINE: 3 // 限期
}
export const lockTypeEnum = {
  LEND: 1, // 借出
  SALE: 2, // 销售
  GIVE: 3, // 赠送
  DEADLINE: 0 // 限期
}

export const titleType = {
  LEND: 1, // 借出
  SALE: 2, // 销售
  GIVE: 3, // 赠送
  DEMOTION: 4, // 降级
  DEADLINE: 5 // 限期
}

export const modalTitleEnum = {
  1: '借出',
  2: '销售',
  3: '赠送',
  4: '降级',
  5: '限期'
}

const UpgradeModal = props => {
  const {
    visible,
    onCancel,
    loading,
    onConfirm,
    type,
    projectType,
    ssoId,
    compilationId,
    compilationName,
    compilationListName,
    lock,
    upgradeType,
    cloudUser,
    deadline,
    actionPayload
  } = props
  const [form] = Form.useForm()
  const dispatch = useDispatch()
  const [showDeadline, setShowDeadline] = useState(false)
  const layout = {
    layout: 'vertical'
  }
  useEffect(() => {
    if (upgradeType === upgradeTypeEnum.DEADLINE) {
      form?.setFieldsValue({ deadline: dayjs(deadline) })
      setShowDeadline(true)
    }
  }, [upgradeType])

  const onChange = value => {
    setShowDeadline(value)
  }
  const disabledDate = current => {
    return current && current < dayjs().endOf('day')
  }
  const handleonOk = () => {
    form.validateFields().then(values => {
      const newVal = { ...values }
      if (values.deadline) {
        newVal.deadline = dayjsFormat(values.deadline, 'YYYY-MM-DD')
      }
      onConfirm({
        ...newVal,
        projectType,
        ssoId,
        compilationId,
        compilationName,
        compilationListName,
        lock,
        upgradeType
      })
      form.resetFields()
      dispatch({
        type: 'refresh/commitAction',
        payload: actionPayload
      })
    })
  }
  return (
    <Modal
      getContainer={() => document.getElementById('root')}
      width={800}
      title={`确认${modalTitleEnum[type]}`}
      visible={visible}
      okButtonProps={{ loading }}
      onCancel={() => {
        setShowDeadline(false)
        onCancel()
        form?.resetFields()
      }}
      onOk={handleonOk}>
      {type === lockTypeEnum.GIVE || type === lockTypeEnum.LEND || type === lockTypeEnum.SALE ? (
        <div className="mb-6">
          <p className="pb-3">
            为用户<b>{cloudUser.mobile}</b>，<b>{cloudUser.username}</b> {modalTitleEnum[type]}{' '}
            <b>{compilationName}</b>
          </p>
          <div className="pb-5">
            <Switch onChange={onChange} checked={showDeadline} />
            <span className="ml-2">限期</span>
          </div>
        </div>
      ) : null}

      {type === titleType.DEMOTION ? (
        <div className="mb-6">
          为用户<b>{cloudUser.mobile}</b>，<b>{cloudUser.username}</b> 降级 <b>{cloudUser.name}</b>{' '}
          <b>{compilationListName}</b>
        </div>
      ) : null}
      {type === titleType.DEADLINE ? (
        <div className="mb-6">
          为用户<b>{cloudUser.mobile}</b>，<b>{cloudUser.username}</b> <b>{cloudUser.name}</b>{' '}
          <b>{compilationListName}</b> 设置延期
          <div className="pt-5 pb-5">
            当前限期为 <b>{deadline}</b>
          </div>
        </div>
      ) : null}

      {type !== titleType.DEMOTION ? (
        <Form {...layout} form={form}>
          <Form.Item name="deadline" label="到期时间">
            <DatePicker style={{ width: '100%' }} disabled={!showDeadline} disabledDate={disabledDate} />
          </Form.Item>
        </Form>
      ) : null}
    </Modal>
  )
}

export default UpgradeModal