cldV2react/src/pages/Customer/Contact/components/ContactDetail/AddRecord.jsx

import React, { useRef, useState } from 'react'
import { Form, Button, Input, Radio, DatePicker, Switch } from 'antd'
import { dayjsFormat } from '@/utils/utils'
import { ModalForm } from '@ant-design/pro-form'
import { Plus } from '@icon-park/react'

const AddRecord = props => {
  const formRef = useRef(null)
  const { TextArea } = Input
  const { onConfirm } = props
  const [showExtraItem, setShowExtraItem] = useState(false)
  const onChange = value => {
    setShowExtraItem(value)
  }
  return (
    <ModalForm
      layout="vertical"
      title="添加服务记录"
      formRef={formRef}
      trigger={
        <Button type="primary" ghost size="small" className="mr-1">
          <Plus /> 添加服务记录
        </Button>
      }
      onFinish={async values => {
        try {
          const newVal = { ...values }
          formRef.current?.resetFields()
          if (values.date) {
            newVal.date = dayjsFormat(values.date, 'YYYY-MM-DD')
          }
          await onConfirm(newVal)
          return true
        } catch (error) {
          return false
        }
      }}>
      <Form.Item name="status" rules={[{ required: true, message: '请选择类型' }]}>
        <Radio.Group>
          <Radio value={1}>上门服务</Radio>
          <Radio value={2}>电话拜访</Radio>
          <Radio value={3}>其他事项</Radio>
          <Radio value={4}>在线服务</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item name="date" label="时间">
        <DatePicker style={{ width: '100%' }} />
      </Form.Item>
      <Form.Item name="mark" label="内容">
        <TextArea rows={3} />
      </Form.Item>
      <div className="zh-pd-bottom-20">
        <Switch onChange={onChange} />
        <span className="zh-mg-left-3">添加提醒</span>
      </div>
      {showExtraItem ? (
        <>
          <Form.Item name="deadline" label="提醒限期">
            <DatePicker style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="remark" label="备注">
            <TextArea rows={2} />
          </Form.Item>
        </>
      ) : null}
    </ModalForm>
  )
}

export default AddRecord