import React from 'react';
import logo from '@assets/images/logo.png';
import Scroll from '@components/Scroll.jsx';
import { Grid } from 'antd-mobile';
import { initDate, initArray } from '@utils/index.js';
import ScrollTop from '@components/ScrollTop.jsx';
import { Swiper } from 'antd-mobile';
/**
 * @刘丹: 大屏叫号
 */
class BigScreen extends React.Component {
  constructor() {
    super();
    this.state = {
      dateStr: {},
      patList: [],
      swapperArray: [], // 数据拆分为4个一组
      isInit: false,
    };
  }
  componentDidMount() {
    //this.initDate();
    this.initRoom();
  }
  componentDidUpdate(prev) {
    if (prev.roomObj != this.props.roomObj) {
      if (this.props.roomObj?.refreshFlag == 'Y') {
        this.initRoom();
        return; // 重新获取数据
      }
      const { patList } = this.state;
      const newArray = [];
      let flag = false;
      patList.forEach((item) => {
        if (this.props.roomObj?.roomDesc == item.roomDesc) {
          flag = true;
          newArray.push(this.props.roomObj);
        } else {
          newArray.push(item);
        }
      });
      if (!flag) {
        newArray.push(this.props.roomObj);
      }
      this.setState({
        patList: newArray,
        swapperArray: initArray(newArray, 4)
      });
    }
  }
  // 叫号的诊室数据默认
  initRoom = () => {
    let cache = localStorage.getItem('ZZJ-base');
    if (!cache) {
      return;
    }
    cache = JSON.parse(cache);
    React.$fetchPost('04150031', {
      params: [{
        locID: cache.room[0],
     }],
    }, true).then((data) => {
      if (data && data.result) {
        this.setState({
          patList: data.result,
          dateStr: {
            dateNow: data.curDate, //当前日期,
            weekNow: data.curWeekDate, // 当前日期,
          },
          swapperArray: initArray(data.result, 4),
        });
      }
    });
  };
  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>
         {dateStr.dateNow && <span className='heaer-btn'>
            <span className='date'>{dateStr.dateNow}</span><br />
            <span className='date' style={{paddingLeft: '1.8rem'}}>{ dateStr.weekNow}</span>
            {/* <br /> {dateStr.weekNow} */}
            {/* {dateStr.timeNow} */}
          </span>}
        </div>
        <div className='table section mt scroll-wrap' style={{backgroundColor: '#fffff' }}>
        <Swiper
          autoplay={true}
          autoplayInterval={20000}
          loop={true}
          style={{height: '100%'}}
          total={this.state.swapperArray.length}
          indicator={false}
          defaultIndex={1}
        >
          {this.state.swapperArray.map((patlist, index) => {
            return <Swiper.Item key={index} style={{ height: '100%'}}>
              <Grid columns={4} gap={6} className='swaper-wrap'>
              {patlist.map((item,i) => {
                return <Grid.Item span={1} key={index + i}  className='scroll-wrap'style={{backgroundColor: '#E1E1E1' }}>
                  <div className='swaper-header bg'>{item.roomDesc}-{item.docName || '-'} </div>
                  <div className='swaper-header red'> {item?.callMsg?.callPat?.map(v => v.patCallNo + '' + v.patName).join(('、'))}正在就诊</div>
                  <Grid columns={24} className='scroll-content' gap={-1}>
                    <Grid.Item span={17} className='scroll-wrap'>
                      <div className='swaper-header bg'>候诊</div>
                      <div className='scroll-content'>
                        <ScrollTop isFast={true} text={ item?.callMsg?.waitPat }>
                          {item?.callMsg?.waitPat?.map((v, wi) => {
                            return <div className='swaper-text-wrap' key={wi}>
                              <div className='swaper-text icon'>{v.patCallType}</div>
                              <div className='swaper-text' >
                                {v.patCallNo}
                                <span style={{ fontSize: '1.4rem' }}>{v.patName}</span>
                              </div>
                              <div className={
                                v.patCallStatusDesc == '待诊'
                                  ? 'swaper-text state green'
                                  : v.patCallStatusDesc == '未签'
                                    ? 'swaper-text state yellow'
                                    : 'swaper-text state'}>{v.patCallStatusDesc}</div>
                            </div>;
                          })}
                        </ScrollTop>
                      </div>
                    </Grid.Item >
                    <Grid.Item span={7} className='scroll-wrap'>
                      <div className='swaper-header bg'>看报告</div>
                      <div className='scroll-content border'>
                        <ScrollTop text={ item?.callMsg?.reWaitPat }>
                          {item?.callMsg?.reWaitPat?.map((v, ri) => {
                            return <div className='swaper-text' style={{fontSize: '1.3rem'}} key={ri}>{v.patCallNo}{v.patName}</div>;
                          })}
                        </ScrollTop>
                      </div>
                    </Grid.Item >
                  </Grid>
                </Grid.Item >;
              })}
              </Grid>
            </Swiper.Item>;
          })}
        </Swiper>
        </div>
        <div className='footer big'>
          过号患者:
          <div className='scroll-big'>
            <Scroll text={this.props.delayPat}/>
          </div>
          看报告,请到报到机或护士站报到
        </div>
      </div>
    );
  }
}

export default BigScreen;
