import React from 'react'
import { Box, AutoRollComponent } from '$components';
import moment from 'moment'
import { getName, getPhone } from '$utils';
import TimeComponent, { formatSeconds } from './time';
import { typeParam_data } from '../constants/index'
import './style.less'
function BasicInfo(props) {
    const { info: { alarmInfo, rescueInfo }, routes: { routes } } = props;

    const getContent = () => {
        return <div style={{ color: "#8FCBFF", marginTop: 9, paddingTop: 10 }}>
            {routes?.steps?.map((s, index) => (index + 1) + '.' + s?.instruction).map(x => {
                return <div style={{ marginBottom: 10 }}>{x}</div>
            })}</div>
    }

    let name = '', phone = ''
    if (rescueInfo?.leaderContactPhone) {
        let str = rescueInfo?.leaderContactPhone.replace(/\s*/g, "");
        name = str.substring(0, str.length - 11)
        phone = str.substring(str.length - 11, str.length)
    }

    return <Box title={"事件概况"} >
        <div className='item_left-container'>
            <div className='alarm_time'>
                {alarmInfo?.createTime && <TimeComponent key={alarmInfo?.createTime} createTime={alarmInfo?.createTime} />}
            </div>
            <div className='end_event' onClick={() => { props.endEvent() }}>结束案件</div>
            <div className='event_title'><div className='event_title_left' /><span>{rescueInfo?.teamName}</span><div className='event_title_right' /></div>
            <div className='left_second_bg'>
                <div className='_second_item1'>
                    <div className='_title'>负责人</div>
                    <div className='_content' style={{ marginBottom: 9 }}>{getName(name)}</div>
                    <div className='_title'>事件时间</div>
                    <div className='_content'>{moment(alarmInfo?.createTime).format('YYYY-MM-DD HH:mm:ss')}</div>
                </div>
                <div className='_second_item2'>
                    <div className='_title'>联系方式</div>
                    <div className='_content' style={{ marginBottom: 9 }}>{getPhone(phone)}</div>
                    <div className='_title' >危险等级</div>
                    <div className='_content'>{alarmInfo?.level}</div>
                </div>
            </div>

            <div className='left_third_bg'>
                <div className='left_item_left1' />
                <div className='left_item_right1'>
                    <div className='flex-row'>
                        <div style={{ marginRight: 17 }}>警情类型</div>
                        <div style={{ color: "#8FCBFF" }}>{alarmInfo?.type}</div>
                    </div>
                    {alarmInfo?.typeParam && <div className='flex-row' style={{ marginTop: 12, marginBottom: 12 }}>
                        <div style={{ marginRight: 17 }}>{typeParam_data[alarmInfo?.type]?.name}</div>
                        <div style={{ color: "#8FCBFF" }}>{alarmInfo?.typeParam}</div>
                    </div>}
                    {
                        alarmInfo?.type == '火灾扑救' && <div className='flex-row'>
                            <div style={{ marginRight: 17 }}>着火场所</div>
                            <div style={{ color: "#8FCBFF" }}>{alarmInfo?.scene}</div>
                        </div>
                    }
                </div>
            </div>

            <div className='left_third_bg'>
                <div className='left_item_left2' />
                <div className='left_item_right1' style={{ textAlign: 'left' }}>
                    <div><span style={{ marginRight: 30 }}>案件地点</span></div>
                    <div style={{ color: "#8FCBFF", marginTop: 9 }}>{alarmInfo?.location}</div>
                </div>
            </div>

            <div className='left_third_bg' style={{ height: 160, paddingTop: 20 }}>
                <div className='left_item_left3' />
                <div className='left_item_right1' style={{ textAlign: 'left' }}>
                    <div><span style={{ marginRight: 30, marginBottom: 15 }}>路线规划 {routes?.time && `(${formatSeconds(routes?.time, true)})`}</span></div>
                    <AutoRollComponent
                        key={alarmInfo?.id}
                        canScroll={routes?.steps?.length > 3}
                        content={getContent()}
                        divHeight={100}
                        divId={`fire-left-bottom${alarmInfo?.id}`}
                    />
                </div>
            </div>
        </div>
    </Box>
}

export default BasicInfo;