import React,{ useEffect, useState} from 'react';
// import ModalWrap from '@/components/Modal/modal.js';
import './selectSituation.less';

import themeCaseIcon from '../../../../assets/images/theme0.png';
import themeSystemIcon from '../../../../assets/images/theme1.png'
import themeSelectedIcon from '../../../../assets/images/theme.png'

const list = [
    {
		id: 0, 
		title: '个案追踪', 
		des: '评价诊疗服务的内涵质量以及对各种诊疗规范、临床路径等的执行力',
	},{
		id: 1, 
		title: '系统追踪', 
		des: '评价对各种质量与安全管理制度与流程的执行力、医院服务的连贯性及多学科综合的服务能力',
    }
];



const SelectSituation = (props)=>{
    
    const [selectedIndex,set_selectedIndex] = useState(-1);

    const selectThemeHandle = (index)=>{
           const {updateCreateFlowState} = props;
           set_selectedIndex(index)
           if(updateCreateFlowState)updateCreateFlowState({'state':{theme:{...list[index]}}});
    }

    const init = ()=>{
        const {getCreateFlowState} = props;
        if(getCreateFlowState&&getCreateFlowState()){
              const {theme} = getCreateFlowState();
              if(theme){
                // console.log({theme});
                set_selectedIndex(theme.id);
              }
              
           
        }
    }

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

    return (
        <div className="selectSituation">
             
                    <h1>选定一个主题进行跟踪</h1>
               
                    <div className="situationWrap">
                            {
                                list.map((item,index)=>{
                                      return (
                                          <div key={index} className="themeList" onClick={()=>selectThemeHandle(index)}>
                                                 <img src={item.id==0?themeCaseIcon:themeSystemIcon} />
                                                 {selectedIndex==index&&<img className="activedIcon" src={themeSelectedIcon} />}
                                                 <div className="themeInfo">
                                                     <h1>{item.title}</h1>
                                                     <div className="themeInfoDetail">{item.des}</div>
                                                 </div>
                                          </div>
                                      )
                                })
                            }
                    </div>

        </div>
    )
}


export default SelectSituation;


