import { Row, Col } from 'antd'
import React, { useEffect } from 'react'
import EditableForm from '@/components/EditableForm'
// import '../Contacts/index.scss'

const ContanctForm = props => {
  const { client } = props
  const columns = [
    {
      dataIndex: 'clientName',
      label: '姓名',
      span: 24
    },
    {
      dataIndex: 'companyName',
      label: '客户名称',
      span: 24
    },
    {
      dataIndex: 'district',
      label: '联系人地区',
      editCellType: 'cascader',
      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
    },
    {
      dataIndex: 'address',
      label: '联系人地址',
      span: 24
    },
    {
      dataIndex: 'ride',
      label: '联系人乘车',
      span: 24
    },
    {
      dataIndex: 'landmarks',
      label: '联系人地标',
      span: 24
    },
    {
      dataIndex: 'stay',
      label: '联系人住宿',
      span: 24
    },
    {
      dataIndex: 'mark',
      label: '备注',
      span: 24
    },
    {
      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" />
    </div>
  )
}

export default ContanctForm