/*
 * Creator:     柿子
 * CreatDate:   2022-10-19
 * descripts：  供应商 - 物流单录入
 * */
import React, { Component } from 'react';
import { Modal, Select, Input, message } from 'antd';
import '../style/index.less';

class LogisticsDocEntry extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      selectData: {},
      expressServiceID: undefined, // 物流公司ID
      logisticsNo: undefined, // 物流单号
    }
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (JSON.stringify(nextProps.selectData) !== JSON.stringify(prevState.selectData)) {
      return {
        selectData: nextProps.selectData
      }
    }
    return null
  }

  componentDidMount() {
    this.props.onRef && this.props.onRef(this);
  }

  // 修改弹窗状态 - isClear:是否清除操作数据
  modifyVisible = (visible, isClear) => {
    this.setState({ visible }, () => {
      if (isClear === 'Y') {
        this.setState({ expressServiceID: undefined, logisticsNo: undefined })
      }
    });
  }

  // 确定
  handleOk = () => {
    const { expressServiceID, logisticsNo } = this.state;
    if (!expressServiceID || !logisticsNo) {
      message.error('请录入必填信息！')
    }
    this.props.handleConfirmEntry && this.props.handleConfirmEntry(expressServiceID, logisticsNo);
  }

  render() {
    const { visible, expressServiceID, logisticsNo, selectData } = this.state;
    return (
      <Modal
        width="600px"
        title="批量录入物流单号"
        className="logistics-doc-entry"
        visible={visible}
        onOk={this.handleOk}
        onCancel={() => this.modifyVisible(false)}
      >
        <div style={{ padding: '24px', paddingBottom: 0 }}>
          <div className="ro-form-item flex" style={{ marginBottom: 32 }}>
            <span className="formRequired">物流公司：</span>
            <Select
              allowClear
              showSearch
              value={expressServiceID}
              placeholder="请选择"
              optionFilterProp="search"
              onChange={(e) => this.setState({ expressServiceID: e })}
            >
              {React.$SelectOptions(selectData?.logistics || [])}
            </Select>
          </div>
          <div className="ro-form-item flex">
            <span className="formRequired">物流单号：</span>
            <Input
              allowClear
              value={logisticsNo}
              placeholder="请输入"
              autoSize={{ minRows: 4, maxRows: 6 }}
              onChange={(e) => this.setState({ logisticsNo: e.target.value })}
            />
          </div>
        </div>
      </Modal>
    )
  }
};

export default LogisticsDocEntry;