<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="main-container">
      <!-- <breadcrumb></breadcrumb> -->
      <navbar/>
      <tags-view/>
      <app-main/>
    </div>
    <div class="chatPopover">
      <el-popover
        v-model="visible"
        placement="right-start"
        width="1130"
        height="658"
        trigger="manual"
        transition="fade-in-linear">
        <lineChat/>
      </el-popover>
    </div>
    <!-- <el-button slot="reference" type="primary" class="btns lineChatIcon" icon="el-icon-service" circle @click="visible = !visible"/> -->
  </div>
</template>

<script>
import { Navbar, Sidebar, TagsView, AppMain } from './components'
import Breadcrumb from '@/components/Breadcrumb'
import ResizeMixin from './mixin/ResizeHandler'
import lineChat from '@/components/lineChat'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    TagsView,
    Breadcrumb,
    AppMain,
    lineChat
  },
  mixins: [ResizeMixin],
  data() {
    return {
      visible: false
    }
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation
        // mobile: this.device === 'mobile' 去掉手机端隐藏左侧菜单
      }
    }
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
    },
    layer_lineChat() {
      this.$layer.iframe({
        content: {
          content: lineChat, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'rowid': '' }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['900px', '656px'],
        shadeClose: true,
        title: '在线客服'
      })
    }

  }
}
</script>

<style  rel="stylesheet/scss" lang="scss">
.chatPopover .el-popover{
  padding: 0;
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }
  .btns{
    position: fixed;
    bottom: 10%;
    right:1%;
  }
  .lineChatIcon{
    z-index: 1400
  }
  .chatPopover{
    position: fixed;
		right: 66%;
    top: 20%;
    z-index: 1400
  }
</style>
