import { Row, Col } from 'antd'
import React, { useEffect } from 'react'
import EditableForm from '@/components/EditableForm'
import ChangeCompanyInput from '@/pages/Customer/Contact/components/ChangeCompany/'

const ContanctForm = props => {
  const { client, clientId } = props
  const columns = [
    {
      dataIndex: 'clientName',
      label: '姓名',
      span: 24
    },
    {
      dataIndex: 'district',
      label: '联系人地区',
      editCellType: 'cascader',
      span: 24
    },
    {
      dataIndex: 'companyName',
      label: '客户名称',
      editCellType: 'custom',
      customCell: <ChangeCompanyInput value={client.companyName} clientId={clientId} />,
      span: 24
    },
    {
      dataIndex: 'gender',
      label: '性别',
      editCellType: 'select',
      span: 12
    },
    {
      dataIndex: 'niceName',
      label: '昵称',
      span: 12
    },
    {
      dataIndex: 'telephone',
      label: '手机',
      span: 12
    },
    {
      dataIndex: 'qq',
      label: 'QQ',
      span: 12
    },
    {
      dataIndex: 'phone',
      label: '电话',
      span: 12
    },
    {
      dataIndex: 'email',
      label: '邮箱',
      span: 12
    },
    {
      dataIndex: 'fax',
      label: '传真',
      span: 12
    },
    {
      dataIndex: 'department',
      label: '部门',
      span: 12
    },
    {
      dataIndex: 'position',
      label: '职务',
      span: 12
    },
    {
      dataIndex: 'office',
      label: '办公室',
      span: 24,
      editCellType: 'textarea'
    },
    {
      dataIndex: 'address',
      label: '联系人地址',
      span: 24,
      editCellType: 'textarea'
    },
    {
      dataIndex: 'ride',
      label: '联系人乘车',
      span: 24,
      editCellType: 'textarea'
    },
    {
      dataIndex: 'landmarks',
      label: '联系人地标',
      span: 24,
      editCellType: 'textarea'
    },
    {
      dataIndex: 'stay',
      label: '联系人住宿',
      span: 24,
      editCellType: 'textarea'
    },
    {
      dataIndex: 'mark',
      label: '备注',
      span: 24,
      editCellType: 'textarea'
    },
    {
      dataIndex: 'gerenbiaoqian',
      label: '个人标签',
      span: 24
    },
    {
      dataIndex: 'xiezuobiaoqian',
      label: '协作标签',
      span: 24
    }
  ]

  return (
    <div>
      <Row>
        <Col span={16}>
          <h2>{client.clientName}</h2>
        </Col>
        {/* className={[ 'text-right', styles.textMuted ]} */}
        <Col span={8} className="zh-text-right zh-gray">
          {client.staffName} 创建于{client.createTime}
        </Col>
      </Row>
      <EditableForm
        dataSource={client}
        columns={columns}
        tartgetUrl="/api/client/update"
        type="contact"
      />
    </div>
  )
}

export default ContanctForm