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);
    console.log(props, '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,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 => {
      message.err(err)
    })
  }

  getList(params) {
    // 网路请求
    console.log('params: ', 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, buildingId: this.state.visibleData.buildingName ||this.props.visibleData.buildingId})

    // this.getUserList({ pageNumber: pageNum, pageSize: 5, buildingId: this.state.visibleData.buildingName })
  }

  // 提交
  submitGm(record) {
    // 网路请求
    request({ ...apis.customer.batchConsultantAssist, data: { userId: record.userId
      ,buildingId:this.state.visibleData.buildingName  || this.props.visibleData.buildingId
      , customerIds: this.state.visibleData.customerId } }).then(res => {
      // eslint-disable-next-line no-unused-expressions
      debugger
      if(res!= null && res.failNum > 0 ){
        this.openNotificationWithIcon('success', '共'+res.totalNum+'条数据,失败操作'+res.failNum+'条')
      }else{
        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)}
          >
            <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} />}
            <Table rowKey="BatchAssistConsultant" dataSource={this.state.dataSource.records} columns={columns} pagination={{pageSize: 5, total: this.state.dataSource.total, onChange: e => this.onChange(e) }} />
          </Modal>
      </>
    );
  }
}

export default ModalAttribution
