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';
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,
      });
      this.initArray(newArray);
    }
  }
  initArray = (data) => {
    const newArray = [];
    const len = data.length;
    if (len <= 4) {
      newArray.push(data);
    } else {
      for (let i = 0, j = 0; i < data.length; i++) {
        if (i != 0 && i % 4 == 0) {
          ++j;
        }
        if (!newArray[j]) {
          newArray[j] = [];
        }
        newArray[j].push(data[i]);
      }
    }
    this.setState({
      swapperArray: newArray,
    });
  };
  // 叫号的诊室数据默认
  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, // 当前日期,
          },
        });
        this.initArray(data.result);
      }
    }).catch(() => {
      const data = {
        'errorCode': 0,
        'errorMessage': '成功',
        'result': [
          {
            'locID': '2068',
            'locDesc': '眼科门诊护士站',
            'locENDesc': '',
            'roomID': '1054',
            'roomDesc': '专家诊室1',
            'smallRoomDesc': '专家诊室1',
            'roomENDesc': '',
            'callMsg': {
              'callPat': [{ 'patCallNo': '1号', 'patName': '患*者' }],
              'waitPat': [
                { 'patCallNo': '0800 01', 'patName': '患*者', patCallType: 'V', patCallStatusDesc: '未签' },
              ],
              'reWaitPat': [
                { 'patCallNo': '12', 'patName': '患*者' },
              ],
            },
            'delayPat': '',
            'readMsg': '',
            'areaID': '2068',
            'docName': '王化峰',
            'deviceList': [
              {
                'deviceID': 'BE998867F1FE62AB90EF5D698A1B7AFA3F7B6BF3'
              },
              {
                'deviceID': '0.0.0.0'
              },
              {
                'deviceID': '5e1af217e8d46320AA7DE4007D0836C2F370B1427C0A6D1DBBDA88B1'
              }
            ],
            'path': '/images/wav/',
            'holdNumber': '0',
            'userData': {
              'userID': '5802',
              'userCode': '390007',
              'userDesc': '王化峰',
              'userENDesc': '',
              'userTitleID': '6',
              'userTitleDesc': '副主任医师',
              'userTitleENDesc': '232',
              'titleDisplay': '',
              'userSexID': '1',
              'userSexDesc': '男',
              'userPositionID': '',
              'userPositionDesc': '',
              'userLanguageID': '1',
              'userLanguageDesc': '简体中文',
              'userEmailName': '90',
              'userMobile': '13669859107',
              'userDOB': '1973-05-29',
              'userPswActiveDate': 9999,
              'userDocFlag': 'Y',
              'userNurFlag': 'N',
              'userCertNo': '110441900006510',
              'userSpecID': '',
              'userSpecDesc': '',
              'userSubSpecID': '',
              'userSubSpecDesc': '',
              'userSurgeon': 'N',
              'userAnaesthetist': 'Y',
              'userComments': '',
              'userDateTo': '',
              'userDateFrom': '2024-06-28',
              'userActive': '有效',
              'userEffective': 'Y',
              'userAllowLayout': 'N',
              'userAllowColumn': 'N',
              'userName': '王化峰',
              'userCredTypeID': '1',
              'userCredTypeDesc': '居民身份证',
              'userCredNo': '340202197305290058',
              'userPostID': '',
              'userPostDesc': '',
              'userImage': '/images/photo/ff6beb5f6dbb23eeca997eca0a44df56.jpg',
              'personImage': '',
              'signUrl': '/images/photo/3b09d32a5eb6ba49047666063693b4bc.jpg',
              'userIntroduce': '副主任医师，医学硕士\n东莞光明眼科医院门诊部主任，常平健明眼科医院业务院长，对眼科常见病和疑难病症有丰富的治疗经验，擅长眼表疾病，白内障，青光眼，眼底病，眼外伤等疾病的诊治，擅长白内障超声乳化摘除加人工晶体植入术，玻璃体视网膜手术，尤其对视网膜脱离和糖尿病视网膜病变的手术治疗有非常丰富的经验。\n中山大学中山眼科中心硕士研究生毕业，从事眼科临床工作二十余年,担任广东省医院协会眼健康管理专业委员会常委，广东省医师协会眼科分会眼底外科学组委员，广东省视光学学会眼底影像专委会委员，广东省医师协会眼科分会眼外伤学组委员。',
              'insuUserCode': 'D441901014389',
              'superDocFlag': 'N',
              'attendDocFlag': 'N',
              'optometryFlag': 'N',
              'financialAuthority': 'N',
              'hospDesc': '东莞常平健明眼科医院',
              'organizationCode': 'H44190100519',
              'businesslicense': '91441900MA4UNP4N95',
              'certNo': '110441900006510',
              'userLocked': 0,
              'userTypeDesc': '医师/麻醉医生/',
              'locCode': '',
              'locDesc': '眼科门诊护士站',
              'roomID': '1054',
              'roomCode': '',
              'roomDesc': '专家诊室1',
              'userQrCode': 'https://np.h03.p0551.com/doctorpage/caf1ecdde8c9e81d321e0099ac4dde1f6ed689480130321e43ec40ad6dc82c1b60e259f5500a4deae7d3c1bd110fed012d3b72b372a69fb41b344f1762d946d8'
            },
            'voicenameArr': [
              'zh-CN',
              'zh-HK'
            ],
            'rate': 0
          },
          {
            'locID': '2068',
            'locDesc': '眼科门诊护士站',
            'locENDesc': '',
            'roomID': '1057',
            'roomDesc': '专家诊室4',
            'smallRoomDesc': '专家诊室4',
            'roomENDesc': '',
            'callMsg': {
              'callPat': [
                {
                  'patName': '',
                  'patCallNo': '',
                  'patCallStatus': '',
                  'patCallStatusDesc': ''
                }
              ],
              'waitPat': [],
              'reWaitPat': [],
              'delayPat': ''
            },
            'delayPat': '',
            'readMsg': '',
            'areaID': '2068',
            'docName': '张雪玲',
            'deviceList': [
              {
                'deviceID': 'BE998867F1FE62AB90EF5D698A1B7AFA3F7B6BF3'
              },
              {
                'deviceID': '5e1af217e8d46320AA7DE4007D0836C2F370B1427C0A6D1DBBDA88B1'
              }
            ],
            'path': '/images/wav/',
            'holdNumber': 1,
            'userData': {
              'userID': '6539',
              'userCode': '340141',
              'userDesc': '张雪玲',
              'userENDesc': '',
              'userTitleID': '5',
              'userTitleDesc': '主任医师',
              'userTitleENDesc': '231',
              'titleDisplay': '',
              'userSexID': '2',
              'userSexDesc': '女',
              'userPositionID': '',
              'userPositionDesc': '',
              'userLanguageID': '1',
              'userLanguageDesc': '简体中文',
              'userEmailName': '89',
              'userMobile': '13669898332',
              'userDOB': '1959-11-17',
              'userPswActiveDate': 9999,
              'userDocFlag': 'N',
              'userNurFlag': 'N',
              'userCertNo': '199844110420620591117004',
              'userSpecID': '',
              'userSpecDesc': '',
              'userSubSpecID': '',
              'userSubSpecDesc': '',
              'userSurgeon': 'N',
              'userAnaesthetist': 'N',
              'userComments': '',
              'userDateTo': '',
              'userDateFrom': '2024-11-25',
              'userActive': '有效',
              'userEffective': 'Y',
              'userAllowLayout': '',
              'userAllowColumn': '',
              'userName': '张雪玲',
              'userCredTypeID': '1',
              'userCredTypeDesc': '居民身份证',
              'userCredNo': '420620591117004',
              'userPostID': '',
              'userPostDesc': '',
              'userImage': '/images/photo/f46bea3ff2065c581a6c0fb22cb1ea6a.png',
              'personImage': '',
              'signUrl': '',
              'userIntroduce': '主任医师 东莞光明眼科医院特聘专家\n擅 长：中西医结合治疗眼科常见病、多发病，尤其是对眼表疾病、白内障、青光眼、眼外伤、眼底病的诊断和治疗\n经历：曾任东莞市中医院眼耳鼻喉科主任、中心门诊部主任、东莞市医学会眼科分会委员。从事眼科临床工作四十余年，积累了丰富的临床诊疗经验。',
              'insuUserCode': 'D441901008067',
              'superDocFlag': 'N',
              'attendDocFlag': 'N',
              'optometryFlag': 'N',
              'financialAuthority': 'N',
              'hospDesc': '东莞光明眼科医院',
              'organizationCode': '74366622544190031A5122',
              'businesslicense': '74366622544190031A5122',
              'certNo': '199844110420620591117004',
              'userLocked': 0,
              'userTypeDesc': '',
              'locCode': '',
              'locDesc': '眼科门诊护士站',
              'roomID': '1057',
              'roomCode': '',
              'roomDesc': '专家诊室4',
              'userQrCode': 'https://np.h03.p0551.com/doctorpage/48ec77d28e35953d627330a854ef2d62e95595f37f10fd78d1b733eb5b0add7ac637d5a4258f18be32ee1b1cca7761d85b217ccf8c120c293710c957d81da28a'
            },
            'voicenameArr': [
              'zh-CN',
              'zh-HK'
            ],
            'rate': 0
          }
        ]
      };
      if (data && data.result) {
        this.setState({
          patList: data.result,
          dateStr: {
            dateNow: data.curDate, //当前日期,
            weekNow: data.curWeekDate, // 当前日期,
          },
        });
        this.initArray(data.result);
      }
    });
  };
  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.46rem' }}>{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;
