import React, {useEffect, useState} from 'react'
import './style.less'
import NavBar from "@/components/nav-bar"
import { useNavigate } from "react-router-dom";
import {getProductLine} from "@/api/apiConfig";
import { SpinLoading } from 'antd-mobile'

import _icon from './icon.png'

interface ListType {
    id: string;
    name: string;
}

const ProductionManagement: React.FC = () => {
    const navigate = useNavigate();
    const [list, setList] = useState<ListType[]>([]);
    const [show, setShow] = useState<boolean>(false);

    useEffect(() => {
        setShow(false);
        getProductLine().then((res: any) => {
            setShow(true);
            const _list = res?.product_line?.map((item: any) => {
                return {
                    id: item?.id || '',
                    name: item?.name || '',
                }
            }) || [];
            setList(_list)

        }).catch((e: any) => {
            console.log('e', e)
            setShow(true);
            setList([])
        })
    }, [])

    const toProductionList = (item: any) => {
        navigate(`/production/list?id=${item?.id}&name=${item?.name}`);
    }


    return (
        <div className={'sxjx-content-main sxjx-layout-main-unfoot production-management-box'}>
            <div className={'production-management'}>
                <NavBar title={'生产线管理'}
                        style={{background: '#46658E'}}
                />
                {
                    !show ? <SpinLoading color='primary' /> :
                        <div className={'production-management_list'}>
                            {
                                list?.map((item: any) => {
                                    return  <div
                                        key={item?.id}
                                        className={'production-management_list-item'}
                                        onClick={() => toProductionList(item)}
                                    >
                                        <img className={'production-management_list-item_icon'} src={_icon} alt=""/>
                                        <p className={'production-management_list-item_name omit3'}>{item?.name}</p>
                                    </div>
                                })
                            }
                        </div>
                }

            </div>
        </div>
    )
}

export default ProductionManagement;