import React, {useEffect, useState} from 'react'
import './style.less'
import NavBar from '@/components/nav-bar'
import _mp4 from './mp4.png';
import _pdf from './pdf.png';
import _preview from './preview.png';

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

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

type CheckboxValue = string | number

const ProductionList: React.FC = () => {
    const [title, setTitle] = useState<string>('');
    const [list, setList] = useState<ListType[]>([]);
    const [show, setShow] = useState<boolean>(false);
    const [showBatch, setShowBatch] = useState<boolean>(false);
    const navigate = useNavigate();
    const [checkItems, setCheckItems] = useState<CheckboxValue[]>([])
    const [checkValues, setCheckValues] = useState<CheckboxValue[]>([])


    // 因是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);
                let _checkItems = [];
                const _list = res?.product_book?.map((item: any) => {
                    _checkItems.push(item?.guide_book_file_info_?.[0]?.fileId);
                    const _arr = item?.guide_book_file_info_?.[0]?.name?.split('.') || [];
                    return {
                        id: item?.guide_book_file_info_?.[0]?.fileId || '',
                        name: _arr?.[0] || '',
                        type: _arr?.[1] || '',
                    }
                }) || [];
                setList(_list)
                setCheckItems(_checkItems)
            }).catch((e: any) => {
                setShow(true);
                setList([])
            })
        }
    }, [id])

    const rightInfo = (
        <div className={'production-list_nav-right'}>
            <span
                className={'production-list_nav-right-info'}
                onClick={() => setShowBatch(true)}
            >批量操作</span>
        </div>
    )

    const checkboxChange = (value: CheckboxValue[]) => {
        console.log('checkboxChange-value', value)
        setCheckValues(value)
    }
    const toDetail = (ids: CheckboxValue[]) => {
        console.log('toDetail-ids', ids)
        if (ids?.[0]) {
            const _id: string = ids?.[0].toString() || '';
            getFilePreview(_id).then((res: any) => {
                console.log('res', res)
                window.open(res, '_blank')
            }).catch((err: any) => {
                console.log('err', err)
            })
        }
        // navigate(`/production/detail?id=${item?.id}&name=${item?.name}`);
    }

    return (
        <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
            <div className={`production-list ${showBatch ? 'production-list--batch' : ''}`}>
                <NavBar title={title} showBack={true} rightInfo={ !showBatch ? rightInfo : ''}/>
                {
                    !show ? <SpinLoading color='primary'/> :
                        <div className={'production-list_list'}>
                            <Checkbox.Group
                                onChange={checkboxChange}
                                value={checkValues}
                            >
                                {
                                    list?.map((item: ListType) => {
                                        return <div
                                            key={item?.id}
                                            className={`production-list_list-item ${item?.id}`}
                                            style={{backgroundColor: '#fff'}}
                                            onClick={() => {
                                                if (!showBatch) {
                                                    toDetail([item?.id || ''])
                                                }
                                            }}
                                        >
                                            <img className={'production-list_list-item-img'}
                                                 src={item?.type === 'mp4' ? _mp4 : _pdf}/>
                                            <div className={'omit2 production-list_list-item-name'}>
                                                {item?.name}
                                            </div>
                                            {
                                                showBatch ?  <Checkbox key={item?.id} value={item?.id} /> : ''
                                            }
                                        </div>
                                    })
                                }
                            </Checkbox.Group>


                        </div>
                }
                {
                    showBatch ? <div className={'production-list--batch_info'}>
                        <div className={'production-list--batch_info-top'}>
                            <Checkbox
                                indeterminate={checkValues.length > 0 && checkValues?.length < checkItems?.length}
                                checked={checkValues?.length === checkItems?.length}
                                onChange={checked => {
                                    if (checked) {
                                        setCheckValues(checkItems)
                                    } else {
                                        setCheckValues([])
                                    }
                                }}
                            >
                                全选
                            </Checkbox>
                            <div className={'production-list--batch_info-top-choose'}>已选择<span>{checkValues?.length}</span>条</div>
                            <div className={'production-list--batch_info-top-close'}
                                 onClick={() => {
                                     setShowBatch(false);
                                     setCheckValues([])
                                 }}
                            >取消</div>
                        </div>
                        <div className={'production-list--batch_info-bottom'}>
                            <div className={'production-list--batch_info-bottom_item'}>
                                <img className={'production-list--batch_info-bottom_item-icon'} src={_preview} alt=""/>
                                <span className={'production-list--batch_info-bottom_item-info'}
                                      onClick={() => {
                                          toDetail(checkValues)
                                      }}
                                >预览</span>
                            </div>
                        </div>
                    </div> : ''
                }

            </div>
        </div>
    )
}

export default ProductionList;