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';

class ChangeStatus extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: '',
      visibleData: { visible: false, customerId: '' },
    }
  }

  componentDidUpdate(preProps, preState) {
    if (this.props.visibleData.customerId !== preState.visibleData.customerId) {
      this.setState({ visibleData: { ...this.props.visibleData } })
      this.setState({ value: this.props.visibleData.status })
    }
  }

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

  onChange = e => {
    this.setState({
      value: e.target.value,
    });
  };

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

  submitButton = e => {
    // 网路请求
    request({ ...apis.customer.recommendEdit, urlData: { id: this.state.visibleData.customerId }, data: { customerId: this.state.visibleData.customerId, status: this.state.value } }).then(res => {
      // eslint-disable-next-line no-unused-expressions
      this.openNotificationWithIcon('success', '操作成功')
      this.handleCancel()
    }).catch(err => {
      // eslint-disable-next-line no-unused-expressions
      this.openNotificationWithIcon('error', err)
    })
  }

  render() {
    return (
      <>
          <Modal
            title="变更状态"
            width={800}
            destroyOnClose="true"
            footer={null}
            visible={this.state.visibleData.visible}
            // onOk={() => this.handleOk()}
            onCancel={(e) => this.handleCancel(e)}
          >
            <Radio.Group onChange={this.onChange} value={this.state.value}>
              <Radio value={1}>客户报备</Radio>
              <Radio value={2}>客户到访</Radio>
              <Radio value={3}>客户认购</Radio>
              <Radio value={4}>客户签约</Radio>
            </Radio.Group>

            <Button type="danger" onClick={this.submitButton}>确定</Button>
          </Modal>
      </>
    )
  }
}

export default ChangeStatus
