import React, { PureComponent } from "react";
import { connect } from "dva";
import { Progress, Icon } from "antd";
import styles from "./index.less";
import BreadcrumbPackage from "@/components/BreadcrumbPackage/index";
import { getCustomer } from '@/utils/request';

class Credit extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    const { dispatch, location } = this.props;
    const customerId = location[`customerId`];
    dispatch({
      type: "credit/getCreditData",
      payload: {
        customerId: getCustomer().id
      }
    });
  }
  dataReplace = creidata => {
    const mapObj = {},
      mapArr = [];
    for (const item of creidata) {
      mapObj[item.saleOrgId]
        ? mapObj[item.saleOrgId].push(item)
        : (mapObj[item.saleOrgId] = [].concat(item));
    }
    for (const val of Object.keys(mapObj)) {
      const arrObj = {};
      arrObj.saleOrgId = val;
      arrObj.saleOrgName = mapObj[val][0].saleOrgName;
      arrObj.financialOrg = mapObj[val][0].organizationName;
      arrObj.data = mapObj[val];
      mapArr.push(arrObj);
    }
    return mapArr;
  };
  render() {
    let { creditData } = this.props;
    if (!creditData) return null;
    // 对已有的信息格式进行转换
    creditData = this.dataReplace(creditData);
    // 对占有比例进行转换
    const checkPrecent = item => {
      const percent = item.creditBalance / item.creditLimit * 100;
      if (percent < 0) {
        return 0;
      } else {
        return percent;
      }
    };
    // 封装一个产品线
    const creditListBoxHandle = proLine => {
      if (!proLine) return null;
      const html = proLine.map(item => (
        <div className={styles.creditListBox}>
          <Progress
            type="circle"
            percent={checkPrecent(item)}
            format={() => (
              <div>
                <p className={styles.progressFont}>
                  {`￥${item.creditBalance.toFixed(2)}`}
                </p>
                <span className={styles.progressYue}>余额</span>
              </div>
            )}
            status="exception"
            className={styles.progressBox}
            gapPosition="bottom"
            width="160px"
          />
          <div className={styles.orgProLineBox}>
            <div className={styles.orgProLineName}>{item.productGroupName}</div>
            <div className={styles.orgProQuota}>
              <p className={styles.quotaName}>额度</p>
              <p className={styles.quotaMoney}>
                {`￥${item.creditLimit.toFixed(2)}`}
              </p>
            </div>
            <div className={styles.orgProOccu}>
              <p className={styles.occuName}>占用</p>
              <p className={styles.occuMoney}>
                {`￥${(item.creditLimit - item.creditBalance).toFixed(2)}`}
              </p>
            </div>
          </div>
        </div>
      ));
      return html;
    };
    // 产品线框
    const creditDataHandle = () => {
      if (!creditData) return <div>暂未维护信用额度</div>;
      const html = creditData.map(item => (
        <div className={styles.childBox}>
          <div className={styles.organizationName}>
            <span>{`法人组织：${item.financialOrg}`}</span>
            <span style={{ marginLeft: "64px" }}>{`销售组织：${item.saleOrgName}`}</span>
          </div>
          {creditListBoxHandle(item.data)}
        </div>
      ));
      return html;
    };
    return (
      <div className={styles.creditBox}>
        {/* <BreadcrumbPackage /> */}
        {creditDataHandle()}
      </div>
    );
  }
}
export default connect(state => ({
  creditData: state.credit.creditData
}))(Credit);
