import { Modal } from "antd";
import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { useState } from "react";
import "./bot.less";
import { PhoneTwoTone } from "@ant-design/icons";
import { webRTC } from "@/util/webRtc";

const Ec = (props: Store) => {
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const { usrStore } = props;
  const [userList, setUserList] = useState<any>([]);
  const openDispatch = () => {
    try {
      usrStore.getlist().then(() => {
        setUserList(usrStore.list);
        webRTC.init();
        setIsModalOpen(true);
      });
    } catch (error) {
      console.log(error);
    }
  };
  const callphone = (record: any) => {
    webRTC.calls(record.identity);
  };
  return (
    <>
      <span onClick={openDispatch}> 应急连线</span>
      <Modal
        title={"应急连线"}
        className="owner_model"
        width={800}
        open={isModalOpen}
        afterClose={() => {}}
        onOk={() => {}}
        footer={null}
        onCancel={() => {
          setIsModalOpen(false);
        }}
      >
        <div className="ec_container">
          <div className="ec_left">
            <div className="ec_left_title">
              <h3>应急连线</h3>
            </div>
            <div className="u-item">
              {userList.map((item: any) => {
                return (
                  <div key={item.account}>
                    <div>姓名：{item.user_name} : 未在线</div>
                    <p></p>
                    <div>
                      点击呼叫：
                      <PhoneTwoTone
                        style={{ fontSize: "20px" }}
                        onClick={(items) => {
                          callphone(item);
                        }}
                      />
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="ec_right">
            <div style={{ display: "flex" }}>
              <video
                id="rtcVideo"
                style={{ width: "300px", height: "300px" }}
              ></video>
              <video
                id="remoteVideo"
                style={{ width: "300px", height: "300px" }}
              ></video>
            </div>

            <p
              className="ec_right_end"
              onClick={() => {
                webRTC.close();
              }}
            >
              结束通话
            </p>
          </div>
        </div>
      </Modal>
    </>
  );
};

export default inject("usrStore")(observer(Ec));