/**
 * 终端-计量信息
 */

import React from 'react';
import { useSetState } from 'ahooks';
import moment from 'moment';
import { VMRangePicker } from '../../../vm-filter';
import SubTabs, { SubTabPane } from '../../../vm-sub-tabs';
import ChartJccc from './ChartJccc';
import ChartJcqs from './ChartJcqs';
import List from './List';
import './index.less';

import chart from '../../imgs/chart.png';
import chartActive from '../../imgs/chart_active.png';
import list from '../../imgs/list.png';
import listActive from '../../imgs/list_active.png';
import zjcl from '../../imgs/zjcl.png';
import zjccc from '../../imgs/zjccc.png';
import rjjcl from '../../imgs/rjjcl.png';
import sjnl from '../../imgs/sjnl.png';

interface TypeProps {
    id: string;
}

const Metering: React.FC<TypeProps> = props => {
    const { id } = props;
    window.console.log(id);
    const [state, setState] = useSetState({
        startDate: moment()
            .startOf('D')
            .format('YYYY-MM-DD HH:mm:ss'),
        endDate: moment()
            .endOf('D')
            .format('YYYY-MM-DD HH:mm:ss'),
        tabKey: '1',
    });
    const { startDate, endDate, tabKey } = state;

    const handleDateChange = (start: string, end: string) => {
        setState({
            startDate: start,
            endDate: end,
        });
    };

    return (
        <div className="metering">
            <div className="metering-head">
                <SubTabs
                    onChange={(key: string) => {
                        setState({
                            tabKey: key,
                        });
                    }}
                    activeKey={tabKey}
                >
                    {[
                        {
                            name: (
                                <div>
                                    <img src={tabKey === '1' ? listActive : list} />
                                    图表
                                </div>
                            ),
                            key: '1',
                        },
                        {
                            name: (
                                <div>
                                    <img src={tabKey === '2' ? chartActive : chart} />
                                    列表
                                </div>
                            ),
                            key: '2',
                        },
                    ].map((ele: any) => (
                        <SubTabPane subKey={ele.key} key={ele.key} tab={ele.name} />
                    ))}
                </SubTabs>
                <div>
                    <VMRangePicker
                        value={[moment(startDate), moment(endDate)]}
                        onChange={(dates: any) =>
                            dates &&
                            handleDateChange(
                                moment(dates[0]).format('YYYY-MM-DD HH:mm:ss'),
                                moment(dates[1]).format('YYYY-MM-DD HH:mm:ss'),
                            )
                        }
                    />
                </div>
            </div>
            {tabKey === '1' && (
                <div className="metering-content">
                    <div className="metering-content-main">
                        <MainItem src={zjcl} name="总进厂量" value={572.2} unit="吨" />
                        <MainItem src={zjccc} name="总进场车次" value={50} unit="次" />
                        <MainItem src={rjjcl} name="日均进厂量" value={50} unit="吨" />
                        <MainItem src={sjnl} name="设计能力" value={50} unit="吨/日" />
                    </div>
                    <div className="metering-content-charts">
                        <div className="metering-content-charts-jcqs">
                            <ChartJcqs />
                        </div>
                        <div className="metering-content-charts-jccc">
                            <ChartJccc />
                        </div>
                    </div>
                </div>
            )}
            {tabKey === '2' && <List khData={[]} />}
        </div>
    );
};

export const MainItem = (props: { src: string; name: string; value: number; unit: string }) => {
    const { src, name, value, unit } = props;
    return (
        <div className="metering-content-main-item">
            <img src={src} />
            <div>
                <div className="metering-content-main-item--name">{name}</div>
                <div className="metering-content-main-item--value">
                    <span>{value}</span>
                    {unit}
                </div>
            </div>
        </div>
    );
};

export default Metering;
