import React, { Component, useState, useEffect } from 'react';
import request from '../../../utils/request';
import apis from '../../../services/apis';
import moment from 'moment';
import router from 'umi/router';
import { Table, Select, Row, Col, Menu, Dropdown, Button, Icon, message } from 'antd';
import BatchAssistConsultant from './BatchAssistConsultant'

const CustomerChange = (props) => {
  const [data, setData] = useState([])
  const [consultantVisible, setConsultantVisible] = useState(false)
  const [selectIds, setSelectIds] = useState([])

  const rowSelection = {
    selectedRowKeys: selectIds,
    onChange: (selectedRowKeys, selectedRows) => {
      console.log('selectedRowKeys:', selectedRowKeys, 'selectedRows: ', selectedRows);
      setSelectIds(selectedRowKeys)
    },
  };

  const batchAssistConsultant = () => {
    if (selectIds.length < 1) {
      message.info("请至少选择一条数据");
      return
    }
    setConsultantVisible(true)
  }

  const consulatanChange = (e) => {
    if (e) {
      data.map(x => {
        selectIds.map(y => {
          if (x.customerId === y) {
            x.realtyConsultant = e.userId
            x.moveUserId = e.userId
            x.moveUserName = e.userName
          }
        })
      })
    }
    setConsultantVisible(false)
    setSelectIds([])
  }

  //批量保存
  const batchSaveConsultant = () => {
    const unMoveData = data.filter(x => !x.moveUserId)
    if (unMoveData.length > 0) {
      message.info("存在未分配归属客户");
      return
    }
    request({ ...apis.staff.move, data }).then(data => {
      message.info('操作成功')
      props.onSuccess('success')
    })
  }

  //取消按钮
  const cancelConsultant = () => {
    props.onSuccess('cancel')
  }


  const columns = [
    {
      title: '用户名',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      align: 'center',
    },
    {
      title: '客户状态',
      dataIndex: 'reportRecommendStatus',
      key: 'reportRecommendStatus',
      align: 'center',
      render: (text, records) => {
        if (records.status === 1) { return '报备' }
        if (records.status === 2) { return '到访' }
        if (records.status === 3) { return '认购' }
        if (records.status === 4) { return '签约' }
      },
    },
    {
      title: '调整后归属',
      dataIndex: 'moveUserName',
      key: 'moveUserName',
      align: 'center',
    }
  ];

  useEffect(() => {
    request({ ...apis.staff.check, params: { userId: props.userId, personId: props.consultantPersonId, buildingId: props.buildingId } }).then(data => {
      setData(data)
    })
  }, [props.userId])

  return (
    <div>
      <Button type="primary" onClick={() => batchAssistConsultant()} style={{ float: 'right', margin: '20px 0', marginLeft: '20px', zIndex: 1 }}>分配置业顾问</Button>
      <Table rowSelection={rowSelection} dataSource={data} columns={columns} rowKey="customerId" pagination={false} scroll={{ y: 500 }} />
      <BatchAssistConsultant visible={consultantVisible} userId={props.userId} buildingId={props.buildingId} onCancel={consulatanChange} />
      <div style={{ textAlign: 'center', marginTop: '16px' }}><Button type="primary" onClick={() => batchSaveConsultant()}>保存</Button>
        <Button style={{ marginLeft: '10px' }} onClick={() => cancelConsultant()}>取消</Button></div>
    </div>
  )
}

export default CustomerChange;