<template>
  <div class="app-container">

      <el-select filterable v-model="qwUserId"  @change="qwUserChange" placeholder="请选择企微账号" clearable size="small">
        <el-option
          v-for="item in qwUserList"
          :key="item.id"
          :label="item.qwUserId"
          :value="item.id">
        </el-option>
      </el-select>

      <div class="imui-center qq-lemon-imui" v-show="showQW">
        <lemon-imui  class="lemon-slot"
          :width="windowWidth"
          :height="windowHeight"
          :user="UserData"
           ref="IMUI"
          :contact-contextmenu="contactContextmenu"
          :theme="theme"
          :hide-menu="hideMenu"
          :hide-menu-avatar="hideMenuAvatar"
          :hide-message-name="hideMessageName"
          :hide-message-time="hideMessageTime"
          :messageTimeFormat="messageTimeFormat"
          @change-menu="handleChangeMenu"
          @pull-messages="handlePullMessages"
          @change-contact="handleChangeContact"
          @change-conversation="handleChangeConversation"
          @message-click="handleMessageClick"
          @menu-avatar-click="handleMenuAvatarClick"
          @pick-image="handleImageClick"
          @send="handleSend">
          <template #cover>
                <div class="cover">
                    <!-- <i class="lemon-icon-message"></i>
                    <p>
                        <b>自定义封面 Lemon</b>IMUI
                    </p> -->
                </div>
          </template>
          <template #message-title="contact">
            <div>
                <div style="display:flex;justify-content:space-between">
                    <span>{{contact.displayName}}</span>
                    <span style="font-size:12px;">
                      <el-button size="mini"  @click="openDrawer('right')">侧边栏</el-button>
<!--                      <span style="cursor:pointer;"  @click="openDrawer('right')">-->
<!--                        右侧  |-->
<!--                      </span>-->
<!--                      <span style="cursor:pointer;" @click="openDrawer('rightInside')">-->
<!--                        右侧内部  |-->
<!--                      </span>-->
<!--                      <span style="cursor:pointer;" @click="openDrawer('center')">-->
<!--                        居中-->
<!--                      </span>-->
                    </span>
                 </div>
                  <div v-if="contact.isGroup" class="slot-group-menu">
                      <span>聊天</span>
                      <span>公告</span>
                      <span>相册</span>
                      <span>文件</span>
                      <span>活动</span>
                      <span>设置(左键弹出菜单)</span>
                </div>
            </div>
          </template>

          <template #sidebar-contact-fixedtop="contact">
            <div class="slot-contact-fixedtop">
              <el-input size="mini" class="slot-search" placeholder="搜索通讯录" />
            </div>
          </template>

          <template #sidebar-message-fixedtop="message">
            <div class="slot-message-fixedtop">
              <el-input size="mini" v-model="contactName" class="slot-search" placeholder="搜索" />
            </div>
          </template>

         <template #message-side="contact">
              <div v-if="contact.isGroup" class="slot-group">
                    <div class="slot-group-title">群通知</div>
                    <div class="slot-group-notice">
                      进群请改备注，格式，工作地点-姓名，请大家配合谢谢
                    </div>
                    <div class="slot-group-title">群成员</div>
                    <div class="slot-group-panel">
                      <input class="slot-search" placeholder="搜索群成员" />
                      <div class="slot-group-member">
                        <div class="avatar"><img src="https://p.qqan.com/up/2020-2/2020022821001845128.jpg"></div>
                        <div class="name">像梦一样自由</div>
                      </div>
                      <div class="slot-group-member">
                        <div class="avatar"><img src="https://p.qqan.com/up/2018-4/15244505348390471.jpg"></div>
                        <div class="name">野火</div>
                      </div>
                      <div class="slot-group-member">
                        <div class="avatar"><img src="https://p.qqan.com/up/2021-1/20211411391666.jpg"></div>
                        <div class="name">霸王花</div>
                      </div>
                       <div class="slot-group-member">
                        <div class="avatar"><img src="https://p.qqan.com/up/2021-1/2021113104111220.jpg"></div>
                        <div class="name">森系Style</div>
                      </div>

                    </div>
               </div>
          </template>
        </lemon-imui>
      </div>

      <el-dialog :visible.sync="dialogVisible" append-to-body width="35%">
         <img style="width:100%;height:auto" :src="dialogImageUrl" alt="" />
      </el-dialog>

       <el-dialog :visible.sync="dialogVideoVisible"
               :close-on-click-modal="false"
               :destroy-on-close="true"
               :width="aplayer.pWidth"
               :height="aplayer.height"
               @close="dialogVideoVisible=false"
               ref="player">
          <videoPlayer  :width="aplayer.width" :height="aplayer.height"  :videoWidth="aplayer.videoWidth"  :videoHeight="aplayer.videoHeight"   :vid="aplayer.vid"  :autoplay="true"
            :source="dialogVideoUrl" :cover="dialogVideoCover" ref="player"></videoPlayer>
         </el-dialog>


  </div>
</template>

<script>

import store from "@/store";
import LemonMessageVoice from "@/components/LemonUI/components/message/voice.vue";
import { getContactsByUser,getConversations,getMessageList,getConversation,sendMsg,getQwUserList} from '@/api/qw/im';
import Conversations from "@/components/LemonUI/database/conversations";
import EmojiData from "@/components/LemonUI/database/emoji";
import '@/components/LemonUI/index.css';
import VideoPlayer from '@/components/VideoPlayer/VueAliplayer.vue'

let pages = {};
export default {
  name: "qqChat",
  components: {
    VideoPlayer
  },
  data() {
    return {
      contactName:'',
      appKey:null,
      qwUserId:null,
      qwUserList:[],
      theme: "default",
      IMUI:null,
      contactContextmenu: [
        {
          text: "删除该聊天",
          click: (e, instance, hide) => {
            const { IMUI, contact } = instance;
            IMUI.updateContact({
              id: contact.id,
              lastContent: null,
            });
            if (IMUI.currentContactId == contact.id) IMUI.changeContact(null);
            hide();
          },
        },
        {
          text: "设置备注和标签",
        },
        {
          text: "投诉",
        },
        {
          icon: "lemon-icon-message",
          text: "加入黑名单",
          render: (h, instance, hide) => {
            return (
              <div style="display:flex;justify-content:space-between;align-items:center;width:130px">
                <span>加入黑名单</span>
                <span>
                  <input type="checkbox" id="switch" />
                  <label id="switch-label" for="switch">
                    Toggle
                  </label>
                </span>
              </div>
            );
          },
        },
        {
          click(e, instance, hide) {
            const { IMUI, contact } = instance;
            IMUI.removeContact(contact.id);
            if (IMUI.currentContactId == contact.id) IMUI.changeContact(null);
            hide();
          },
          color: "red",
          text: "删除好友",
        },
      ],
      hideMenuAvatar: false,
      hideMenu: false,
      hideMessageName: false,
      hideMessageTime: true,
      qwUser:{},
      showQW:false,
      UserData: {
        // id: "1000",
        // displayName: "June",
        // avatar: "https://p.qqan.com/up/2018-4/15244505348390471.jpg",
      },
      contactData:null,
      conversationData:Conversations,
      dialogImageUrl: '',
      dialogVisible: false,
      dialogVideoVisible:false,
      dialogVideoUrl:'',
      dialogVideoCover:'',
      imageArr:[],
      pickUploadImgData:null,
      aplayer: {
        vid: "bf9b7e4a36d84aea8cee769765fbc28b",
        pWidth:"1040px",
        width:"1000px",
        height:"900px",
        videoWidth:"1000px",
        videoHeight:"900px"

      },
      player: null,
      roomMembers:[],
      roomAdmins:[],
      roomInfo:null,
      windowWidth: document.documentElement.clientWidth*0.6,  //实时屏幕宽度
      windowHeight: document.documentElement.clientHeight*0.7,   //实时屏幕高度
      queryParams: {
          pageNum: 1,
          pageSize: 10,
          conversationId: null,
          userId:null
        },
    };
  },
  created(){
    //获取企微列表
    getQwUserList().then(response => {
      this.qwUserList = response.data;
      if (this.qwUserList.length>0){
        this.qwUser = this.qwUserList[0];
        this.appKey = this.qwUser.appKey;
        this.setQwUserInfo();
        this.getConversation();
      }else {
        this.qwUser={};
      }
    });
  },
  mounted() {
    this.$watch('appKey', (newValue, oldValue) => {
      if (newValue) {
        if (!this.qwIm.hasLogin) {
          this.initSocket(this.appKey);
          console.log("appkey====",this.appKey);
        }
      }
    });
    // this.UserData.id=this.qwUser.userId;
    // this.UserData.displayName=this.qwUser.qwUserName;
    // this.UserData.avatar="https://cos.his.cdwjyyh.com/fs/20241231/22a765a96da247d1b83ea94fef438a41.png";
    this.showQW=true;

    const contactData1 = {
            id: "contact-1",
            displayName: "工作协作群",
            avatar: "http://upload.qqbodys.com/img/weixin/20170804/ji5qxg1am5ztm.jpg",
            index: "[1]群组",
            unread: 0,
            lastSendTime: 1566047865417,
            lastContent: "2",
    };
    const contactData2 = {
            id: "contact-2",
            displayName: "自定义内容",
            avatar: "http://upload.qqbodys.com/img/weixin/20170807/jibfvfd00npin.jpg",
            //index: "Z",
            click(next) {
                next();
            },
            renderContainer: () => {
                return <h1 style="text-indent:20px">自定义页面</h1>;
            },
            lastSendTime: 1345209465000,
            lastContent: "12312",
            unread: 2,
    };
    const contactData3 = {
            id: "contact-3",
            displayName: "铁牛",
            avatar: "http://upload.qqbodys.com/img/weixin/20170803/jiq4nzrkrnd0e.jpg",
            index: "T",
            unread: 32,
            lastSendTime: 3,
            lastContent: "你好123",
    };
    const IMUI = this.$refs.IMUI;

    var conversationData = Conversations.filter(item => item.conversationId<=1);
    conversationData.sort((a1, a2) => {
      return a2.lastSendTime - a1.lastSendTime;
    });
    // this.getContacts();  //获取联系人信息
    // this.getConversation();   //获取会话信息

    IMUI.initMenus([
      {
        name: "messages",
      },
      {
        name: "contacts",
      },
      // {
      //   name: "custom1",
      //   title: "自定义按钮1",
      //   unread: 0,
      //   render: menu => {
      //     return <i class="lemon-icon-attah" />;
      //   },
      //   renderContainer: () => {
      //     return (
      //       <div class="article">
      //         <ul>
      //         </ul>
      //         <lemon-contact  props={{  }} style="margin:20px"/>
      //         <lemon-contact props={{  }} style="margin:20px" />
      //       </div>
      //     );
      //   },
      //   isBottom: true,
      // },
      // {
      //   name: "custom2",
      //   title: "自定义按钮2",
      //   unread: 0,
      //   click: () => {
      //     alert("拦截导航点击事件");
      //   },
      //   render: menu => {
      //     return <i class="lemon-icon-group" />;
      //   },
      //   isBottom: true,
      // },
    ]);
    IMUI.initEmoji(EmojiData);

  },

  methods: {
    initSocket(appKey) {
         let that=this;
         if(!!this.qwIm.socket){
            this.qwIm.initSocket(appKey,true);
            // 监听socket连接
            this.qwIm.socket.onopen = function() {
                console.log("socket 连接成功...");
            };
            this.qwIm.socket.onerror = function() {
                console.log("连接错误")
            };
            // 监听socket消息
            const IMUI = this.$refs.IMUI;
            this.qwIm.socket.onmessage = function(res) {
                 var data=JSON.parse(res.data);
                 console.log("收到服务端内容", JSON.stringify(data));
                  if(data.cmd=="heartbeat"){ //收到心跳数据不处理
                      console.log("heartbeat");
                  }
                  //接收消息
                  if(data.cmd=="receiveMsg"){
                       var msgData=JSON.parse(data.data);
                        console.log("收到消息：>>>>>",msgData)
                       if(!IMUI.hasConversation(msgData.toContactId)){  //收到新消息时是最新的会话，添加该会话
                              let queryParams={conversationId:msgData.toContactId,userId:that.qwUser.userId};
                              getConversation(queryParams).then(response => {
                                    if(response.code==200){
                                        var conversation=response.data;
                                        IMUI.appendConversation(conversation);
                                        that.appendMessageAction(msgData);
                                    }
                             });
                       }else{
                            that.appendMessageAction(msgData);
                            let conversation=IMUI.findConversation(msgData.toContactId);
                            IMUI.topPopConversations(conversation);
                            let queryParams={conversationId:msgData.toContactId,userId:that.qwUser.id};
                            // getConversation(queryParams).then(response => {
                            //       if(response.code==200){
                            //           var conversation=response.data;
                            //           var unread=conversation.unread;
                            //           if(!unread){
                            //              conversation.unread=1;
                            //           }else{
                            //             conversation.unread+=1;
                            //           }
                            //           IMUI.topPopConversations(conversation);
                            //
                            //       }
                            //  });
                       }
                  }
            };
            //监听socket重连
            this.qwIm.socket.onreconnect = function(res) {
                console.log("socket 断线重连...")
            };
        }


    },

    qwUserChange(id){
      let index= this.qwUserList.findIndex(item => item.id === id);
      this.qwUser=this.qwUserList[index];
      // this.qwUser.userId = this.qwUser.id.toString();
      // console.log("zyp qwUser:...",this.qwUser)
      this.getConversation();   //获取会话信息
      this.setQwUserInfo();
      this.initSocket(this.qwUser.appKey);
    },

    setQwUserInfo(){
      this.UserData.id=this.qwUser.id;
      this.UserData.displayName=this.qwUser.qwUserName;
      this.UserData.avatar="https://cos.his.cdwjyyh.com/fs/20241231/22a765a96da247d1b83ea94fef438a41.png";
    },

    getContacts(){
      getContactsByUser(this.qwUser.id).then(response => {
           this.contactData = response.data;
           this.$refs.IMUI.initContacts(this.contactData);
           //console.log("qxj request contactData:"+JSON.stringify(this.contactData));
      });
    },
    getConversation(){
      let that=this;
      const IMUI = this.$refs.IMUI;
      getConversations(this.qwUser.id).then(response => {
           this.conversationData = response.data;
           IMUI.initConversations(response.data);
           var fstConversation=this.conversationData[0];
           // console.log("qxj fstConversation:"+JSON.stringify(fstConversation));
           if(fstConversation) {
             IMUI.changeContact(fstConversation.conversationId);
             // setTimeout(() => {
             //      IMUI.changeContact(1688856679458971);
             // }, 500);
           }
           //console.log("qxj request conversation:"+JSON.stringify(response.data));
      });
    },
    messageTimeFormat(time) {
      return this.friendlyDate(time);
    },
    changeTheme() {
       this.theme = this.theme == "default" ? "blue" : "default";
    },
    scrollToTop() {
      document.body.scrollIntoView();
    },
    openDrawer(position) {
            const IMUI = this.$refs.IMUI;
            const params = {
                position,
                render: contact => {
                return (
                    <div style="padding:15px">
                    <h5>{contact.displayName}</h5>
                    <span style="cursor:pointer;" on-click={IMUI.closeDrawer}>关闭侧边栏</span>
                    </div>
                );
                },
      };
      // if (position == "center") {
      //   params.width = "50%";
      //   params.height = "50%";
      // } else if (position == "rightInside") {
      //   params.height = "90%";
      //   params.offsetY = "10%";
      // }
      IMUI.openDrawer(params);
    },
    handlePullMessages(contact, next,instance) {
       const { IMUI } = this.$refs;
       let isEnd = false;
       getMessageList(this.queryParams).then(response => {
          if(response.code==200){
            isEnd=response.data.isLastPage;
            next(response.data.list, isEnd);
            if(!isEnd){
              pages[contact.conversationId]++;
              this.queryParams.pageNum=pages[contact.conversationId];
              this.queryParams.userId = this.qwUser.id
            }
          }
      });
      // setTimeout(() => {
      //       let isEnd = true;
      //       next(MessagesData[contact.conversationId], isEnd);
      // }, 2000);

    },
    handleChangeConversation(conversation, instance) {
        //console.log("qxj ChangeConversation:"+JSON.stringify(conversation));
        if (!pages[conversation.conversationId]){
            pages[conversation.conversationId] =1;
        }
       this.queryParams.pageNum=pages[conversation.conversationId];
       this.queryParams.conversationId=conversation.conversationId;
       this.queryParams.userId = this.qwUser.id
       if(conversation.unread>0){
          conversation.unread=0;
          instance.updateContact(conversation);
       }
       // instance.closeDrawer();
    },
    handleChangeContact(contact, instance) {

    },

    //收到消息后添加消息显示
    appendMessageAction(msgData){
          if(msgData.type=="text" || msgData.type=="image" || msgData.type=="voice"){     //文本   text  image  video  voice
              const message = {
                    id: msgData.id,
                    status: msgData.status,
                    type: msgData.type,
                    sendTime: msgData.sendTime,
                    content: msgData.content,
                    params1: "1",
                    params2: "2",
                    toContactId: msgData.toContactId,
                    fromUser: msgData.fromUser,
              };
              this.appendRemoteMessage(message);
           }
           else if(msgData.type=="file"){
               const message = {
                    id: msgData.id,
                    status: msgData.status,
                    type: msgData.type,
                    sendTime: msgData.sendTime,
                    content: msgData.content,
                    toContactId: msgData.toContactId,
                    fromUser: msgData.fromUser,
                    fileName:msgData.fileName,
                    fileSize:msgData.fileSize
              };
              this.appendRemoteMessage(message);
           }
           else{
              const message = {
                    id: msgData.id,
                    status: msgData.status,
                    type: msgData.type,
                    sendTime: msgData.sendTime,
                    content: msgData.content,
                    toContactId: msgData.toContactId,
                    fromUser: msgData.fromUser,
              };
              this.appendRemoteMessage(message);
           }
    },
    //发送消息
    handleSend(message, next, file) {
      const IMUI = this.$refs.IMUI;
      var params={};
      if(message.type=="text"){  //text   image   voice   video
          params={"sessionId":message.toContactId,"appKey":this.qwUser.appKey,"content":message.content};
          sendMsg(params).then(response => {
              if(response.code==200){
                  var conversation=IMUI.findConversation(message.toContactId);
                  conversation.lastSendTime=message.sendTime;
                  conversation.lastContent=message.content;
                  IMUI.topPopConversations(conversation);
                  next();
              }
          });
      }
      // if(message.type=="image"){
      //     params={"conversationId":message.toContactId,"deviceId":this.qwUser.deviceId,"userId":this.qwUser.userId,"materialId":this.pickUploadImgData.id};
      //     sendImageMsg(params).then(response => {
      //         if(response.code==200){
      //             var conversation=IMUI.findConversation(message.toContactId);
      //             conversation.lastSendTime=message.sendTime;
      //             conversation.lastContent="[图片]";
      //             IMUI.topPopConversations(conversation);
      //             next();
      //         }
      //     });
      // }
      // setTimeout(() => {
      //   next();
      // }, 1000);
    },
    handleMenuAvatarClick() {
      console.log("Event:menu-avatar-click");
    },
    //聊天工具栏点击图片
    handleImageClick() {
      // this.$refs.material.openMaterial(this.qwUser.deviceId);
      console.log("Event:handleImageClick");
    },
    //选择图片框确定按钮回调
    handlePickImageDone(data){
        console.log("handlePickImageDone:"+JSON.stringify(data));
        this.pickUploadImgData=data;
        const IMUI = this.$refs.IMUI;
        IMUI._handleRemoteImage(data.url);
    },
    tooglePlayVideo(data){
       this.dialogVideoVisible=true;
       this.dialogVideoUrl=data.content;
       this.dialogVideoCover=data.url;
       const player = this.$refs.player.instance
       player && player.play()
    },
    handleMessageClick(e, key, message, instance) {
      // console.log("点击了消息", e, key, message);
      //console.log("qxj message:"+JSON.stringify(message));
      if(message.type=="image"){
           var url=!!message.url?message.url:message.content;
           this.handlePicturePreview(url);
      }
      else if(message.type=="video"){
           this.tooglePlayVideo(message);
      }
      else if(message.type=="file"){

      }
      if (key == "status") {
        instance.updateMessage({
          id: message.id,
          status: "going",
          content: "正在重新发送消息...",
        });
        setTimeout(() => {
          instance.updateMessage({
            id: message.id,
            status: "succeed",
            content: "发送成功",
          });
        }, 2000);
      }
    },

    changeMenuAvatarVisible() {
      this.hideMenuAvatar = !this.hideMenuAvatar;
    },
    changeMenuVisible() {
      this.hideMenu = !this.hideMenu;
    },
    changeMessageNameVisible() {
      this.hideMessageName = !this.hideMessageName;
    },
    changeMessageTimeVisible() {
      this.hideMessageTime = !this.hideMessageTime;
    },
    removeMessage() {
        const { IMUI } = this.$refs;
        const messages = IMUI.getCurrentMessages();
        const id = messages[messages.length - 1].id;
        if (messages.length > 0) {
            IMUI.removeMessage(id);
        }
    },
    updateMessage() {
        const { IMUI } = this.$refs;
        const messages = IMUI.getCurrentMessages();
        const message = messages[messages.length - 1];
        if (messages.length > 0) {
            const update = {
            id: message.id,
            status: "succeed",
            type: "file",
            fileName: "被修改成文件了.txt",
            fileSize: "4200000",
            };
            if (message.type == "event") {
            update.fromUser = this.user;
            }
            IMUI.updateMessage(update);
            IMUI.messageViewToBottom();
      }
    },
    appendCustomMessage() {
        const { IMUI } = this.$refs;
        const message = {
            id: generateRandId(),
            status: "succeed",
            type: "voice",
            sendTime: getTime(),
            content: "语音消息",
            params1: "1",
            params2: "2",
            toContactId: "contact-1",
            fromUser: this.user,
        };
        IMUI.appendMessage(message, true);
    },
    appendMessage() {
        const { IMUI } = this.$refs;
        const contact = IMUI.currentContact;
        const message = generateMessage("contact-3");
        message.fromUser = {
            ...message.fromUser,
            ...this.user,
        };
        IMUI.appendMessage(message, true);
        console.log("🚀 ~ file: App.vue ~ line 1508 ~ appendMessage ~ message", message)
    },
    appendEventMessage() {
      const { IMUI } = this.$refs;
      const message = {
        id: generateRandId(),
        type: "event",
        content: (
          <span>
            邀请你加入群聊{" "}
            <span
              style="color:#333;cursor:pointer"
              on-click={() => alert("OK")}
            >
              接受
            </span>
          </span>
        ),
        toContactId: "contact-3",
        sendTime: getTime(),
      };
      IMUI.appendMessage(message, true);
    },
    appendRemoteMessage(message) {  //从服务端返回的消息
        const { IMUI } = this.$refs;
        IMUI.appendMessage(message, true);
    },
    updateContact() {
      this.$refs.IMUI.updateContact({
        id: "contact-3",
        unread: 10,
        displayName: generateRandWord(),
        lastSendTime: getTime(),
        lastContent: "修改昵称为随机字母",
      });
    },
    handleChangeMenu() {
      console.log("Event:change-menu");
    },
    openCustomContainer() {

    },
    handlePicturePreview(url) {
        this.dialogImageUrl = url;
        this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
    .imui-center{
        margin-top:30px;
        align-items: center;
        justify-content: center;
        height: 80vh;
    }
    .lemon-wrapper{
        border:1px solid #ddd;
        //height: !important;
    }
    .lemon-drawer{
        border:1px solid #ddd;
        border-left:0;
    }
    .more {
        font-size: 12px;
        line-height: 24px;
        height: 24px;
        position: absolute;
        top: 14px;
        right: 14px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        color: #f1f1f1;
        display: inline-block;
        border-radius: 4px;
        background: #111;
        padding: 0 8px;
    }

    .el-dialog__headerbtn{
         top:10px;
    }

  .el-dialog:not(.is-fullscreen) {
        margin-top: 0 !important;
    }

</style>


<style lang="scss">
    .lemon-container__title{
     padding-bottom:10px;
    }
    .slot-group{
     width:200px;
    }

    .slot-group-title{
      padding:0 0 10px 0;
    }

    .slot-group-notice{
      padding: 10px 10px;
    }


    .slot-search{
      width:calc(100% - 20px) ;
      margin:5px 10px;
      padding:3px 0px;
    }


    .slot-group-member{
      display: flex;
      padding: 5px 0;
      flex:1;
      font-size: 14px;
      align-items: center;
    }

    .avatar{
      width: 30px;
      height: 30px;
      line-height: 30px;
      margin-right:5px;
    }

    .img{
      vertical-align: middle;
      border-style: none;
      width: 100%;
      height: 100%;
      line-height: 30px;
      border-radius: 50%;
    }




</style>
