<template>
  <div class="tabs-body">
		<el-collapse v-model="activeName">
      <el-collapse-item v-for="(item, index) in queryLists" :title="item.title" :name="index">

        <div class="query-box" v-for="(ite) in item.numItem">
          <span>{{ite.label}}:</span>
          <span v-if="index!=0" style="color: #007dfd">{{ite.value}}</span>
          <span v-if="index==0">{{ite.value}}</span>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>  
</template>

<script>
export default{
    data(){
      return {
        activeName:'second',
        queryLists:[
          {
            title:'个人统计',
            numItem:[
              {
                label:'今日接入量',
                value:54
              },
              {
                label:'今日预约量',
                value:54
              },
              {
                label:'今日开单量',
                value:54
              },
              {
                label:'本月开单量',
                value:54
              },
              {
                label:'6日内预约单未转正',
                value:54
              },
              {
                label:'6日外预约单未转正',
                value:54
              }
            ]
          },
          {
            title:'个人待办事项',
            numItem:[
              {
                label:'诊断方案未发送',
                value:54
              },
              {
                label:'诊断方案未确认',
                value:54
              },
              {
                label:'效果方案未发送',
                value:54
              },
              {
                label:'效果方案未确认',
                value:54
              }
            ]
          },
          {
            title:'组内待办事项',
            numItem:[
              {
                label:'诊断方案未发送',
                value:54
              },
              {
                label:'诊断方案未确认',
                value:54
              },
              {
                label:'效果方案未发送',
                value:54
              },
              {
                label:'效果方案未确认',
                value:54
              }
            ]
          }
        ]
      }    
    },
    components: {
    },
    methods: {
      handleClick(){
        console.log(43434)
      }
    }
}
</script>

<style lang="stylus" scoped>
.el-collapse-item__header{
  font-size:20px!important;
}
.tabs-body
  height:800px;
  width:100%;
  .tool-body
    width:100%;
    height:729px;
.query-box{
  margin-left:20px;
  span{
    font-size:15px;
    margin-right:10px;
  }
 }   
</style>