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';

/**
 * @刘丹: 医生诊室叫号
 */
class DoctorScreen extends React.Component {
  constructor() {
    super();
    this.state = {
      patList: [],
      reWaitPat: [],
    };
  }
  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({
        patList: this.props.patList,
        reWaitPat: this.props.reWaitPat,
      });
    }
  }
  // 链接转二维码链接
  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.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'>
               {userData.userIntroduce  || '医生简介：暂无'}
              </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: '3', 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.patList?.map((item, index) => {
                  if (item.status == 'waiting') {
                    return null;
                  }
                  return (<Grid  columns={3} gap={8} key={index} className='mt'>
                    <Grid.Item span={2}>
                      <div className='table-content'>{item.patName || '***'} { item.patCallNo }</div>
                    </Grid.Item>
                    <Grid.Item span={1}>
                      <div className={'table-content sussess'}>候诊</div>
                    </Grid.Item>
                  </Grid>);
                })}
                <div className="scroll-content">
                  <ScrollTop text={this.state.patList}  isFast={true}>
                    {this.state.patList?.map((item, index) => {
                      if (item.status != 'waiting') {
                        return null;
                      }
                      return (<Grid  columns={3} gap={8} key={index} className='mt'>
                        <Grid.Item span={2}>
                          <div className='table-content'>{item.patName || '***'} { item.patCallNo }</div>
                        </Grid.Item>
                        <Grid.Item span={1}>
                          <div className={item.status == 'waiting' ? 'table-content waiting'      :'table-content sussess'}>
                            {item.status == 'waiting'
                              ? '候诊'
                              : '正在就诊'
                            }
                          </div>
                        </Grid.Item>
                      </Grid>);
                    })}
                  </ScrollTop>
                </div>
              </div>
            </div>
            <div style={{flex: '2', 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">
                <ScrollTop text={this.state.reWaitPat}  isFast={true}>
                  {this.state.reWaitPat.map((item, index) => {
                  return (<Grid columns={1} gap={8} key={index} className='mt'>
                    <Grid.Item span={1}>
                      <div className='table-content'>{item.patName || '***'} {item.patCallNo}</div>
                    </Grid.Item>
                  </Grid>);
                  })}
                </ScrollTop>
              </div>
              </div>
            </div>
          </div>
        </div>
        <div className='footer'>请按显示信息排队就诊，看报告请到报道机或护士站报到！</div>
      </div>
    );
  }
}

export default DoctorScreen;
