import React from 'react';
import {Table, Modal,Input,message} from 'antd';
import { PageControl } from "@/components";
import PlanService from '@/domains/plan-domain/planService'
import User from '@/common/js/user'
import './UnbundEmployeeModal.less';
import _ from "underscore";
const { Search } = Input;
const UserRole = {
  StoreManager: {
    text: "店铺管理员"
  },
  CloudManager: {
    text:"管理员"
  },
  CloudOperator: {
    text:'运营师'
  },
  Cloud_Lecture: {
    text:"讲师"
  },
};
class UnbundEmployeeModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource:[],
      selectOperatorList:[]
    };
  }
  componentDidMount() {
    this.handleFetchDataList();
  }
 
   // 获取绑定员工列表
  handleFetchDataList = () => {
    const params ={
        planId: getParameterByName("id"),
        storeCustomerId: this.props.storeCustomerId,
        storeId:this.props.storeId
    }
    PlanService.getPlanCustomerAboutUser(params).then((res) => {
      const { result = {} } = res ;
      this.setState({
        dataSource: result,
      });
    });
  }

  // 请求表头
  parseColumns = () => {
    const columns = [
      {
        title: '员工',
        key: 'storeUserName',
        dataIndex: 'storeUserName',
       
      },
      {
        title: '角色',
        key: 'role',
        dataIndex: 'role',
        render:(val,record)=>{
          return <span>{UserRole[val].text}</span>
        }
      },
      {
        title: '手机号',
        key: 'storeUserPhone',
        dataIndex: 'storeUserPhone'
      }
    ];
    return columns;
  }
  selectOperator = (record,selected) =>{
    const {selectOperatorList} = this.state;
    let _list = [];
    if (selected || !_.find(selectOperatorList, (item) => item.storeUserId == record.storeUserId)) {
      _list = _.uniq(selectOperatorList.concat([record]), false, (item) => item.storeUserId);
    } else {
      _list = _.reject(selectOperatorList, (item) => item.storeUserId === record.storeUserId);
    }
    this.setState({selectOperatorList:_list});
  }
  confirmUnbund = ()=>{
    const { selectOperatorList } = this.state;
    if(selectOperatorList.length ===0){
      message.warning('请选择需要解绑的员工');
      return false;
    }
    const params = {
      planId:getParameterByName("id"),
      removeUserIds:_.pluck(selectOperatorList, 'storeUserId'),
      storeCustomerId:this.props.storeCustomerId,
      storeId:User.getStoreId(),
      storeUserId:User.getStoreUserId()
    }
    PlanService.removePlanCustomer(params).then((res) => {
      message.success('解绑成功');
      this.props.onConfirm();
    });
  }
  render() {
    const { size,dataSource,totalCount,query,selectOperatorList} = this.state;
    const { visible } = this.props;
    return (
        <Modal
          title="选择需解绑的员工"
          onCancel={this.props.onClose}
          maskClosable={false}
          visible={visible}
          className="select-operator-modal"
          closable={true}
          width={800}
          onOk={() => {this.confirmUnbund()}} 
          closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} 
        >
          <div>
            <Table
              rowKey={record => record.storeUserId}
              dataSource={dataSource}
              columns={this.parseColumns()}
              pagination={false}
              bordered
              rowSelection={{
                type: 'checkbox',
                selectedRowKeys: _.pluck(selectOperatorList, 'storeUserId'),
                onSelect: (record, selected) => {
                  this.selectOperator(record, selected)
                },
                onSelectAll: (selected, _selectedRows, changeRows) => {
                  let _list = [];
                  if (selected) {
                      _list = _.uniq(selectOperatorList.concat(changeRows), false, (item) => item.storeUserId);
                  } else {
                      _list = _.reject(selectOperatorList, (item) => _.find(changeRows, (data) => data.storeUserId === item.storeUserId));
                  }
                  this.setState({selectOperatorList:_list});
                }
              }}
            />
          </div>
        </Modal>
    )
  }
}

export default UnbundEmployeeModal;