import React, { useState, useRef } from 'react'
import { Form, Row, Col, Button } from 'antd'
import LazyCascader from '@/components/LazyCascader'
import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-form'
import { Plus } from '@icon-park/react'
import ModalDrag from '@/components/DragmModal'
import { ChangeCompMap } from '@/pages/Customer/Company/components/ChangeCompany'

const AddClient = props => {
  const { onConfirm, buttonProps, dataId, dataType, btnTitle = '联系人' } = props
  const formRef = useRef(null)
  const layout = {
    layout: 'horizontal',
    labelCol: { flex: '100px' }
  }
  const [showDataItem, setShowDataItem] = useState(false)
  return (
    <ModalForm
      {...layout}
      formRef={formRef}
      title={<ModalDrag title={'添加联系人'} />}
      trigger={
        <Button type="primary" {...buttonProps} className="mr-1">
          <Plus className="mr-1" />
          {btnTitle}
        </Button>
      }
      submitter={{
        render: ({ submit }, defaultDoms) => [
          ...defaultDoms,
          dataId ? (
            <Button
              type="primary"
              key="2"
              onClick={() => {
                setShowDataItem(true)
                const values = {}
                if (dataType === ChangeCompMap.BUSINESS.key) {
                  values.businessId = dataId
                }
                formRef.current && formRef.current.setFieldsValue(values)
                submit()
              }}>
              添加并关联
            </Button>
          ) : null
        ]
      }}
      onFinish={async values => {
        await onConfirm(values)
        formRef.current?.resetFields()
        return true
      }}>
      {showDataItem ? <ProFormText name={`${dataType}Id`} hidden /> : null}
      <ProFormText
        name="clientName"
        label="姓名"
        rules={[{ required: true, message: '请输入姓名' }]}
      />
      <Form.Item
        label="联系人地区"
        name="district"
        rules={[{ required: true, message: '请选择地区' }]}>
        <LazyCascader showFooter={true} />
      </Form.Item>
      <Row>
        <Col span={12}>
          <ProFormSelect
            name="gender"
            label="性别"
            rules={[{ message: '请选择性别' }]}
            options={[
              { label: '男', value: '男' },
              { label: '女', value: '女' }
            ]}
          />
          <ProFormText label="部门" name="department" />
          <ProFormText
            label="手机"
            name="telephone"
            rules={[{ required: true, message: '请输入手机号码' }]}
          />
          <ProFormText label="电话" name="phone" rules={[{ message: '请输入电话/座机号' }]} />
          <ProFormText label="联系人地址" name="address" />
          <ProFormText label="联系人地标" name="landmarks" />
        </Col>
        <Col span={12}>
          <ProFormText label="昵称" name="niceName" />
          <ProFormText label="职位" name="position" />
          <ProFormText label="QQ" name="qq" />
          <ProFormText label="邮箱" name="email" />
          <ProFormText label="联系人乘车" name="ride" />
          <ProFormText label="联系人住宿" name="stay" />
        </Col>
      </Row>
      <ProFormText label="备注" name="remakrs" />
    </ModalForm>
  )
}

export default AddClient