/**
 * 通用-考核信息
 */

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 AppraisalBase from './AppraisalBase';
import AppraisalInfo from './AppraisalTop5';
import Zgxxhz from './Zgxxhz';
import Wtlx from './Wtlx';
import List from './List';
import { BaseService } from './api';
import './style';

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';

interface TypeProps {
    id: string;
}

const Appraisal: React.FC<TypeProps> = props => {
    const { id } = props;
    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 {
        khData,
        zgData,
        checkInfo,
        deductPoint,
        orderInfo,
        orderCategory,
    } = BaseService.useAppraisal(id, startDate, endDate);
    const handleDateChange = (start: string, end: string) => {
        setState({
            startDate: start,
            endDate: end,
        });
    };

    return (
        <div className="appraisal">
            <div className="appraisal-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 className="appraisal-head-date">
                    <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="appraisal-content-chart">
                    <div className="appraisal-content-kh">
                        <AppraisalBase checkInfo={checkInfo} />
                        <AppraisalInfo deductPoint={deductPoint} />
                    </div>
                    <div className="appraisal-content-zg">
                        <Zgxxhz orderInfo={orderInfo} />
                        <Wtlx orderCategory={orderCategory} />
                    </div>
                </div>
            )}
            {tabKey === '2' && <List khData={khData} zgData={zgData} />}
        </div>
    );
};

export default Appraisal;
