import React, { PureComponent } from "react";
import { Modal, Row, Col, Select } from "antd";
import { connect } from "dva";

import styles from "./index.less";

const { Option } = Select;
/**
 * 左树右表参照框
 */
class CustfeeModal extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      defaultTitle: "",
      defautType: "",
      invoiceTitles: [],
      invoiceTypes: []
    };
  }
  componentWillReceiveProps(nextProps) {
    let defaultTitle = "";
    let defautType = "";
    const invoiceTitles = [];
    let invoiceTypes = [];
    if ("invoiceInfoData" in nextProps) {
      const invoiceInfoData = nextProps.invoiceInfoData;
      if (!invoiceInfoData || invoiceInfoData.length < 1) return false;
      // 取得默认发票信息
      let invoiceInfo = invoiceInfoData.find(item => item.isDefault == 1);
      if (!invoiceInfo) {
        invoiceInfo = invoiceInfoData[0];
      }
      // 默认抬头
      defaultTitle = invoiceInfo.invoiceTitle;
      // 默认类型
      defautType = invoiceInfo.invoiceType;
      // 封装发票抬头数组
      const titles = [];
      invoiceInfoData.forEach(item => {
        if (!titles.includes(item.invoiceTitle)) {
          titles.push(item.invoiceTitle);
          invoiceTitles.push(item);
        }
      });
      // 封装发票类型数组
      invoiceTypes = invoiceInfoData.filter(item => {
        return item.invoiceTitle == defaultTitle;
      });
      this.setState({
        defaultTitle: defaultTitle,
        defautType: defautType,
        invoiceTitles: invoiceTitles,
        invoiceTypes: invoiceTypes
      });
    }
  }
  invoiceTitleChange(value) {
    const { invoiceInfoData } = this.props;
    // 根据选择的发票抬头获取对应的发票类型数组
    const invoiceTypes = invoiceInfoData.filter(item => {
      return item.invoiceTitle == value;
    });
    // 如果获取到的发票类型数组长度为1，则设置为默认选择
    if (invoiceTypes && invoiceTypes.length == 1) {
      this.setState({
        defaultTitle: value,
        defautType: invoiceTypes[0].invoiceType,
        invoiceTypes: invoiceTypes
      });
    } else {
      this.setState({
        defaultTitle: value,
        defautType: "",
        invoiceTypes: invoiceTypes || []
      });
    }
  }
  invoiceTypeChange(value) {
    // 设置选择的发票类型
    this.setState({
      defautType: value
    });
  }
  handleOkBtn() {
    const { defaultTitle, defautType } = this.state;
    const { invoiceInfoData, orderType, dispatch } = this.props;
    const newInvoiceInfoData = invoiceInfoData.concat();
    // 获取选择到的发票信息，设置为默认
    if (defaultTitle && defautType) {
      if (newInvoiceInfoData.find(item => item.isDefault == "1")) {
        newInvoiceInfoData.find(item => item.isDefault == "1").isDefault = "0";
      }
      newInvoiceInfoData.find(
        item =>
          item.invoiceTitle == defaultTitle && item.invoiceType == defautType
      ).isDefault =
        "1";
    }
    if (orderType && orderType == "return") {
      dispatch({
        type: "returnOrderEdit/invoiceInfoData",
        invoiceInfoData: newInvoiceInfoData
      });
    } else {
      dispatch({
        type: "orderEdit/invoiceInfoData",
        invoiceInfoData: newInvoiceInfoData
      });
    }
    this.hideModal();
  }

  hideModal = () => {
    this.props.dispatch({
      type: "global/invoiceVisible",
      payload: false
    });
  };

  render() {
    const selectTtileOptionHtml = items => {
      return items.map(item => {
        return (
          <Option key={item.invoiceTitle} value={item.invoiceTitle}>
            {item.invoiceTitle}
          </Option>
        );
      });
    };
    const selectTypeOptionHtml = items => {
      return items.map(item => {
        return (
          <Option key={item.invoiceType} value={item.invoiceType}>
            {item.invoiceType}
          </Option>
        );
      });
    };
    // 取得选择的发票信息
    const { defaultTitle, defautType } = this.state;
    const { invoiceInfoData } = this.props;
    let selectInvoiceInfo = {};
    if (defaultTitle && defautType) {
      selectInvoiceInfo = invoiceInfoData.find(
        item =>
          item.invoiceTitle == defaultTitle && item.invoiceType == defautType
      );
    }
    return (
      <div>
        <Modal
          title={this.props.title || "选择发票信息"}
          visible={this.props.visible || false}
          onOk={this.handleOkBtn.bind(this)}
          onCancel={this.hideModal}
          okText="确定"
          cancelText="取消"
          width={600}
          className={styles.modal}
        >
          <Row>
            <Col span={6} className={styles.specRow}>
              发票抬头：
            </Col>
            <Col span={18} className={styles.specRow}>
              <Select
                defaultValue={defaultTitle}
                style={{ width: 220 }}
                onChange={this.invoiceTitleChange.bind(this)}
              >
                {selectTtileOptionHtml(this.state.invoiceTitles)}
              </Select>
            </Col>
          </Row>
          <Row>
            <Col span={6} className={styles.specRow}>
              发票类型：
            </Col>
            <Col span={18} className={styles.specRow}>
              <Select
                value={defautType}
                style={{ width: 220 }}
                onChange={this.invoiceTypeChange.bind(this)}
              >
                {selectTypeOptionHtml(this.state.invoiceTypes)}
              </Select>
            </Col>
          </Row>
          <div style={{ padding: "10px 0" }} />
          <Row>
            <Col span={6}>发票抬头：</Col>
            <Col span={18}>{selectInvoiceInfo.invoiceTitle}</Col>
          </Row>
          <Row>
            <Col span={6}>发票内容：</Col>
            <Col span={18}>{selectInvoiceInfo.invoiceContent}</Col>
          </Row>
          <Row>
            <Col span={6}>纳税识别人：</Col>
            <Col span={18}>{selectInvoiceInfo.invoiceTaxId}</Col>
          </Row>
          <Row>
            <Col span={6}>开户银行：</Col>
            <Col span={18}>{selectInvoiceInfo.invoiceBank}</Col>
          </Row>
          <Row>
            <Col span={6}>支行名称：</Col>
            <Col span={18}>{selectInvoiceInfo.invoiceSubBank}</Col>
          </Row>
          <Row>
            <Col span={6}>账号：</Col>
            <Col span={18}>{selectInvoiceInfo.invoiceAccount}</Col>
          </Row>
        </Modal>
      </div>
    );
  }
}
export default connect(state => ({
  ...state,
  visible: state.global.invoiceVisible
}))(CustfeeModal);
