import { useState, useEffect } from 'react';
import { Select, Space, Button, Modal } from 'antd';
import { getSchoolAreaList } from '@/apis/common'

import styles from './index.less';

/**
 * 
 * @param {Function} onChange
 */

const SchoolChoice = (props) => {

    const { onChange = () => { } } = props

    const typeColorEnum = {
        "Ⅰ类": "#722ED1",
        "Ⅱ类": "#FADB14",
    }


    const [schoolTypeList, setSchoolTypeList] = useState([]);
    const [schoolList, setSchoolList] = useState([]);

    const [value, setValue] = useState(null);
    const [label, setLabel] = useState(null);



    const [open, setOpen] = useState(false);

    const [selectedSchoolList, setSelectedSchoolList] = useState([]);
    const [selectedSchoolTypeList, setSelectedSchoolTypeList] = useState([]);

    useEffect(() => {
        init();
    }, []);

    const init = async () => {
        try {
            const res = await getSchoolAreaList({ type: 1 });
            if (res?.code === 200) {
                setSchoolTypeList(res?.data || []);
                setLabel(res?.data?.[0]?.districtName);
                onChange(res?.data?.[0]?.schoolList?.map(item => item?.id));
            }
            const result = await getSchoolAreaList({ type: 0 });
            if (result?.code === 200) {
                setSchoolList(result?.data || []);
            }

        } catch (error) {
            console.log(error, 'init-error');

        }
    };

    const handleOk = () => {
        setOpen(false);
        const ids = Array.from(new Set([...selectedSchoolTypeList, ...selectedSchoolList]));
        onChange(ids);

    };

    return (
        <div className={styles.school_select}>
            <Space>
                <Select 
                    fieldNames={{
                        label: 'districtName',
                        value: 'id'
                    }}
                    value={label} 
                    style={{ width: 120 }}
                    allowClear 
                    options={schoolTypeList} 
                    placeholder='请选择学校' 
                    onChange={(value, options) => {
                        if (!value) {
                            setSelectedSchoolTypeList([]);
                            setLabel(null);
                            setValue(null);
                            return;
                        }
                        setLabel(options?.districtName);
                        const ids = Array.from(new Set([...options?.schoolList?.map(item => item?.id), ...selectedSchoolList]));
                        onChange(ids);
                        setSelectedSchoolTypeList(options?.schoolList?.map(item => item?.id));

                    }} />
                <Button type="default" onClick={() => setOpen(true)}>自选学校范围</Button>
            </Space>
            <Modal
                open={open}
                maskClosable={false}
                centered
                title='选择学校'
                width={800}
                styles={{ body: { height: "60vh", overflowY: "scroll" } }}
                onCancel={() => {
                    setOpen(false);
                }}
                onOk={handleOk}
            >
                {schoolList?.length > 0 ? schoolList?.map((item) => {
                    return (
                        <section className={styles.area} key={item?.id}>
                            <section className={styles.area_title}>
                                {item?.districtName}
                            </section>
                            <section className={styles.area_list}>
                                {item?.schoolList?.length > 0 ? item?.schoolList?.map((element) => {

                                    const isSelected = selectedSchoolList.includes(element?.id);
                                    return (

                                        <section style={{ backgroundColor: isSelected ? "#4bbb6b" : "#fff", color: isSelected ? "#fff" : "#333" }} className={styles.area_list_item} key={element?.id} onClick={() => {
                                            setSelectedSchoolList(prev => {
                                                if (isSelected) {
                                                    return prev.filter(item => item !== element?.id)
                                                } else {
                                                    return [...prev, element?.id]
                                                }
                                            })
                                        }}>
                                            <span className={styles.area_list_item_name}>{element?.cname}&nbsp;</span>
                                            <span className={styles.area_list_item_type} style={{ backgroundColor: typeColorEnum?.[element?.schoolType] }}>{element?.schoolType}</span>
                                        </section>

                                    )
                                }) : null}
                            </section>
                        </section>
                    )
                }) : null}
            </Modal>
        </div>
    )
};

export default SchoolChoice;