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 _mp4 from './mp4.png';
import _pdf from './pdf.png';

import {useSearchParams} from "react-router-dom";
import {getProductBook} from "@/api/apiConfig";
import {SpinLoading} from 'antd-mobile'

interface ListType {
    id: string;
    name: string;
    type: 'pdf' | 'mp4' | string
}

const ProductionList: React.FC = () => {
    const [title, setTitle] = useState<string>('');
    const [list, setList] = useState<ListType[]>([]);
    const [show, setShow] = useState<boolean>(false);


    // 因是hook，必须写在组件的顶部执行，useSearchParams() 返回的是数组
    const [params] = useSearchParams();
    console.log('ProductionList===params', params)
    // 通过 get 方法获取目标参数
    const name = params.get("name") || "";
    const id = params.get("id") || "";

    useEffect(() => {
        if (name) {
            setTitle(name)
        }
    }, [name])

    useEffect(() => {
        if (id) {
            setShow(false);
            getProductBook({pro_line: id}).then((res: any) => {
                setShow(true);
                const _list = res?.product_book?.map((item: any) => {
                    const _arr = item?.guide_book_file_info_?.[0]?.name?.split('.') || [];
                    return {
                        id: item?.id || '',
                        name: _arr?.[0] || '',
                        type: _arr?.[1] || '',
                    }
                }) || [];
                setList(_list)
            }).catch((e: any) => {
                setShow(true);
                setList([])
            })
        }
    }, [id])


    return (
        <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
            <div className={'production-list'}>
                <NavBar title={title} showBack={true}/>
                {
                    !show ? <SpinLoading color='primary'/> :
                        <div className={'production-list_list'}>
                            {
                                list?.map((item: any) => {
                                    return <div
                                        key={item?.id}
                                        className={'production-list_list-item'}
                                        style={{backgroundColor: hexToRgba(baseColorPrimary, 0.55)}}
                                    >
                                        <img className={'production-list_list-item-img'}
                                             src={item?.type === 'mp4' ? _mp4 : _pdf}/>
                                        <div className={'omit2 production-list_list-item-name'}>
                                            {item?.name}
                                        </div>
                                    </div>
                                })
                            }

                        </div>
                }
            </div>
        </div>
    )
}

export default ProductionList;