import React, { useState } from 'react';
import { Avatar, Modal } from 'antd';
import apis from '../../../services/apis';
import moment from 'moment';
import WxDictSelect from '@/components/SelectButton/WxDictSelect';
import BuildingSelect from '@/components/SelectButton/BuildSelect';
import QueryTable from '@/components/QueryTable';
import DealDetail from './detail';

function costomerDrift(props) {
  const [visible, setVisible] = useState(false);
  const [detail, setDetail] = useState({});
  const columns = [
    {
      title: '头像',
      dataIndex: 'picture',
      key: 'picture',
      align: 'center',
      render: (_, record) => <Avatar shape="square" src={record.picture} size={64} icon="user" />,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
      align: 'center',
    },

    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      align: 'center',
      // eslint-disable-next-line no-nested-ternary
      render: (_, record) => (
        <>
          <span>{record.sex === '1' ? '男' : record.sex === '2' ? '女' : '未知'}</span>
        </>
      ),
    },
    {
      title: '所属项目',
      dataIndex: 'buildingName',
      key: 'buildingName',
      align: 'center',
    },
    {
      title: '成交金额',
      dataIndex: 'price',
      key: 'price',
      align: 'center',
    },
    {
      title: '报备人',
      dataIndex: 'recommendName',
      key: 'recommendName',
      align: 'center',
      width: 200,
    },
    {
      title: '签约日期',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      render: t => moment(t).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '状态',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      render: t => t=='signatory'?'签约':t=='commission'?'结佣':'--'
      
    },
    {
      title: '操作',
      dataIndex: 'edit',
      key: 'edit',
      align: 'center',
      render: (_, record) => (
        <>
          <a
            onClick={() => {
              setDetail(record), setVisible(true);
            }}
          >
            查看详情
          </a>
        </>
      ),
    },
  ];

  const searchFields = [
    {
      name: 'buildingId',
      label: '项目',
      placeholder: '请选择项目',
      render: () => <BuildingSelect style={{ width: 160 }} />,
    },
    {
      name: 'name',
      label: '姓名',
      placeholder: '请输入姓名',
    },
    {
      name: 'phone',
      label: '电话',
      placeholder: '请输入电话',
    },
    {
      name: 'type',
      label: '状态',
      placeholder: '请选择状态',
      type: 'select',
      options: [
        { label: '全部', value: '' },
        { label: '签约', value: 'signatory' },
        { label: '结佣', value: 'commission' },
      ],
    },
  ];
  // pageNum=1&pageSize=10&buildingId=&name=&phone=&type=
  return (
    <>
      <QueryTable
        rowKey="customerSignatoryId"
        api={apis.customer.getDealList}
        searchFields={searchFields}
        columns={columns}
      />
      <Modal
      title='客户详情'
        visible={visible}
        onOk={() => {
          setVisible(false);
        }}
        onCancel={() => {
          setVisible(false);
        }}
        footer={null}
      >
        <DealDetail detail={detail} />
      </Modal>
    </>
  );
}

export default costomerDrift;
