import React, { Component } from 'react';
import { Col, Row, Icon } from 'antd';

class DashboardIndexAdmin extends Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props, context) {
    super(props, context);
  }

  render() {
    return (<p> hello admin!</p>);
    const allShortcuts = [
      { type: 'purchase', title: '采购列表' },
      { type: 'sale', title: '销售列表' },
      { type: 'other', title: '其他列表' },
      { type: 'document', title: '单据查询' },
      { type: 'customer', title: '客户列表' },
      { type: 'supplier', title: '供应商列表' },
      { type: 'product', title: '产品列表' },
      { type: 'inventory', title: '库存查询' },
    ].chunk(4);
    const props = $.extend({}, this.props);
    let outlet = null;

    if (this.props.loading) {
      outlet = (<Icon type="loading" className="search-loading" />);
    } else {
      if (props[`${props.activeTab}Documents`].length > 0) {
        outlet = (<Row>
          <Col span="24">
            {props[`${props.activeTab}Documents`].each((doc) => {
              let key = `${doc.type}_${doc.id}`;
              <Document key={key} document={doc} type="approving" />
            })}
          </Col>
        </Row>);
      } else {
        let column = (<p className="ik-title-font ik-margin-top-20 ik-title-color">还没有审批通过的单据哦~</p>);
        if (props.activeTab ==='noapproval') {
          column = (<div>
            <p className="ik-title-font ik-margin-top-20 ik-title-color">
              还没有单据哦，快去新增吧
            </p>
          </div>);
        } else if (props.activeTab === 'approving') {
          column = (<p className="ik-title-font ik-margin-top-20 ik-title-color">
            真棒！所有单据都审批完了
          </p>);
        } else if(!props.hasPermission) {
          column = (<p className="ik-title-font ik-margin-top-20 ik-title-color">
            亲，你没有权限操作此功能哦
          </p>);
        }

        outlet = (<Row type="flex" justify="center" className="ik-width-percent-100 ik-padding-bottom-20">
          <Col span="16" className="ik-text-center">
            {column}
          </Col>
        </Row>);
      }
    }
    return (
      <Row className="ik-container-background">
        <Row id="action-sheet-button-container">
          <Col span="6" offset="18" className="ik-padding-top-20">
            <div
              className="action-sheet-button"
              onClick={props.openActionsheet.bind(null, 'new')}>
              <Icon type="plus-circle" />
            </div>
          </Col>
        </Row>
        <div id="action-sheet-wrapper">
          <IKActionSheet
            buttons={props.current_buttons}
            visible={props.actionSheetVisible}
            onHidden={props.actionSheetHidden}
            onSearch={props.handleSearch}/>
        </div>
        <Col span="24">
          <Row className="ik-background-white">
            <Col span="12" className="statistic-container ik-padding-vertical-20">
              <Col span="8">
                <svg className="purchase-color">
                  <use xlinkHref={props.icons.purchase}/>
                </svg>
              </Col>
              <Col span="16">
                <p className="ik-content-font ik-content-color">
                  上周采购总额
                </p>
                <p className="ik-title-font if-title-color">
                  {formatMoney(props.statistic.purchase_last_week)}
                </p>
              </Col>
            </Col>
            <Col span="12" className="statistic-container ik-padding-vertical-20">
              <Col span="8">
                <svg className="purchase-color">
                  <use xlinkHref={props.icons.purchase} />
                </svg>
              </Col>
              <Col span="16">
                <p className="ik-content-font ik-content-color">
                  本周采购总额
                </p>
                <p className="ik-title-font if-title-color">
                  {formatMoney(props.statistic.purchase_current_week)}
                </p>
              </Col>
            </Col>
          </Row>
          <Row className="ik-background-white">
            <Col span="12" className="statistic-container ik-padding-vertical-20">
              <Col span="8">
                <svg className="sale-color">
                  <use xlinkHref={props.icons.sale} />
                </svg>
              </Col>
              <Col span="16">
                <p className="ik-content-font ik-content-color">
                  上周销售总额
                </p>
                <p className="ik-title-font if-title-color">
                  {formatMoney(props.statistic.sale_last_week)}
                </p>
              </Col>
            </Col>
            <Col span="12" className="statistic-container ik-padding-vertical-20">
              <Col span="8">
                <svg className="sale-color">
                  <use xlinkHref={props.icons.sale} />
                </svg>
              </Col>
              <Col span="16">
                <p className="ik-content-font ik-content-color">
                  上周销售总额
                </p>
                <p className="ik-title-font if-title-color">
                  {formatMoney(props.statistic.sale_current_week)}
                </p>
              </Col>
            </Col>
          </Row>
          <Row className="ik-background-white">
            <Col span="12" className="statistic-container ik-padding-vertical-20">
              <Col span="8">
                <svg className="inventory-color">
                  <use xlinkHref={props.icons.inventory} />
                </svg>
              </Col>
              <Col span="16">
                <p className="ik-content-font ik-content-color">
                  库存总量
                </p>
                <p className="ik-title-font if-title-color">
                  {formatMoney(props.statistic.total_inventory)}
                </p>
              </Col>
            </Col>
            <Col span="12" className="statistic-container ik-padding-vertical-20">
              <Col span="8">
                <svg className="inventory-color">
                  <use xlinkHref={props.icons.inventory} />
                </svg>
              </Col>
              <Col span="16">
                <p className="ik-content-font ik-content-color">
                  库存种类
                </p>
                <p className="ik-title-font if-title-color">
                  {formatMoney(props.statistic.total_variety)}
                </p>
              </Col>
            </Col>
          </Row>
          <Row className="ik-background-white">
            <Col span="12" className="statistic-container ik-padding-vertical-20">
              <Col span="8">
                <svg className="debt-color">
                  <use xlinkHref={props.icons.customer_debt} />
                </svg>
              </Col>
              <Col span="16">
                <p className="ik-content-font ik-content-color">
                  客户欠款
                </p>
                <p className="ik-title-font if-title-color">
                  {formatMoney(props.statistic.customer_debt)}
                </p>
              </Col>
            </Col>
            <Col span="12" className="statistic-container ik-padding-vertical-20">
              <Col span="8">
                <svg className="debt-color">
                  <use xlinkHref={props.icons.supplier_debt} />
                </svg>
              </Col>
              <Col span="16">
                <p className="ik-content-font ik-content-color">
                  供应商欠款
                </p>
                <p className="ik-title-font if-title-color">
                  {formatMoney(props.statistic.supplier_debt)}
                </p>
              </Col>
            </Col>
          </Row>
          <Row className="shortcut-wrapper">
            {allShortcuts.each((shortcuts) => {
              shortcuts.each((shortcut) => {
                <Col span="6">
                  <a
                    href="javascript:void(0);"
                    className="shortcut-item"
                    onClick={props.openActionsheet.bind(null, shortcut.type)}>
                    <svg>
                      <use xlinkHref={props.icons[shortcut.type]} />
                    </svg>
                    <p>{shortcut.title}</p>
                  </a>
                </Col>
              });
            })}
          </Row>
          <Row className="document-header">
            {props.titles.each((tab)=> {
              let active = 'document-header-item';
              if (props.activeTab === tab.type) {
                active = 'document-header-item active';
              }
              <Col
                span={(24 / props.titles.length)}
                className={active}
                onClick={props.toggleTab.bind(null, tab.type)}>
                <p className="document-title">
                  {tab.title}
                </p>
              </Col>
            })}
          </Row>
          {outlet}
        </Col>
      </Row>
    );
  }
}

export default DashboardIndexAdmin;