import React, { useEffect } from 'react';
import { useSetState } from 'ahooks';
import { Space, Select } from 'antd';
import moment from 'moment';
import PropTypes from 'prop-types';
import useSettings from '../vm-hooks/useSettings';
import { VMDatePicker, VMSelect } from '../vm-filter';
import VMChart from '../vm-chart';
import { WorkCondition } from './api';
import SubTabs, { SubTabPane } from '../vm-sub-tabs';
import './style';

const { Option } = Select;
const WorkConditionContent = props => {
    const { id, seed } = props;
    const [state, setState] = useSetState({
        startTime: moment().subtract(1, 'd'),
        endTime: moment(),
        selectKey: '',
        activeKey: '',
        deviceList: [], // 左上角切换数据
    });
    const selectList = WorkCondition.useSelectList(id); // 监测点下拉数据
    useEffect(() => {
        if (typeof selectList?.[0]?.id !== 'undefined')
            WorkCondition.useDeviceList(selectList?.[0]?.id).then(res => {
                if (res.result === 0) {
                    setState({ deviceList: res.data });
                }
            });
    }, [selectList?.[0]?.id]);
    useEffect(() => {
        if (seed) setState({ selectKey: null });
    }, [seed]);
    const handleDateChange = (startTime, endTime) => {
        setState({ startTime, endTime });
    };
    const handleSelectChange = selectKey => {
        setState({ selectKey });
        WorkCondition.useDeviceList(selectKey).then(res => {
            if (res.result === 0) {
                setState({ deviceList: res.data });
            }
        });
    };
    const handleTabChange = activeKey => {
        setState({ activeKey });
    };
    return (
        <div className="work-content">
            <div className="top-bar">
                <Space className="left">
                    <VMSelect
                        value={state.selectKey || selectList?.[0]?.id || ''}
                        style={{ width: 120 }}
                        onChange={handleSelectChange}
                    >
                        {selectList &&
                            selectList.length > 0 &&
                            selectList.map(item => (
                                <Option key={item.id} value={item.id}>
                                    {item.name}
                                </Option>
                            ))}
                    </VMSelect>
                    <SubTabs
                        onTabClick={handleTabChange}
                        activeKey={state.activeKey || state.deviceList?.[0]?.code || ''}
                    >
                        {(state.selectKey || selectList?.[0]?.id || '') !== '' &&
                            state.deviceList?.length > 0 &&
                            state.deviceList?.map(item => (
                                <SubTabPane key={item.code} tab={item.name}></SubTabPane>
                            ))}
                    </SubTabs>
                </Space>
                <Space className="right">
                    <VMDatePicker
                        defaultValue={[state.startTime, state.endTime]}
                        onChange={dates => dates && handleDateChange(dates[0], dates[1])}
                    />
                </Space>
            </div>
            <div className="chart-container">
                <TrendChart
                    startTime={state.startTime.format('YYYY-MM-DD')}
                    endTime={state.endTime.format('YYYY-MM-DD')}
                    deviceId={state.selectKey || selectList?.[0]?.id || ''}
                    monitorTypeCodes={state.activeKey || state.deviceList?.[0]?.code || ''}
                />
            </div>
        </div>
    );
};

const TrendChart = props => {
    const { startTime, endTime, deviceId, monitorTypeCodes } = props;
    const { isDark } = useSettings();
    const collectFrequency = startTime === endTime ? 'realTime' : 'day';
    const data =
        (deviceId &&
            monitorTypeCodes &&
            WorkCondition.useEchartsTrend(
                `${startTime} 00:00:00`,
                `${endTime} 23:59:59`,
                collectFrequency,
                deviceId,
                monitorTypeCodes,
            )) ||
        [];
    const values = data[0]?.values || [];
    // const color
    const option = {
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            type: 'category',
            data: (values?.length > 0 && values?.map(item => item?.x)) || [],
            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',
                    },
                },
            },
        ],
        series: data.map(item => {
            return {
                name: item.name,
                type: 'line',
                data:
                    (item?.values?.length > 0 && item.values?.map(item => parseFloat(item?.y))) ||
                    [],
            };
        }),
    };
    return <VMChart option={option} height={500} width="100%" defaultOption={false} />;
};

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