/*
 * Creator:     柿子
 * CreatDate:   2022-09-05
 * descripts：  供应商 - 退回订单
 * */
import React, { Component } from 'react';
import { Modal, Select, Input, message } from 'antd';
import { Util } from 'tools';
import MatchingDetails from './MatchingDetails';
import '../style/index.less';
const { TextArea } = Input;

class ReturnOrder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      rowData: {},
      selectData: {},
      reasonDesc: undefined, // 退回原因
      remark: undefined, // 备注
      statusCode: '', // 退回状态
      exchange: undefined, // 是否需换货
      detailsParams: [], // 修改的配镜参数
      okBtnLoading: false
    }
  }

  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);
  }

  // 修改弹窗状态
  modifyVisible = (visible, record = {}, statusCode, isCurrent) => {
    if (!visible) { // 关闭弹窗时清空配镜参数
      this.state.detailsParams = [];
    } else {
      this.state.rowData = record;
      this.state.statusCode = statusCode;
    }
    this.setState({ visible, okBtnLoading: false }, () => {
      if (isCurrent === 'Y') {
        this.handleClear();
      }
    })
  }

  handleClear = () => {
    this.setState({ reasonDesc: undefined, remark: undefined, exchange: undefined, okBtnLoading: false });
  }

  clearLoading = () => {
    this.setState({ okBtnLoading: false });
  }

  // 确定
  handleOk = Util.debounce(() => {
    const { componentSource } = this.props;
    const { reasonDesc, remark, statusCode, exchange, detailsParams, selectData } = this.state;
    const reasonSelectData = selectData?.refuseReason || selectData?.reason || [];
    if (reasonSelectData && reasonSelectData.length > 0 && !reasonDesc) {
      message.error('原因不能为空！');
      return;
    }
    this.setState({ okBtnLoading: true });
    let reasonDescRemark = (reasonDesc || '') + (reasonDesc && remark ? ('^' + remark) : (remark || ''));
    if (componentSource === 'mirrorRetraction') { // 退镜
      this.props.confirmMirrorRetraction && this.props.confirmMirrorRetraction({ remark, reasonID: reasonDesc, exchange, valueArr: detailsParams });
    } else {
      this.props.modifyApplicationFormStatus && this.props.modifyApplicationFormStatus(statusCode ? statusCode : '10', '', 'returnOrder', reasonDescRemark);
    }
  })

  // 查看详情
  handleViewDetails = () => {
    const { rowData, detailsParams } = this.state;
    let isGetDetails = !(detailsParams && detailsParams.length > 0) ? 'Y' : 'N';
    this.matchingDetailsRef && this.matchingDetailsRef.modifyVisible(true, { ...rowData, suppFlag: 'ReturnOrder' }, isGetDetails);
  }

  // 保存修改的详情参数
  handleSaveDetailsParams = (params) => {
    this.setState({ detailsParams: params });
  }

  render() {
    const { componentSource, modalTitle, exchangeSeleleFlag } = this.props;
    const { visible, reasonDesc, remark, rowData, selectData, exchange, okBtnLoading } = this.state;
    const reasonSelectData = selectData?.refuseReason || selectData?.reason || [];
    return (
      <div>
        <Modal
          width="600px"
          title={componentSource === 'mirrorRetraction' ? '请输入退镜原因' : (modalTitle || '退回订单原因')}
          className="supplier-return-order"
          visible={visible}
          onOk={this.handleOk}
          okButtonProps={{
            loading: okBtnLoading
          }}
          onCancel={() => this.modifyVisible(false)}
        >
          <div>
            {componentSource === 'mirrorRetraction' ? (
              <>
                {/* <div style={{ color: '#ff3d00', textAlign: 'center', marginBottom: 12 }}>
                  请您确认退镜信息，退镜后无法撤销
                </div> */}
                <div className="ro-form-item">
                  <span>退镜眼别：</span>{rowData?.partDesc || ''}
                </div>
                <div className="ro-form-item" style={{ margin: '12px 0' }}>
                  <span>退镜金额：</span>{rowData?.patAmt || 0}
                </div>
              </>
            ) : ''}
            {componentSource === 'mirrorRetraction' && exchangeSeleleFlag === 'Y' ? (
              <>
                <div className="ro-form-item flex" style={{ marginBottom: exchange === 'Y' ? 0 : 12 }}>
                  <span className="formRequired">是否换货：</span>
                  <Select
                    allowClear
                    showSearch
                    value={exchange}
                    placeholder="请选择"
                    optionFilterProp="search"
                    onChange={(e) => this.setState({ exchange: e })}
                  >
                    {React.$SelectOptions(selectData?.exchange || [])}
                  </Select>
                </div>
                {exchange === 'Y' ? <div className="span" style={{ marginLeft: '72px', fontWeight: 'normal', marginBottom: 12 }} onClick={this.handleViewDetails}>修改配镜参数</div> : ''}
              </>
            ) : ''}
            {reasonSelectData && reasonSelectData.length > 0 ? (
              <div className="ro-form-item flex" style={{ marginBottom: 12 }}>
                <span className="formRequired">{componentSource === 'mirrorRetraction' ? '退镜原因：' : '退回原因：'}</span>
                <Select
                  allowClear
                  showSearch
                  value={reasonDesc}
                  placeholder="请选择"
                  optionFilterProp="search"
                  onChange={(e) => this.setState({ reasonDesc: e })}
                >
                  {/* 退镜传入ID，其他存描述 */}
                  {React.$SelectOptions(reasonSelectData, componentSource === 'mirrorRetraction' ? 'id' : 'descripts')}
                </Select>
              </div>
            ) : ''}
            <div className="ro-form-item flex">
              <span>备注：</span>
              <TextArea
                allowClear
                value={remark}
                placeholder="请输入"
                autoSize={{ minRows: 4, maxRows: 6 }}
                onChange={(e) => this.setState({ remark: e.target.value })}
              />
            </div>
          </div>
        </Modal>

        {/* 查看详情 */}
        <MatchingDetails interfaceFlag="ReturnOrder" onRef={ref => this.matchingDetailsRef = ref} getDetailsParams={this.handleSaveDetailsParams} />
      </div>
    )
  }
};

export default ReturnOrder;