import React from 'react'
import { Form, Row, Col, Button } from 'antd'
import LazyCascader, { validCascaderRule } from '@/components/LazyCascader'
import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-form'
import { Plus } from '@icon-park/react'
import ModalDrag from '@/components/DragmModal'

const Addcontact = props => {
  const { onConfirm, buttonProps } = props
  const layout = {
    layout: 'horizontal',
    labelCol: { flex: '100px' }
  }

  return (
    <ModalForm
      {...layout}
      title={<ModalDrag title={'添加联系人'} />}
      trigger={
        <Button type="primary" {...buttonProps} className="mr-1">
          <Plus className="mr-1" />
          联系人
        </Button>
      }
      onFinish={async values => {
        await onConfirm(values)
        return true
      }}>
      <ProFormText
        name="clientName"
        label="姓名"
        rules={[{ required: true, message: '请输入姓名' }]}
      />
      <Form.Item
        label="联系人地区"
        name="district"
        rules={[{ required: true, message: '请选择地区' }, { validator: validCascaderRule }]}>
        <LazyCascader />
      </Form.Item>
      <Row>
        <Col span={12}>
          <ProFormSelect
            name="gender"
            label="性别"
            rules={[{ required: true, message: '请选择性别' }]}
            options={[
              { label: '男', value: '男' },
              { label: '女', value: '女' }
            ]}
          />
          <ProFormText
            label="手机"
            name="telephone"
            rules={[{ required: true, message: '请输入手机号码' }]}
          />
          <ProFormText
            label="电话"
            name="phone"
            rules={[{ required: true, message: '请输入电话/座机号' }]}
          />
          <ProFormText label="联系人地址" name="address" />
          <ProFormText label="联系人地标" name="landmarks" />
        </Col>
        <Col span={12}>
          <ProFormText label="昵称" name="niceName" />
          <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 Addcontact