<template>
  <div class="tabs-body">
		<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="顾客" name="first">
        <div class="tool-body">
          <cuss-service></cuss-service>
        </div>
      </el-tab-pane>
      <el-tab-pane label="看板" name="second">
        <div class="tool-body">
          <cus-users></cus-users>
        </div>
      </el-tab-pane>
      <el-tab-pane label="话术" name="third">
        <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">用户管理</div></el-tab-pane>
    </el-tabs>
  </div>  
</template>

<script>
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
    },
    methods: {
      handleClick(){
        console.log(43434)
      }
    }
}
</script>

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