import React from 'react';
import logo from '@assets/images/logo.png';
import Scroll from '@components/Scroll.jsx';
import { Grid } from 'antd-mobile';
import { initDate } from '@utils/index.js';
import ScrollTop from '@components/ScrollTop.jsx';
/**
 * @刘丹: 大屏叫号
 */
class BigScreen extends React.Component {
  constructor() {
    super();
    this.state = {
      dateStr: {},
      patList: [],
    };
  }
  componentDidMount() {
    this.initDate();
  }
  componentDidUpdate(prev) {
    if (prev.patListArea != this.props.patListArea) {
      this.setState({
        patList: this.props.patListArea,
      });
    }
  }
  initDate = () => {
    this.setState({
      dateStr: initDate(),
    });
    setTimeout(() => {
      this.initDate();
    }, 3000);
  };
  render() {
    const { dateStr } = this.state;
    const { userData } = this.props;
    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'>{ userData.areaDesc || userData.locDesc}</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={5}>
              {/* <div className='table-header'>{userData.locDesc === '验光配镜分诊区' ? '验光室' : '诊室'}</div> */}
              <div className='table-header'>{ userData.locDesc === '验光配镜分诊区' ? '验光师':'医生' }</div>
            </Grid.Item >
            <Grid.Item span={3}>
              <div className='table-header'>正在就诊</div>
            </Grid.Item >
             <Grid.Item span={11}>
              <div className='table-header'>准备就诊</div>
            </Grid.Item >
            <Grid.Item span={5}>
              <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={5}>
                  <div className='table-content docname'>{item.roomDesc}-{item.docName || '-'}</div>
                </Grid.Item >
                <Grid.Item span={3}>
                  <div className='table-content patname'>
                    {item?.callMsg?.callPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
                  </div>
                </Grid.Item >
                <Grid.Item span={11}>
                  <div className='table-content'>
                    <Scroll
                      text={item?.callMsg?.waitPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
                    />
                  </div>
                </Grid.Item >
                <Grid.Item span={5}>
                  <div className='table-content'>
                    <Scroll
                      text={item?.callMsg?.reWaitPat?.map(v => v.patName + '' + v.patCallNo).join(('、'))}
                      isFast={true}
                    />
                  </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 BigScreen;