<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div :class="{hasTagsView:needTagsView}" class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
      <right-panel v-if="showSettings">
        <settings />
      </right-panel>
       <el-dialog :title="call.title" :visible.sync="call.open" width="300px" append-to-body @close="closeDialog" >
          <div class="call_content">
            <el-input  type="text" v-model="mobile" placeholder="请输入手机号" />
            <div class="number_list">
              <div class="number_item" @click="addNumber(1)"><p class="number">1</p></div>
              <div class="number_item" @click="addNumber(2)"><p class="number">2</p></div>
              <div class="number_item" @click="addNumber(3)"><p class="number">3</p></div>
              <div class="number_item" @click="addNumber(4)"><p class="number">4</p></div>
              <div class="number_item" @click="addNumber(5)"><p class="number">5</p></div>
              <div class="number_item" @click="addNumber(6)"><p class="number">6</p></div>
              <div class="number_item" @click="addNumber(7)"><p class="number">7</p></div>
              <div class="number_item" @click="addNumber(8)"><p class="number">8</p></div>
              <div class="number_item" @click="addNumber(9)"><p class="number">9</p></div>
              <div class="number_item" @click="addNumber('*')"><p class="number">*</p></div>
              <div class="number_item" @click="addNumber(0)"><p class="number">0</p></div>
              <div class="number_item" @click="addNumber('#')"><p class="number">#</p></div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button  @click="clearNumber()" >清空</el-button>
              <el-button type="primary" @click="callPhone()">呼叫</el-button>
              <el-button  @click="delNumber()" >删除</el-button>
            </div>
          </div>
      </el-dialog>
      <!-- <div class="call" @click="openCall()">
        <img src="../assets/image/call.png"/>
      </div> -->
      <div class="call-controll" v-if="isCall">
        <div class="call-item">
          <div class="call-title">{{$store.state.user.callTitle}}</div>
          <img class="img" @click="callClose()" src="../assets/image/calloff.svg"/>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'


export default {
  name: 'Layout',
  components: {
    AppMain,
    Navbar,
    RightPanel,
    Settings,
    Sidebar,
    TagsView
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      showSettings: state => state.settings.showSettings,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader,
      isCall:state => state.user.isCall,
      companyUser:state => state.user.user
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  data() {
    return {
      mobile:"",
      value: '5',
      call:{
        open:false,
        title:'呼叫'
      },
    }
  },
  created() {

  },
  mounted () {
       // if(this.companyUser.userType=="00"){
       //    this.initSocket(this.companyUser.userId);
       // }
  },
  methods: {
    callPhone(){
        this.callNumber(this.mobile);
        this.mobile="";
    },
    clearNumber(){
      this.mobile="";
    },
    addNumber(number){
        this.mobile=this.mobile+number
    },
    delNumber(){
        this.mobile= this.mobile.substring(0,this.mobile.length-1);
    },
    openCall(){
      this.call.open=true;
    },
    closeDialog(){
      this.clearNumber();
    },
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    },
    callClose(){
      this.callOff()
      this.$store.dispatch('CallOff')
    },
    // initSocket(userId) {
    //     let that=this;
    //     if(!!this.qwIm.aSoket){
    //         this.qwIm.initASocket(userId,true,this);
    //         // 监听socket连接
    //         this.qwIm.aSoket.onopen = function() {
    //             console.log("aSocket 连接成功...");
    //         };
    //         this.qwIm.aSoket.onerror = function() {
    //             console.log("连接错误")
    //         };
    //         // 监听socket消息
    //         const IMUI = this.$refs.IMUI;
    //         this.qwIm.aSoket.onmessage = function(res) {
    //               var data=JSON.parse(res.data);
    //               console.log("aSocket收到服务端内容", JSON.stringify(data));
    //               if(data.cmd=="heartbeat"){ //收到心跳数据不处理
    //                   console.log("heartbeat");
    //               }
    //               //接收消息
    //               if(data.cmd=="warningMsg"){
    //                   // that.$notify.warning({
    //                   //     title:'预警消息',
    //                   //     message: '收到预警消息',
    //                   //     showClose: false
    //                   // });
    //                   that.$notify({
    //                       title: '预警消息',
    //                       message: data.msg,
    //                       type: 'warning',
    //                       position: 'top-right',
    //                       showClose: false
    //                   });
    //               }
    //         };
    //         // 监听socket重连
    //         this.qwIm.aSoket.onreconnect = function(res) {
    //             console.log("aSocket 断线重连...")
    //         };
    //     }
    // },
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - #{$sideBarWidth});
    transition: width 0.28s;
  }

  .hideSidebar .fixed-header {
    width: calc(100% - 54px)
  }

  .mobile .fixed-header {
    width: 100%;
  }
.call{
  background-color: #fff;
  z-index: 99;
  position: fixed;
  bottom: 50px;
  width:50px;
  height: 50px;
  padding: 10px;
  right:30px;
  border-radius: 20px;
  box-shadow:0px 0px 20px rgb(175, 175, 175);
  img{
    width:30px;
    height:30px;
  }
}
.call_content{
  .call_number{
    width: 100%;
    margin: 10px 0px;
    font-size: 28px;
  }
}
.number_list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-direction: row;
  .number_item{
    width: 30%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    .number{
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      width: 50px;
      height:50px;
      border-radius: 50%;
      background: #fff;
      box-shadow:0px 0px 2px rgb(175, 175, 175);
      font-size: 24px;


    }
  }
}
.dialog-footer{
  margin: 10px 0px;
  text-align: center;
}


.call-controll{
  background-color: #fff;
  z-index: 999999;
  position: fixed;
  top: 120px;
  padding: 10px 15px;
  right:50px;
  border-radius: 20px;
  box-shadow:0px 0px 10px rgb(175, 175, 175);
  display: flex;
  align-items: center;
  justify-content: center;
  .call-item{
    display: flex;
    align-items: center;
    justify-content: center;
    .call-title{
      font-size: 16px;
    }
    .img{
      margin-left: 10px;
      width:30px;
      height:30px;
    }
  }

}

</style>
