import React from 'react';
import logo from '@assets/images/logo.png';
import userImage from '@assets/images/userImage.png';
import { Grid } from 'antd-mobile';
import QRCode from 'qrcode';
import ScrollTop from '@components/ScrollTop.jsx';
import { Swiper } from 'antd-mobile';
import { initArray } from '@utils/index.js';
/**
 * @刘丹: 医生诊室叫号
 */
class DoctorScreen extends React.Component {
  constructor() {
    super();
    this.state = {
      patList: [],
      waitPat: [],
      callPat: [],
      reWaitPat: [],
      copyReWaitPat: [],
    };
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    let newState = {};
    let nPatList = nextProps?.patList || [];
    if (JSON.stringify(nPatList) !== JSON.stringify(prevState.patList)) {
      newState.patList = JSON.parse(JSON.stringify(nPatList));
      newState.callPat = nextProps?.callPat || [];
      newState.waitPat = initArray(nextProps?.waitPat || [], 7);
    }
    let nReWaitPat = nextProps?.reWaitPat || [];
    if (JSON.stringify(nReWaitPat) !== JSON.stringify(prevState.copyReWaitPat)) {
      newState.copyReWaitPat = JSON.parse(JSON.stringify(nReWaitPat));
      newState.reWaitPat = initArray(nReWaitPat, 8);
    }
    return Object.keys(newState).length ? newState : null;
  }
  componentDidMount() {
    // this.getQrcSrc('https://www.kimi.com/');
  }
  componentDidUpdate(prev) {
    if (prev?.userData?.userQrCode != this.props.userData?.userQrCode) {
      this.getQrcSrc(this.props.userData?.userQrCode);
    }
    // if (prev.patList != this.props.patList) {
    //   this.setState({
    //     callPat: this.props.callPat,
    //     waitPat: initArray(this.props.waitPat, 7),
    //     reWaitPat: initArray(this.props.reWaitPat, 8),
    //   });
    // }
  }
  // 链接转二维码链接
  getQrcSrc = (src) => {
    if (!src) {
      return;
    }
    QRCode.toDataURL(src).then((url) => {
      document.querySelector('#qrccodeimg').src = url;
    });
  };
  render() {
    const { userData = {} } = this.props;
    return (
      <div className='page-body doctor-body'>
        <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='heaer-btn'>
            <span className='date'>接诊中</span>
            <br /> Opening
          </span>
        </div>
        <Grid columns={3} gap={8} className='mt'>
          <Grid.Item span={1}>
            <div className='section'>
              <div className='chinese-name big'>{userData.roomDesc || '诊区'}</div>
            </div>
          </Grid.Item>
          <Grid.Item span={2}>
            <div className='section'>
              <div className='chinese-name big'>{userData.roomLocDesc || userData.locDesc || '科室'}</div>
            </div>
          </Grid.Item>
        </Grid>
        <div className='section mt'>
          <Grid columns={23} gap={8}>
            <Grid.Item span={4} style={{ textAlign: 'center' }}>
              <img
                src={userData.userImage || userImage}
                className='user-header'
              />
            </Grid.Item>
            <Grid.Item span={8}>
              <div className='section section-inner'>
                <div className='chinese-name'>{userData.userDesc || '医生'}</div>
              </div>

            </Grid.Item>
            <Grid.Item span={11}>
              <div className='section section-inner'>
                <div className='chinese-name'>{userData.userTitleDesc || '职称'}</div>
              </div>
            </Grid.Item>
          </Grid>
        </div>
        <div className='section mt'>
          <Grid columns={4} gap={16}>
            <Grid.Item span={3}>
              <div className='doctor-profile'>
                <ScrollTop text={userData.userIntroduce}>
                  {userData.userIntroduce || '医生简介：暂无'}
                </ScrollTop>
              </div>
            </Grid.Item>
            <Grid.Item span={1}>
              <div className='center'>
                <img
                  className='qrccode-img'
                  id="qrccodeimg"
                />
              </div>
              <div className='qrccode-text'>关注医师</div>
            </Grid.Item>
          </Grid>
        </div>
        <div style={{ flex: 1, overflow: 'hidden' }} className='mt'>
          <div style={{ display: 'flex', height: '100%' }}>
            <div style={{ flex: '7', height: '100%', marginRight: '0.8rem' }}>
              <div className='table section scroll-wrap'>
                <Grid columns={1} gap={8}>
                  <Grid.Item span={1}>
                    <div className='table-header'>候诊</div>
                  </Grid.Item>
                </Grid>
                {this.state.callPat?.map((item, index) => {
                  return (<Grid columns={14} gap={8} key={index} className='mt'>
                    <Grid.Item span={10}>
                      <div className='table-content'>{item.patCallNo} {item.patName || '***'}</div>
                    </Grid.Item>
                    <Grid.Item span={4}>
                      <div className={'table-content red'}>就诊</div>
                    </Grid.Item>
                  </Grid>);
                })}
                <div className="scroll-content">
                  <Swiper
                    autoplay={true}
                    direction='vertical'
                    autoplayInterval={8000}
                    loop={true}
                    style={{ height: '100%' }}
                    total={this.state.waitPat.length}
                    indicator={false}
                    defaultIndex={1}
                  >
                    {this.state.waitPat.map((patlist, index) => {
                      return <Swiper.Item key={index} style={{ height: '100%', background: '#fff' }}>
                        {patlist?.map((item, index) => {
                          return (<Grid columns={14} gap={8} key={index} className='mt'>
                            <Grid.Item span={10}>
                              <div className='table-content'>{item.patCallType} {item.patCallNo} {item.patName || '***'} </div>
                            </Grid.Item>
                            <Grid.Item span={4}>
                              <div className={
                                item.patCallStatusDesc == '待诊'
                                  ? 'table-content green'
                                  : item.patCallStatusDesc == '未签'
                                    ? 'table-content yellow'
                                    : 'table-content'
                              }>
                                {item.patCallStatusDesc}
                              </div>
                            </Grid.Item>
                          </Grid>);
                        })}
                      </Swiper.Item>;
                    })}
                  </Swiper>
                </div>
              </div>
            </div>
            <div style={{ flex: '3', height: '100%' }}>
              <div className='table section scroll-wrap'>
                <Grid columns={1} gap={8}>
                  <Grid.Item span={1}>
                    <div className='table-header'>看报告</div>
                  </Grid.Item>
                </Grid>
                <div className="scroll-content">
                  <Swiper
                    autoplay={true}
                    autoplayInterval={8000}
                    loop={true}
                    direction='vertical'
                    style={{ height: '100%' }}
                    total={this.state.reWaitPat.length}
                    indicator={false}
                    defaultIndex={1}
                  >
                    {this.state.reWaitPat.map((patlist, index) => {
                      return <Swiper.Item key={index} style={{ height: '100%', background: '#fff' }}>
                        {patlist.map((item, index) => {
                          return (<Grid columns={1} gap={8} key={index} className='mt'>
                            <Grid.Item span={1}>
                              <div className='table-content'> {item.patCallNo}{item.patName || '***'}</div>
                            </Grid.Item>
                          </Grid>);
                        })}
                      </Swiper.Item>;
                    })}
                  </Swiper>
                  <div>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className='footer'>看报告,请到报到机或护士站报到！</div>
      </div>
    );
  }
}

export default DoctorScreen;
