import {useEffect,useState} from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { setSys,setUser } from '@reducers/userInfo.js';
import { Radio, Row, Col,Steps, Select, Button } from 'antd';
import AHeader from '../AHeader'
import './index.less'
import iconLb from '@images/lb.png';
import iconHis from '@images/his.png';
import rightIcon from '@images/right.png';
import {message} from "antd/lib/index";
import apiObj from '@api/index';

const {api,xPost,interceptors} = apiObj;

const { Step } = Steps;
const {Option} = Select;
function SysChoose({history}) {
    //const [current, setCurrent] = useState(1);
    const [sysId, setSysId] = useState('');      //选中的系统id
    const [sysName, setSysName] = useState('');      //选中的系统名称
    const [subHisId, setSubHisId] = useState('');      //选中的子医院id
    const [showId, setShowId] = useState('');       //要显示子医院列表的医院id
    const [orgList, setOrgList] = useState([]);     //系统列表
    const [hisList, setHisList] = useState([]);     //当前选中系统下的医院列表
    const dispatch = useDispatch();
    const steps = [
        {
            title: '选择系统',
            content: 'First-content',
        },
        {
            title: '选择组织',
            content: 'Second-content',
        },
    ];
    //系统单选
    function onChange(e){
        const id = e.target.value;
        const checkOrg = orgList.find((it)=>it.id===id);
        const his =checkOrg.hospitals;
        setSysId(id);
        setHisList(his);
    }
    //获取组织列表
    function getOrgList(){
        xPost(api.getUserHospitals).then((res)=>{
            if(res.data.code===200){
                const data = res.data.data;
                const { software,userInfo } = data;
                setOrgList(software);
                setSysName(software[0].name)
                setSysId(software[0].id);
                dispatch(setUser(userInfo));
                //默认显示第一个系统的组织
                setHisList(software[0]?software[0].hospitals:[]);
            }else{
                message.warning(res.data.msg||'获取医院列表失败');
            }
        }).catch(()=>{
            message.error("接口出错");
        });
    }
    //点击进入
    function getIn(id){
        dispatch(setSys({sysId,sysName,hisId:id}));
        interceptors({sysId,hisId:id});
        history.push("/manage");
    }
    //显示子医院列表,传空为隐藏，传id为显示
    function showSubPop(id){
        setShowId(id);
    }
    function onSelect(id){
        setSubHisId(id);
    }
    useEffect(()=>{
        getOrgList();
    },[]);
    return (
        <>
        <AHeader hideName={true}></AHeader>
        <div className="choose-container">
            <div className="banner">
                <p className='title'>欢迎登录AI病案质控平台！</p>
                <div className="tip-warn">
                    <img src={iconLb} alt=""/>
                    <span>平台检测到您的账号关联以下系统及组织，请先选择您想要进入的系统再选择要进入的组织。</span>
                </div>
            </div>
            <div className="content">
                <Steps current={1} className='steps-bar'>
                    {steps.map(item => (
                        <Step key={item.title} title={item.title} />
                    ))}
                </Steps>
                <div className="steps-content">
                    <div className="item">
                        <div className="item-title">
                            选择系统（单选）
                        </div>
                        <div className="item-content">
                            <Radio.Group
                                onChange={onChange}
                                value={sysId}>
                                {orgList.map((it)=>{
                                    return <Radio key={it.id} value={it.id}>{it.name}</Radio>
                                })}
                            </Radio.Group>
                        </div>
                    </div>
                    <div className="item">
                        <div className="item-title">
                            选择组织（单选）
                        </div>
                        <div className="item-content">
                            <div className="row-container">
                                <Row className='item-rows-box' gutter={16}>
                                    {
                                        hisList.map((it)=>{
                                            return (
                                                <Col className="box-row" key={it.hospitalId} span={8}>
                                                    <div className='card'>
                                                        <div className="icon">
                                                            <img src={iconHis} alt="icon"/>
                                                        </div>
                                                        <div className="card-content">
                                                            <div className='name'>{it.hospitalName}</div>
                                                            {it.type!==0?(<><a className='get-in' onClick={()=>showSubPop(it.hospitalId)}>点击选择 <img src={rightIcon} alt="箭头"/></a>
                                                                {showId===it.hospitalId?<div className="pop-select">
                                                                <p className='pop-title'>
                                                                    <span>选择子组织</span>
                                                                    <a className='close' onClick={()=>showSubPop('')}>收起</a>
                                                                </p>
                                                                <Select size='small' placeholder='请选择' onChange={(id)=>onSelect(id)} style={{ width: 278,marginRight:'6px' }}>
                                                                    {(it.children||[]).map((item)=>{
                                                                       return (<Option value={item.hospitalId} key={item.hospitalId}>{item.hospitalName}</Option>)
                                                                    })
                                                                    }
                                                                </Select>
                                                                <Button type='primary' size='small' onClick={()=>getIn(subHisId)}>进入</Button>
                                                            </div>:''}</>):(<a className='get-in' onClick={()=>getIn(it.hospitalId)}>点击进入 <img src={rightIcon} alt="箭头"/></a>)}
                                                        </div>
                                                    </div>
                                                </Col>
                                            )
                                        })
                                    }
                                </Row>
                            </div>

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

export default SysChoose;