import React, { useEffect } from 'react';
import { useSetState, useRequest } from 'ahooks';
import { UnorderedListOutlined, ClockCircleOutlined } from '@ant-design/icons';
import { message } from 'antd';
import moment from 'moment';
import PropTypes from 'prop-types';
import useSettings from '../vm-hooks/useSettings';
import { VMDatePicker } from '../vm-filter';
import StatCollection from '../vm-stat-collection';
import VMTable, { ExportBtn } from '../vm-table';
import VMChart from '../vm-chart';
import SubTabs, { SubTabPane } from '../vm-sub-tabs';
import { WeighData } from './api';
import './style';
import projectDarkImg from '../../image/project-dark.png';
import projectImg from '../../image/project.png';
import realDarkImg from '../../image/real-dark.png';
import realImg from '../../image/real.png';
const WeighContent = props => {
    const { id, code, seed } = props;
    const [state, setState] = useSetState({
        startTime: moment().subtract(1, 'd'),
        endTime: moment(),
        ids: [],
        tabKey: 'base',
    });
    useEffect(() => {
        if (seed)
            setState({
                startTime: moment().subtract(1, 'd'),
                endTime: moment(),
                ids: [],
                tabKey: 'base',
            });
    }, [seed]);
    const { tableProps } = useRequest(
        ({ current, pageSize }) =>
            WeighData.useWeighList(
                id,
                state.startTime.format('YYYY-MM-DD 00:00:00'),
                state.endTime.format('YYYY-MM-DD 23:59:59'),
                current - 1,
                pageSize,
                code,
            ),
        {
            defaultPageSize: 10,
            paginated: true,
            refreshDeps: [state.startTime, state.endTime, id, code],
        },
    );
    const { isDark } = useSettings();
    const statInfo = WeighData.useWeighStat(
        id,
        state.startTime.format('YYYY-MM-DD 00:00:00'),
        state.endTime.format('YYYY-MM-DD 23:59:59'),
        state.page,
        state.size,
        code,
    );
    const statData = [
        {
            icon: isDark ? projectDarkImg : projectImg,
            label: '出场车次',
            value: statInfo?.count,
            unit: '次',
        },
        {
            icon: isDark ? realDarkImg : realImg,
            label: '出场量',
            value: statInfo?.netWeightTotal,
            unit: '吨',
        },
    ];
    const handleDateChange = (startTime, endTime) => {
        setState({ startTime, endTime });
    };
    const handleExport = type => {
        let downloadAll = false;
        let ids = '';
        switch (type) {
            case 'all':
                downloadAll = true;
                break;
            case 'select-rows':
                ids = state.ids.join(',');
                break;
            case 'current-page':
                ids = tableProps?.dataSource?.map(i => i.id).join(',');
                break;
            default:
                break;
        }

        if (!downloadAll && ids.length === 0) {
            message.warning('当前没有选中行');
            return;
        }
        WeighData.useWeighExport({
            startTime: state.startTime.format('YYYY-MM-DD 00:00:00'),
            endTime: state.endTime.format('YYYY-MM-DD 23:59:59'),
            downloadAll,
            downloadIds: ids,
            columnFields:
                'id,carNo,icCode,productName,sourceUnit,area,areaZone,transportUnit,disposeUnitName,grossTimeStr,tareTimeStr,timeStr,grossWeight,tareWeight,netWeight,productToWhere',
            columnNames:
                '标识,车牌号,卡号,货物名称,发货单位,区域,街道,运输单位,处置单位,进厂时间,出厂时间,称重时间,毛重（吨）,皮重（吨）,净重（吨）,货物流向',
        });
    };
    const handleTabChange = tabKey => {
        setState({ tabKey });
    };
    return (
        <div className="muck-metering-content">
            <SubTabs onTabClick={handleTabChange}>
                <SubTabPane
                    tab={
                        <span>
                            <UnorderedListOutlined />
                            列表
                        </span>
                    }
                    key="base"
                >
                    <div className="top-bar">
                        <StatCollection items={statData} />
                    </div>
                    <div className="time">
                        <VMTable
                            columns={columns}
                            rowSelection={{
                                selectedRowKeys: state.ids,
                                onChange: rowKeys => setState({ ids: rowKeys }),
                            }}
                            {...tableProps}
                        />
                    </div>
                </SubTabPane>
                <SubTabPane
                    tab={
                        <span>
                            <ClockCircleOutlined />
                            图表
                        </span>
                    }
                    key="prop"
                >
                    <div className="top-bar">
                        <StatCollection items={statData} />
                    </div>
                    <div className="chart-container">
                        <TrendChart
                            startTime={state.startTime.format('YYYY-MM-DD 00:00:00')}
                            endTime={state.endTime.format('YYYY-MM-DD 23:59:59')}
                            code
                        />
                    </div>
                </SubTabPane>
            </SubTabs>
            <div className="right-top">
                <VMDatePicker
                    value={[state.startTime, state.endTime]}
                    onChange={dates => dates && handleDateChange(dates[0], dates[1])}
                    style={{ marginRight: 10 }}
                />
                <ExportBtn
                    onClick={handleExport}
                    items={[
                        {
                            label: '导出当前页',
                            key: 'current-page',
                        },
                        {
                            label: '导出全部',
                            key: 'all',
                        },
                    ]}
                />
            </div>
        </div>
    );
};
const columns = [
    {
        title: '车牌号',
        dataIndex: 'carNo',
        key: 'carNo',
    },
    {
        title: '运输单位',
        dataIndex: 'transportUnit',
        key: 'transportUnit',
    },
    {
        title: '行政区划',
        dataIndex: 'divisionName',
        key: 'divisionName',
    },
    {
        title: '垃圾类型',
        dataIndex: 'productName',
        key: 'productName',
    },
    {
        title: '货物流向',
        dataIndex: 'productToWhere',
        key: 'productToWhere',
    },
    {
        title: '毛重（吨）',
        dataIndex: 'grossWeight',
        key: 'grossWeight',
    },
    {
        title: '皮重（吨）',
        dataIndex: 'tareWeight',
        key: 'tareWeight',
    },
    {
        title: '净重（吨）',
        dataIndex: 'netWeight',
        key: 'netWeight',
    },
];

const TrendChart = props => {
    const { id, code } = props;
    const { startTime, endTime } = props;
    const { isDark } = useSettings();
    const data = WeighData.useEchartsList(id, startTime, endTime, code) || [];
    const option = {
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['出场车次', '出场量'],
            textStyle: {
                fontSize: 12,
                color: isDark ? 'white' : '#666',
            },
        },
        xAxis: {
            type: 'category',
            data: data?.map(item => item?.dateValue),
            axisLabel: {
                fontFamily: 'PingFangSC-Regular',
                color: isDark ? '#fff8' : 'rgba(0, 0, 0, 0.5)',
            },
            axisLine: {
                lineStyle: {
                    type: 'dashed',
                    color: isDark ? '#fff8' : 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
        yAxis: [
            {
                type: 'value',
                nameTextStyle: {
                    fontFamily: 'PingFangSC-Regular',
                    color: isDark ? '#fff8' : '#0008',
                },
                axisLabel: {
                    fontFamily: 'PingFangSC-Regular',
                    color: isDark ? '#fff8' : '#0008',
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: isDark ? '#fff4' : '#0004',
                    },
                },
            },
            {
                type: 'value',
                nameTextStyle: {
                    fontFamily: 'PingFangSC-Regular',
                    color: isDark ? '#fff8' : '#0008',
                },
                axisLabel: {
                    fontFamily: 'PingFangSC-Regular',
                    color: isDark ? '#fff8' : '#0008',
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: isDark ? '#fff4' : '#0004',
                    },
                },
            },
        ],
        series: [
            {
                name: '出场车次',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function(value) {
                        return value + ' 次';
                    },
                },
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }],
                },
                data: data?.map(item => item?.carNum),
                itemStyle: {
                    normal: {
                        color: '#00B689', //改变折线点的颜色
                        lineStyle: {
                            color: '#00B689', //改变折线颜色
                        },
                    },
                },
            },
            {
                name: '出场量',
                type: 'bar',
                barWidth: '10%',
                tooltip: {
                    valueFormatter: function(value) {
                        return value + ' 吨';
                    },
                },
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }],
                },
                data: data?.map(item => item?.netWeight),
                itemStyle: {
                    // 使用方法二的写法
                    color: {
                        type: 'linear',
                        x: 0, //右
                        y: 0, //下
                        x2: 0, //左
                        y2: 1, //上
                        colorStops: [
                            {
                                offset: 0,
                                color: '#00FFE7', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#489AF2', // 100% 处的颜色
                            },
                        ],
                    },
                },
            },
        ],
    };
    return <VMChart option={option} height={500} width="100%" defaultOption={false} />;
};

WeighContent.propTypes = {
    id: PropTypes.string,
    code: PropTypes.string,
    seed: PropTypes.string,
    startTime: PropTypes.string,
    endTime: PropTypes.string,
};
TrendChart.propTypes = {
    id: PropTypes.string,
    code: PropTypes.string,
    startTime: PropTypes.string,
    endTime: PropTypes.string,
    deviceId: PropTypes.string,
    monitorTypeCodes: PropTypes.string,
};
export default WeighContent;
//# sourceMappingURL=index.jsx.map