import React from 'react';
import { Affix, Button, Card, Col, Divider, message, Popconfirm, Popover, Row } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import { BpmDrawer, SuggestSelect } from '@components';
import './Toolbar.less';
import { config, networkUtils } from '../../utils';

const { api } = config;

let initNotifyRole = []

class Toolbar extends React.PureComponent {
  componentDidMount = () => {
    if (this.props.record && this.props.record.taskKey && this.props.record.defId) {
      networkUtils.request({
        url: api.bpm.notifies.replace('{actId}', this.props.record.taskKey),
        method: 'GET',
        data: { defId: this.props.record.defId },
      }).then(data => {
        if (data.success) {
          initNotifyRole = data.data
          this.setState({
            notifyRole: data.data,
          });
        }
      });
    }
  }
  renderButton = (button) => {
    const { loading } = this.props;
    return button.hidden ? '' :
      <Button key={button.id} type={button.type} disabled={button.disabled || loading.global} style={button.style}
        onClick={button.onClick}>
        {button.text}
      </Button>;
  };
  cancelConfirm = (loading, handleCancel) => (
    <Popconfirm title={'确定要返回吗?'} placement="bottom" onConfirm={handleCancel}>
      <Button type="danger" loading={false} disabled={loading} style={{ width: '100%' }}>
        返回
      </Button>
    </Popconfirm>
  );
  cancelButton = (loading, handleCancel) => (
    <Button type="danger" loading={false} onClick={handleCancel} disabled={loading}
      style={{ width: '100%' }}>
      返回
    </Button>
  );
  notifyButton = (loading) => (
    <Popover
      placement="bottom"
      content={
        <div style={{ width: 300 }} >
          <SuggestSelect value={this.state.notifyRole} apiName="bpmRoles" onChange={this.handleNotifyRoleChange} mode='multiple' />
          <Divider style={{ margin: '12px 0' }} />
          <Button type="primary" size="small" onClick={this.submitNotifyRole}>确认</Button>
          <Divider type="vertical" />
          <Button size="small" onClick={this.handleNotifyClose}>取消</Button>
        </div>
      }
      title="选择知会流程角色"
      trigger="click"
      visible={this.state.notifyShow}
      // onMouseEnter={this.handleNotifyOpen}
      // onMouseLeave={this.handleNotifyClose}
      onVisibleChange={this.handleNotifyOpen}
    >
      <Button type="primary" loading={false} onClick={this.handleNotifyOpen} disabled={loading}
        style={{ width: '100%' }}>
        知会
      </Button>
    </Popover>
  );
  renderAdvice = (button) => {
    return (
      <TextArea style={{ width: 300 }} maxLength={500} autosize={{ minRows: 1, maxRows: 3 }} placeholder={button.placeholder}
        onChange={button.onChange} />
    );
  };
  showButton = (button) => {
    switch (button.id) {
      case 'advice':  // 意见
        return this.renderAdvice(button);
      default:
        return this.renderButton(button);
    }
  };
  handleDrawerClose = () => {
    this.setState({
      drawerShow: false,
    });
  };
  handleDrawerOpen = () => {
    this.setState({
      drawerShow: true,
    });
  };
  handleNotifyClose = () => {
    this.setState({
      notifyRole: initNotifyRole,
      notifyShow: false,
    });
  };
  handleNotifyOpen = () => {
    this.setState({
      notifyShow: true,
    });
  };
  handleNotifyRoleChange = (roleIds) => {
    // console.log(roleIds)
    this.setState({
      notifyRole: roleIds,
    });
  };
  submitNotifyRole = () => {
    networkUtils.request({
      url: api.bpm.notify.replace('{id}', this.props.record.taskId), method: 'POST',
      data: { bpmRoles: this.state.notifyRole },
    }).then(data => {
      if (data.success) {
        message.success('知会成功');
      } else {
        message.success('知会失败');
      }
    });

    this.setState({
      notifyRole: initNotifyRole,
      notifyShow: false,
    });
  };
  renderToolbar = () => {
    const { loading, buttons, readOnly, mode, record, handleSync, handleMail, handlePrint, handleCancel, prcId, defId } = this.props;
    const { drawerShow } = this.state;
    return (
      <Affix
        offsetTop={5}
        target={() => document.getElementById('main')}
      >
        {prcId && defId &&
          <BpmDrawer defId={defId} prcId={prcId} show={drawerShow} handleClose={this.handleDrawerClose} />}
        <Card
          title={false}
          loading={false}
          bodyStyle={{ padding: '5px 10px' }}
          {...Object.assign(
            {}, {
              style: {
                // background: '#d2eafb',
                boxShadow: '4px 4px 40px rgba(0, 0, 0, 0.25)',
                // background: 'rgba(210, 234, 251, 0.9)',
                background: 'rgba(255, 255, 255, 0.8)',
                marginBottom: 12,
                border: 'none',
              },
            },
          )}
        >
          <Row>
            <Col span={18}>
              <Row gutter={6} type="flex" justify="start">
                {
                  buttons.length && buttons.map(b => (!b.hidden && <Col key={b.id}>{this.showButton(b)}</Col>))
                }
                {(mode === 'approval' || mode === 'approve') &&
                  <Col key={'notify'}>
                    {this.notifyButton(loading.global)}
                  </Col>}
                <Col key={'cancelButton'}>
                  {mode === 'view' ? this.cancelButton(loading.global, handleCancel) : this.cancelConfirm(loading.global, handleCancel)}
                </Col>
              </Row>
            </Col>
            <Col span={6}>
              <Row type="flex" justify="end">
                {handleSync && <Button icon={'sync'} onClick={handleSync} />}
                {handleMail && <Button icon={'mail'} style={{ marginLeft: 5 }} onClick={handleMail} />}
                {handlePrint && <Button icon={'printer'} style={{ marginLeft: 5 }} onClick={handlePrint} />}
                {prcId && defId &&
                  <Button style={{ marginLeft: 5 }} onClick={this.handleDrawerOpen}>流程详情</Button>}
              </Row>
            </Col>
          </Row>
        </Card>
      </Affix>
    );
  };

  constructor(props) {
    super(props);
    this.state = {
      drawerShow: false,
      notifyShow: false,
      notifyRole: initNotifyRole,
    };
  }

  render() {
    return this.renderToolbar();
  };

}


export default Toolbar;
