import React, { PureComponent } from "react";
import { connect } from "dva";
import { Icon, Input, Button, Select, DatePicker, Table } from "antd";
import moment from "moment";
import styles from "./index.less";
import CartListComp from "@/components/MyAccList/index.js";
class DealReconcile extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      startTime: moment().format("YYYY-MM-01"),
      endTime: moment().format("L"),
      searchText: "",
      financialOrg: "",
      saleOrgChange: "",
      CostReconcileList: null
    };
  }
  componentWillMount() {
    const { dispatch } = this.props;
    // 获取组织
    dispatch({
      type: "myAccount/getsuppliersJurisdiction",
      payload: null
    }).finally(() => {
      // 获取财务组织
      const { organizations } = this.props;
      const saleOrg = [];
      for (let i = 0; i < organizations.length; i++) {
        if (organizations[i].saleOrganizationId) {
          saleOrg.push(organizations[i].saleOrganizationId);
        }
      }
      // dispatch({
      //   type: "myAccount/getFinanorgsBySaleorgs",
      //   payload: saleOrg
      // }).finally(() => {
      //   const { finanorgsBySaleorgs } = this.props;
      //   if (finanorgsBySaleorgs && finanorgsBySaleorgs.length > 0) {
      //     this.setState({
      //       financialOrg: finanorgsBySaleorgs[0].finanOrgId
      //     });
      //   }
      //   this.searchPayStatstic();
      //   this.pageChange(0, 10);
      // });
      dispatch({
        type: "myAccount/getFinanorgsBySaleorgsDistinct",
        payload: saleOrg
      }).finally(() => {
        const { finanorgsBySaleorgsDistinct } = this.props;
        if (finanorgsBySaleorgsDistinct && finanorgsBySaleorgsDistinct.length > 0) {
          this.setState({
            financialOrg: finanorgsBySaleorgsDistinct[0].finanOrgId
          });
        }
        this.searchPayStatstic();
        this.pageChange(0, 10);
      });
    });
  }

  // 应对对账统计页请求
  searchPayStatstic() {
    const { dispatch } = this.props;
    dispatch({
      type: "myAccount/getPayStatistic",
      payload: this.statsticInfo()
    });
  }
  // 应付对账统计请求参数
  statsticInfo() {
    const search = {
      financeOrgId: this.state.financialOrg
      // saleOrgId:'2bf636e8-c445-4aad-8dd1-424581611e2a',
    };
    if (this.state.saleOrgChange) {
      search.saleOrgId = this.state.saleOrgChange;
    }
    if (this.state.startTime && this.state.endTime) {
      search.startTime = this.state.startTime;
      search.endTime = this.state.endTime;
    }

    return search;
  }

  // 应付对账列表请求参数
  payListInfo() {
    const search = {
      search_EQ_financeOrg: this.state.financialOrg
    };
    if (this.state.saleOrgChange) {
      search.search_EQ_saleOrg = this.state.saleOrgChange;
    }
    if (this.state.startTime && this.state.endTime) {
      search.search_GTE_creationTime_date = new Date(
        this.state.startTime
      ).getTime(); //开始时间
      search.search_LT_creationTime_date = new Date(
        this.state.endTime
      ).getTime(); //结束时间
    }
    if (this.state.searchText) {
      search.search_LIKE_code = `%${this.state.searchText}%`;
    }
    return search;
  }

  pageChange(page = 0, pageSize = 10) {
    const { dispatch } = this.props;

    let searchConditions = {};
    const pageInfo = {
      page: page,
      size: pageSize
    };

    searchConditions = pageInfo;
    searchConditions = { ...pageInfo, ...this.payListInfo() };
    dispatch({
      type: "myAccount/getPayList",
      payload: searchConditions
    }).finally(() => {
      this.setState({
        tabloading: false
      });
    });
  }

  // 应收组织切换
  financialOrgChange(value) {
    this.state.financialOrg = value;
    this.setState({
      financialOrg: value
    });
    this.searchPayStatstic();
    this.pageChange(0, 10);
  }
  // 销售组织切换
  saleOrgChange(value) {
    this.state.saleOrgChange = value;
    this.setState({
      saleOrgChange: value
    });
    this.searchPayStatstic();
    this.pageChange(0, 10);
  }
  // 搜索
  searchBtn(e) {
    // searchText
    this.state.searchText = e;
    this.setState({
      searchText: e
    });
    this.pageChange(0, 10);
  }
  // 时间change
  orderDateChange(dates, dateStrings) {
    this.state.startTime = dateStrings[0];
    this.state.endTime = dateStrings[1];
    this.setState({
      startTime: dateStrings[0],
      endTime: dateStrings[1]
    });
    this.pageChange(0, 10);
  }
  render() {
    const {
      moduleKey,
      organizations,
      payStatistic,
      payList,
      // finanorgsBySaleorgs
      finanorgsBySaleorgsDistinct
    } = this.props;
    const { saleOrgChange, tabloading, CostReconcileList } = this.state;
    const dateFormat = "YYYY-MM-DD";
    const columns = [
      {
        title: "销售组织",
        align: "left",
        width: "130px",
        dataIndex: "date",
        key: "date",
        render: (text, record, index) => {
          return <span>{record.saleOrgName}</span>;
        }
      },
      {
        title: "期初余额",
        align: "right",
        width: "180px",
        dataIndex: "name",
        key: "name",
        render: (text, record, index) => {
          return <span>{record.initialBalance}</span>;
        }
      },
      {
        title: "本期发生",
        align: "right",
        width: "220px",
        dataIndex: "money",
        key: "money",
        render: (text, record, index) => {
          return <span>{record.occurrenceOfThisPeriod}</span>;
        }
      },
      {
        title: "本期收款",
        align: "right",
        width: "250px",
        dataIndex: "upgradeNum",
        key: "upgradeNum",
        render: (text, record, index) => {
          return <span>{record.currenTreceipts}</span>;
        }
      },
      {
        title: "期末余额",
        align: "right",
        className: "pr210",
        dataIndex: "finalBalance",
        key: "finalBalance",
        render: (text, record, index) => {
          return <span>{record.finalBalance}</span>;
        }
      }
    ];

    const financeOrg = finanorgsBySaleorgsDistinct &&
      finanorgsBySaleorgsDistinct.length > 0 && (
        <Select
          onChange={this.financialOrgChange.bind(this)}
          defaultValue={finanorgsBySaleorgsDistinct[0].finanOrgName}
          style={{ width: 160, height: 28 }}
        >
          {finanorgsBySaleorgsDistinct &&
            finanorgsBySaleorgsDistinct.length > 0 &&
            finanorgsBySaleorgsDistinct.map(data => {
              return (
                <Select.Option value={data.finanOrgId} key={data.finanOrgId}>
                  {data.finanOrgName}
                </Select.Option>
              );
            })}
        </Select>
      );
    return (
      <div className={styles.cartListBox}>
        {/* <div className={styles.classHead}>
          <span className={styles.nameIndex}>首页</span>
          <span className={styles.nameChild}>
            <Icon type="right" className={styles.nameIcon} />对账中心
          </span>
          <span className={styles.nameChild}>
            <Icon type="right" className={styles.nameIcon} />应付对账
          </span>
        </div> */}
        {/* 搜索项 */}
        <div className={styles.searchCotent}>
          <div className={styles.searchBox}>
            <div>
              <span className={styles.searchName}>应收组织</span>
              {financeOrg}
            </div>
            <div>
              <span className={styles.searchName}>销售组织</span>
              <Select
                onChange={this.saleOrgChange.bind(this)}
                defaultValue="全部"
                style={{ width: 160, height: 28 }}
              >
                {organizations &&
                  organizations.length > 0 &&
                  organizations.map(data => {
                    return (
                      <Select.Option
                        value={data.saleOrganizationId}
                        key={data.saleOrganizationId}
                      >
                        {data.saleOrganizationName}
                      </Select.Option>
                    );
                  })}
              </Select>
            </div>
            <div style={{ width: "305px", marginRight: "15px" }}>
              <span className={styles.searchName} style={{ width: "70px" }}>
                日期范围
              </span>
              <DatePicker.RangePicker
                className={styles.searchData}
                onChange={this.orderDateChange.bind(this)}
                defaultValue={[
                  moment(this.state.startTime, dateFormat),
                  moment(this.state.endTime, dateFormat)
                ]}
                format={dateFormat}
              />
            </div>
          </div>
          <div className={styles.searchBox} style={{ marginTop: "20px" }}>
            <div>
              <span className={styles.searchName}>费用单号</span>
              <Input.Search
                placeholder="请输入单号"
                enterButton="搜索"
                onSearch={this.searchBtn.bind(this)}
                className={styles.searchBtn}
                style={{ width: 290 }}
              />
            </div>
          </div>
        </div>
        {/* 余额 */}
        <div>
          <Table
            className={styles.customerTable}
            columns={columns}
            dataSource={payStatistic}
            pagination={false}
          />
        </div>
        {/* 列表 */}
        <CartListComp
          goodsData={payList}
          //   {...this.props}
          pageChange={this.pageChange.bind(this)}
          moduleKey={moduleKey}
        />
        {/* 列表 结束 */}
      </div>
    );
  }
}

export default connect(state => ({
  organizations: state.myAccount.suppliersJurisdiction,
  // finanorgsBySaleorgs: state.myAccount.finanorgsBySaleorgs,
  finanorgsBySaleorgsDistinct: state.myAccount.finanorgsBySaleorgsDistinct, //排重后的财务组织
  payStatistic: state.myAccount.payStatistic, // 应付对账统计页
  payList: state.myAccount.payList, // 应付对账详情
  moduleKey: "DealReconcile" // 区分模块
}))(DealReconcile);
