<!--在线测试 -->
<template>
<div>
  <div class="chatBox" :style="getRouterViewStyle">
    <div class="outLeftBox"  :style="{width:fold?'0':'400px'}">
      <div  class="leftBox">
        <leftBox  @chatForm="chatForm" />
      </div>
      <el-button :icon="fold?'el-icon-arrow-right':'el-icon-arrow-left'" class='icon' :style="{right:fold?'-38px':'2px'}" circle @click="fold=!fold"></el-button>
    </div>
    <div class="rightBox">
      <rightBox  @submit="submit" :chatForm="form"  />
    </div>
  </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex';
import leftBox from './components/leftBox/index';
import rightBox from './components/rightBox/index';
export default {
  data () {
    return {
      form: undefined,
      fold: false
    };
  },
  components: {leftBox, rightBox},
  computed: {
    ...mapGetters(['getMainContextHeight']),
    getRouterViewStyle () {
      return [
        {'height': this.getMainContextHeight - 32 + 'px'}
      ]
    }
  },

  mounted () {
 
  },

  methods: {
    chatForm (form) {
      this.form = form
    },
    submit () {
      
    }
  }
}

</script>
<style scoped>
.chatBox{
  display: flex;

  width: 100%;

}
.outLeftBox{
  
  height: 100%;
  background: #fff;
  position: relative;
  transition: all 0.3s;

}
.leftBox{

  height: 100%;
  background: #fff;
overflow-y: auto;
overflow-x: hidden;

}
.rightBox{
  margin-left: 10px;
  width:100%;
  height: 100%;
  background: #fff;
  transition: all 0.3s;
}
.icon{
  padding: 5px !important;
  position: absolute;
  top: 40%;
  z-index: 999;
  opacity: 0.5;
  transition: all 0.5s;

}
.icon:hover{
  opacity:1;
}
</style>
