/*
 * @Author: lusx 
 * @Date: 2020-04-02 11:45:21 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-04-24 16:12:13
 */
import React from 'react';
import { Row, Col, Progress, Tooltip } from 'antd';
import { inject, observer } from 'mobx-react';
import chunk from 'lodash/chunk';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
export const Count = inject('projectCardStore')(observer((props) => {
    const { jxz, rwzs, wcl, wks, xmjd, yq, yql, ywc } = props.projectCardStore.statistics;
    const top = [{ label: getLabel('31411','项目进度'), value: xmjd, status: "", key: "0" },
    { label: getLabel('30447','完成率'), value: wcl, status: "success", key: "1" },
    { label: getLabel('518313','延期率'), value: yql, status: "exception", key: "2" }];
    const boottom = [{ label: getLabel('383462','未开始'), value: wks, key: "0" },
    { label: getLabel('1960','进行中'), value: jxz, key: "1" },
    { label: getLabel('23774','已完成'), value: ywc, key: "2" },
    { label: getLabel('2244','延期'), value: yq, key: "4" }];
    return (
        <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@lztwe2`}>
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@bx6uph`} style={{ textAlign: "center", borderBottom: " 1px solid  rgb(241, 236, 236)", height: "120px", lineHeight: "100px" }}>
                {top.length > 0 && top.map(t => (
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wguqpj@${t.key}`} span="8" key={t.key}>
                        <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@yud5oa@${t.key}`} title={typeof t.value === 'number' && t.value.toFixed(2)+"%"}>
                            <Progress ecId={`${this && this.props && this.props.ecId || ''}_Progress@wfsh8w@${t.key}`} type="circle" width={80} percent={t.value} status={t.status} format={() => t.label} />
                        </Tooltip>
                    </Col>
                ))}
            </Row>
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mwbazl`} style={{ textAlign: "center", padding: "0", height: "70px", paddingTop: "15px" }}>
                {
                    boottom.length > 0 && boottom.map((cell) => (
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@rx3tsc@${cell.key}`} key={cell.key} span={24 / boottom.length}>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0ziw1u@${cell.key}`} style={{ fontSize: "20px" }}>{cell.value}</Row>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5tzlry@${cell.key}`}>{cell.label}</Row>
                        </Col>
                    ))
                }
            </Row>
        </React.Fragment >)
}))