import { GetRoomSingnIn, PostRoomSingnIn } from '@/api/Meeting';
import styles from '@/components/SingIn/index.module.scss'
import { storage } from '@/utils';
import { Button, message, Modal } from 'antd';
import { useState, useImperativeHandle, forwardRef } from "react";
const SingIn = forwardRef((props: any, ref: any) => {
  useImperativeHandle(ref, () => ({
    changeModal: () => {
      setSingInModal(true)
      getRoomSingnIn()
    },
    getModal: () => {
      return new Promise((resolve, reject) => {
        setSingInModal(bool => {
          resolve(bool)
          return bool
        })
      })
    },
  }))
  const [singInModal, setSingInModal] = useState(false);
  const [singInList, setSingInList] = useState([]);
  const getRoomSingnIn = async (): Promise<void> => {
    await GetRoomSingnIn().then(res => {
      if (res.code === 200) {
        setSingInList(res.data.map((item: any) => {
          return {
            ...item,
            active: true
          }
        }))
      }
    })
  }
  return (
    <>
      <Modal
        title="会议签到"
        open={singInModal}
        footer={null}
        destroyOnClose={true}
        onCancel={() => setSingInModal(false)}
        centered
        width={'300px'}
      >
        <div className={styles.singInModal}>
          <div className={styles.singInModalContent}>
            {singInList.map((item: any, index: number) => {
              return <div key={index}>
                <span>{item.signInName}</span>
                {item.active ?
                  <Button type="primary" className='m-ant-btn' onClick={async () => {
                    const stateInfo = await JSON.parse(storage.getItem('stateInfo') as string);
                    const singInListTemp: any = [...singInList]
                    singInListTemp[index].active = false;
                    PostRoomSingnIn([{ signInName: item.signInName, roomNum: stateInfo.channelId }]).then(res => {
                      if (res.code === 200) {
                        message.success('签到成功')
                        setSingInList(singInListTemp)
                      }
                    })
                  }}>签到</Button>
                  : <Button type="primary" style={{ backgroundColor: 'rgb(57,66,99)', marginLeft: '10px' }}>已签到</Button>}
              </div>
            })}
          </div>
          <div className={styles.singInModalFooter}>
            <Button type="primary" style={{ backgroundColor: 'rgb(16,20,24)', width: '100%' }}
              onClick={() => setSingInModal(false)}>关闭</Button>
          </div>
        </div>
      </Modal>
    </>
  )
})

export default SingIn