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

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) => {
            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'}>
            <div className={'production-management'}>
                <NavBar title={'生产线管理'}/>
                {
                    !show ? <SpinLoading color='primary' /> :
                        <div className={'production-management_list'}>
                            {
                                list?.map((item: any) => {
                                    return  <div
                                        key={item?.id}
                                        className={'production-management_list-item'}
                                        style={{backgroundColor: hexToRgba(baseColorPrimary, 0.6)}}
                                        onClick={() => toProductionList(item)}
                                    >
                                        {item?.name}
                                    </div>
                                })
                            }
                        </div>
                }

            </div>
        </div>
    )
}

export default ProductionManagement;