import React from 'react';
import logo from '@assets/images/logo.png';
import { Grid } from 'antd-mobile';
import { initDate } from '@utils/index.js';
import Scroll from '@components/Scroll.jsx';
import ScrollTop from '@components/ScrollTop.jsx';
/**
 * @刘丹: 手术室叫号
 */
class OperateScreen extends React.Component {
  constructor() {
    super();
    this.state = {
      dateStr: {},
      patList: [],
    };
  }
  componentDidMount() {
    this.initDate();
  }
  componentDidUpdate(prev) {
    if (prev.patList != this.props.patList) {
      this.setState({
        patList: this.props.patList,
      });
    }
  }
  initDate = () => {
    this.setState({
      dateStr: initDate(),
    });
    setTimeout(() => {
      this.initDate();
    }, 3000);
  };
  render() {
    const { dateStr } = this.state;
    return (
      <div className='page-body big'>
        <div className='header'>
          <img
            src={this.props.hosLogo || logo}
            alt='Logo'
            className={this.props.hosLogo ? 'logo' : 'logodefault'}
            onError={(e) => {
              e.target.src = `${logo}`;
            }}
          />
          <span className='room-name'>手术状态信息</span>
          <span className='heaer-btn'>
            <span className='date'>{ dateStr.dateNow}</span>
            <br /> {dateStr.weekNow} {  dateStr.timeNow}
          </span>
        </div>
        <div className='table section mt scroll-wrap'>
          <Grid columns={24} gap={6}>
            <Grid.Item span={3}>
              <div className='table-header'>姓名</div>
            </Grid.Item>
            <Grid.Item span={2}>
              <div className='table-header'>性别</div>
            </Grid.Item>
             <Grid.Item span={2}>
              <div className='table-header'>年龄</div>
            </Grid.Item>
            <Grid.Item span={11}>
              <div className='table-header'>手术类别</div>
            </Grid.Item>
            <Grid.Item span={3}>
              <div className='table-header'>手术状态</div>
            </Grid.Item>
            <Grid.Item span={3}>
              <div className='table-header'>手术间</div>
            </Grid.Item>
          </Grid>
          <div className='scroll-content'>
            <ScrollTop text={this.state.patList}>
            {this.state.patList.map((item,index) => {
            return (<Grid  columns={24} gap={6} key={index} className='mt'>
              <Grid.Item span={3}>
                <div className='table-content'>{ item.patName || '***'}</div>
              </Grid.Item>
              <Grid.Item span={2}>
                <div className='table-content'>{item.patSex || '***'}</div>
              </Grid.Item>
               <Grid.Item span={2}>
                <div className='table-content'>{item.patAge || '***'}</div>
              </Grid.Item>
               <Grid.Item span={11}>
                <div className='table-content patOpeName'>
                  {item.patOpeName || '***'}
                </div>
              </Grid.Item>
                <Grid.Item span={3}>
                <div className='table-content'>{ item.patOpeState || '***'}</div>
              </Grid.Item>
                <Grid.Item span={3}>
                <div className='table-content'>{ item.patOpeRom || '***'}</div>
              </Grid.Item>
            </Grid>);
             })}
            </ScrollTop>
          </div>
        </div>
        <div className='footer big'>
           过号患者:
           <div className='scroll-big'>
             <Scroll text={this.props.delayPat}/>
           </div>
         </div>
      </div>
    );
  }
}

export default OperateScreen;
