import React, { useState, useEffect } from 'react';
import { Table, Modal, notification } from 'antd';
import request from '@/utils/request';
import apis from '@/services/apis';
import BuildSelect from '../../../../../components/SelectButton/BuildSelect';

/**
 * 分配置业顾问
 *
 * @param {*} props
 * @returns
 */

const AssistConsultant = props => {
  const { visible, data } = props.modelProps || {};

  const [tableData, setTableData] = useState({});
  const [loading, setLoading] = useState(false);

  const openNotificationWithIcon = (type, message) => {
    notification[type]({
      message,
      description: '',
    });
  };

  function getList(params) {
    // 网路请求
    setLoading(true);
    request({
      ...apis.customer.buildingConsultant,
      params: { ...params },
    })
      .then(res => {
        console.log(res, 'res');
        setTableData(res);
        setLoading(false);
      })
      .catch(err => {
        openNotificationWithIcon('error', err);
        setLoading(false);
      });
  }

  useEffect(() => {
    if (visible) {
      getList({ pageNumber: 1, pageSize: 5 });
    } else {
      setTableData({});
    }
  }, [visible]);

  // 分页
  function onChange(pageNum) {
    getList({ pageNumber: pageNum, pageSize: 5 });
  }

  function changBuilding(buildingId) {
    if (buildingId) {
      getList({ pageNumber: 1, pageSize: 5, buildingId: buildingId });
    }
  }

  //   // 提交
  function submitGm(record) {
    // 网路请求
    request({
      ...apis.customer.consultantAssist,
      urlData: { id: data.customerId },
      data: { userId: record.userId, buildingId: data.buildingName || data.buildingId },
    })
      .then(res => {
        // eslint-disable-next-line no-unused-expressions

        openNotificationWithIcon('success', '操作成功');
        props.handleCancel();
      })
      .catch(err => {
        // eslint-disable-next-line no-unused-expressions
      });
  }

  const columns = [
    {
      title: '姓名',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
    },
    {
      title: '岗位',
      dataIndex: 'position',
      key: 'position',
    },
    {
      title: '操作',
      dataIndex: 'personId',
      key: 'personId',
      // eslint-disable-next-line no-nested-ternary
      render: (_, record) => (
        <>
          {
            <Button type="danger" onClick={() => submitGm(record)}>
              确定
            </Button>
          }
        </>
      ),
    },
  ];

  return (
    <>
      <Modal
        title={'分配置业顾问'}
        width={800}
        destroyOnClose="true"
        footer={null}
        visible={visible}
        onCancel={() => props.onCancel()}
      >
        {/* <span>你正在为{this.props.visibleData.customerId.length}位公客分配置业顾问</span><br/><br/>
            {this.props.visibleData.buildingId == null && <BuildSelect onChange={this.changBuilding.bind(this)} value={this.state.visibleData.buildingName} />} */}

        {data && (
          <>
            {data.customerId?.length > 0 && (
              <>
                <span>你正在为{data.customerId.length}位公客分配置业顾问</span>
                <br />
                <br />
              </>
            )}
            {data?.buildingId == null && (
              <BuildSelect onChange={e => changBuilding(e)} value={data?.buildingName} />
            )}
            <Table
              dataSource={tableData.records}
              columns={columns}
              loading={loading}
              pagination={{
                pageSize: tableData.pageSize,
                total: tableData.total,
                onChange: e => onChange(e),
              }}
            />
          </>
        )}
      </Modal>
    </>
  );
};

export default AssistConsultant;

// import React, { useState, useEffect } from 'react';
// import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions, notification } from 'antd';
// import moment from 'moment';
// import request from '../../../../utils/request';
// import apis from '../../../../services/apis';
// import Styles from '../style.less';
// import BuildSelect from '../../../../components/SelectButton/BuildSelect'

// const { Option } = Select;
// // eslint-disable-next-line @typescript-eslint/no-unused-vars
// const { Meta } = Card;

// /**
//  * 分配置业顾问
//  *
//  * @param {*} props
//  * @returns
//  */
// class ModalAttribution extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//        dataSource: { records: [] },
//        visibleData: { visible: false, customerId: '', buildingName: '' },
//     }
//   }

//   // 挂载之后
//   componentDidMount() {
//     // this.getList({ pageNumber: 1, pageSize: 5 })
//   }

//   componentDidUpdate(preProps, preState) {
//     console.log(this.props.visibleData)
//     if (this.props.visibleData.visible !== preState.visibleData.visible) {
//       this.getList({ pageNumber: 1, pageSize: 5, customerId: this.props.visibleData.customerId,buildingId:this.props.visibleData.buildingId })
//       this.setState({ visibleData: this.props.visibleData });
//     }
//   }

//   // 弹框确定按钮
//   // eslint-disable-next-line react/sort-comp
//   handleOk() {
//     this.props.onCancel()
//   }

//   // 弹框取消按钮
//   handleCancel() {
//     this.props.onCancel()
//   }

//   changBuilding(buildingId){
//     this.getUserList({ pageNumber: 1, pageSize: 5, buildingId: buildingId })
//     this.setState({ visibleData: { visible: this.props.visibleData.visible, customerId: this.props.visibleData.customerId, buildingName: buildingId } });
//   }

//   getUserList(params){
//     console.log('params: ', params)
//     if (params.buildingId === '' || params.buildingId === null || params.buildingId === undefined) {
//       return
//     }
//     // 网路请求
//     request({ ...apis.customer.buildingConsultant, params: { ...params } }).then(res => {
//       this.setState({ dataSource: res })
//     }).catch(err => {

//     })
//   }

//   getList(params) {
//     // 网路请求
//     request({ ...apis.customer.buildingConsultant, params: { ...params } }).then(res => {
//       this.setState({ dataSource: res })
//     }).catch(err => {

//     })
//   }

//   openNotificationWithIcon = (type, message) => {
//     notification[type]({
//       message,
//       description:
//         '',
//     });
//   };

//    // 分页
//   onChange(pageNum) {
//     this.getList({ pageNumber: pageNum, pageSize: 5, customerId: this.props.visibleData.customerId, buildingId: this.state.visibleData.buildingName ||this.props.visibleData.buildingId})
//   }

//   // 提交
//   submitGm(record) {
//     debugger
//     // 网路请求
//     request({ ...apis.customer.consultantAssist, urlData: { id: this.state.visibleData.customerId },
//       data: { userId: record.userId,buildingId:this.state.visibleData.buildingName  || this.props.visibleData.buildingId } }).then(res => {
//       // eslint-disable-next-line no-unused-expressions

//       this.openNotificationWithIcon('success', '操作成功')
//       this.handleCancel()
//     }).catch(err => {
//       // eslint-disable-next-line no-unused-expressions
//     })
//   }

//   render() {
//     const columns = [
//       // {
//       //   title: '编号',
//       //   dataIndex: 'userId',
//       //   key: 'userId',
//       // },
//       {
//         title: '姓名',
//         dataIndex: 'userName',
//         key: 'userName',
//       },
//       {
//         title: '电话',
//         dataIndex: 'phone',
//         key: 'phone',
//       },
//       {
//         title: '部门',
//         dataIndex: 'department',
//         key: 'department',
//       },
//       {
//         title: '岗位',
//         dataIndex: 'position',
//         key: 'position',
//       },
//       {
//         title: '操作',
//         dataIndex: 'personId',
//         key: 'personId',
//         // eslint-disable-next-line no-nested-ternary
//         render: (_, record) => <>{ <Button type="danger" onClick={() => this.submitGm(record)}>确定</Button>}</>, },
//     ]
//     return (
//       <>
//         <Modal
//             title="分配置业顾问"
//             width={800}
//             destroyOnClose="true"
//             footer={null}
//             visible={this.state.visibleData.visible}
//             onCancel={(e) => this.handleCancel(e)}
//           >
//             {this.props.visibleData.buildingId == null && <BuildSelect  onChange={this.changBuilding.bind(this)} value={this.state.visibleData.buildingName} />}
//             <Table rowKey="assistConsultant" dataSource={this.state.dataSource.records} columns={columns} pagination={{pageSize: 5, total: this.state.dataSource.total, onChange: e => this.onChange(e) }} />
//           </Modal>
//       </>
//     );
//   }
// }

// export default ModalAttribution