/**
 * 收集点-收运信息
 */
import React, { useEffect } from 'react';
import { useSetState } from 'ahooks';
import moment from 'moment';
import SubTitle from '../../../vm-sub-title';
import { SubTabsLine } from '../../../vm-sub-tabs';
import { VMRangePicker } from '../../../vm-filter';
import ImageText from '../../../vm-image-text';
import VMTable from '../../../vm-table';
import Ljcsl from './Ljcsl';
import { SyService } from '../../api';

import './index.less';

import demo from '../../imgs/all_rate.png';
export interface SyProps {
    id: string;
}

interface summaryTypes {
    planNum: number;
    collectNum: number;
    rate: number;
    bucketNum: number;
    showWeight: boolean;
    weight: number;
}

const summaryData: summaryTypes = {
    planNum: 0,
    collectNum: 0,
    rate: 0,
    bucketNum: 0,
    showWeight: false,
    weight: 0,
};

const SyInfo: React.FC<SyProps> = props => {
    const { id } = props;
    const [state, setState] = useSetState({
        filterKey: '',
        summary: summaryData,
        startDate: moment().format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD'),
        pagination: {
            current: 1,
            pageSize: 10,
            total: 0,
        },
    });
    const { summary, filterKey, startDate, endDate, pagination } = state;
    const { planNum, collectNum, rate, bucketNum, showWeight, weight } = summary;

    const { baseInfo, collectWeight } = SyService.useBaseInfo(id, startDate, endDate);
    const { records } = SyService.useRecordInfo(id, startDate, endDate, pagination.current - 1);

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

    useEffect(() => {
        if (baseInfo.length > 0) {
            const data = baseInfo.find((ele: any) => ele.productTypeId === (filterKey || null));
            setState({
                summary: data,
            });
        }
    }, [baseInfo, filterKey]);

    const columns = [
        {
            title: '收集日期',
            dataIndex: 'collectDay',
            key: 'collectDay',
        },

        {
            title: '计划收集频次',
            dataIndex: 'planCollectNums',
            key: 'planCollectNums',
        },
        {
            title: '实际频次',
            dataIndex: 'collectNums',
            key: 'collectNums',
        },
        {
            title: '收集状态',
            dataIndex: 'collectStatusStr',
            key: 'collectStatusStr',
        },
        {
            title: '收集桶数(个)',
            dataIndex: 'bucketNum',
            key: 'bucketNum',
        },
        {
            title: '收集重量(kg)',
            dataIndex: 'weight',
            key: 'weight',
        },
    ];
    let newColumns = columns;
    if (showWeight) {
        newColumns.splice(1, 0, {
            title: '垃圾类型',
            dataIndex: 'productTypeName',
            key: 'productTypeName',
        });
    }

    const pageChange = (page: number) => {
        setState({
            pagination: {
                ...pagination,
                current: page,
            },
        });
    };

    const tableProps = {
        pagination: {
            ...pagination,
            total: records.total,
            defaultPageSize: 10,
            onChange: pageChange,
        },
        height: 280,
        dataSource: records.rows,
    };

    return (
        <div className="cp-syinfo">
            <div className="cp-syinfo-head">
                <SubTabsLine
                    items={baseInfo?.map(
                        (ele: { productTypeId: string; productTypeName: string }) => ({
                            key: ele?.productTypeId || '',
                            label: ele.productTypeName,
                        }),
                    )}
                    activeKey={filterKey}
                    onChange={key => {
                        setState({
                            filterKey: key,
                        });
                    }}
                />
                <VMRangePicker
                    value={[moment(startDate), moment(endDate)]}
                    onChange={(dates: any) =>
                        dates &&
                        handleDateChange(
                            moment(dates[0]).format('YYYY-MM-DD'),
                            moment(dates[1]).format('YYYY-MM-DD'),
                        )
                    }
                />
            </div>
            {showWeight ? (
                <>
                    <div className="cp-syinfo-base">
                        <div className="cp-syinfo-base-weight">
                            <SubTitle title="汇总信息" />
                            <div className="cp-syinfo-base-weight-item">
                                <ImageText
                                    src={demo}
                                    name="计划收集"
                                    value={planNum}
                                    unit="次"
                                    color="active"
                                    style={{
                                        marginRight: '0',
                                        width: '150px',
                                        marginBottom: '24px',
                                    }}
                                />
                                <ImageText
                                    src={demo}
                                    name="实际收集"
                                    value={collectNum}
                                    unit="次"
                                    color="active"
                                    style={{
                                        marginRight: '0',
                                        width: '150px',
                                        marginBottom: '24px',
                                    }}
                                />
                                <ImageText
                                    src={demo}
                                    name="收集率"
                                    value={rate}
                                    unit="%"
                                    color="active"
                                    style={{
                                        marginRight: '0',
                                        width: '150px',
                                        marginBottom: '24px',
                                    }}
                                />
                                <ImageText
                                    src={demo}
                                    name="收集桶数"
                                    value={bucketNum}
                                    unit="个"
                                    color="active"
                                    style={{
                                        marginRight: '0',
                                        width: '150px',
                                        marginBottom: '24px',
                                    }}
                                />
                                <ImageText
                                    src={demo}
                                    name="收集重量"
                                    value={weight}
                                    unit="kg"
                                    color="active"
                                    style={{
                                        marginRight: '0',
                                        width: '150px',
                                        marginBottom: '24px',
                                    }}
                                />
                            </div>
                        </div>
                        <div className="cp-syinfo-base-chart">
                            <SubTitle title="垃圾产生量" />
                            <Ljcsl data={collectWeight} />
                        </div>
                    </div>
                </>
            ) : (
                <div className="cp-syinfo-base">
                    <ImageText
                        src={demo}
                        name="计划收集"
                        value={planNum}
                        unit="次"
                        color="active"
                    />
                    <ImageText
                        src={demo}
                        name="实际收集"
                        value={collectNum}
                        unit="次"
                        color="active"
                    />
                    <ImageText src={demo} name="收集率" value={rate} unit="%" color="active" />
                    <ImageText
                        src={demo}
                        name="收集桶数"
                        value={bucketNum}
                        unit="个"
                        color="active"
                    />
                </div>
            )}
            <div className="cp-syinfo-table">
                <VMTable columns={newColumns} {...tableProps} />
            </div>
        </div>
    );
};

export default SyInfo;
