<template>
  <div>
    <div v-if="selectId==0">
      <h5 style="text-align: center;margin-top: 100px;">请选择列表进行会话！</h5>
    </div>
    <div class="tabs-body" v-if="selectId!=0">
  		<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="看板" name="second" @tab-click="handleClick">
          <div class="tool-body">
            <cus-users></cus-users>
          </div>
        </el-tab-pane>
        <el-tab-pane label="顾客" name="first">
          <div class="tool-body">
            <cuss-service></cuss-service>
          </div>
        </el-tab-pane>
        <el-tab-pane label="话术" name="script">
          <div class="tool-body">
            <takel-script></takel-script>
          </div>
        </el-tab-pane>
        <el-tab-pane label="表情包" name="fourth">
          <div class="tool-body">
            <doutu-picture></doutu-picture>
          </div>
        </el-tab-pane>
      <!--   <el-tab-pane label="对比图" name="fivth">
          <div class="tool-body">
            <compre-picture></compre-picture>
          </div>
        </el-tab-pane> -->
        <el-tab-pane label="其他" name="sixth"><div class="tool-body"><el-button type="danger" plain @click="logout">退出</el-button></div></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
import cussService from './cus-service'
import cusUsers from './cus-users'
import takelScript from './takel-script'
import doutuPicture from './doutu-picture'
import comparisonMap from './comparison-map'
import comprePicture from './compre-picture'
import labelUserList from './label-userList'
export default{
    data(){
      return {
        activeName:'second',
      }    
    },
    components: {
        cussService,
        cusUsers,
        takelScript,
        doutuPicture,
        comparisonMap,
        comprePicture,
        labelUserList
    },
    computed: {
        ...mapGetters([
            'selectedChat',
            'selectId'
        ])
    },
    mounted() {
    },
    methods: {
      handleClick(e){
        this.changePanel(e.name)
        if('second'==e.name){

        }
      },
      ...mapActions('baozheng',[
        'changePanel',
        'changeLogin'
      ]),
      logout(){
        this.changeLogin(false)
      }
    }
}
</script>

<style lang="stylus" scoped>
.tabs-body
  height:100%;
  width:100%;
  overflow-y: auto;
  overflow-x: hidden;
  .tool-body
    width:100%;
    overflow-y: auto;
    overflow-x: hidden;
    height:clac(100% - 70px);
    overflow-y: auto;
</style>