<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-card class="box-card" v-for="(itey) in item.dataPanel">
          <div slot="header" class="clearfix">
            <span>{{itey.title}}</span>
          </div>
          <div style="margin-bottom:20px; " v-for="(itet,o) in itey.dataItem" :key="o" class="text item">
            <div  v-for="(it,o) in itet">
              <span>{{it.label}}:</span>
              <span>{{it.value}}</span>
            </div>
          </div>
        </el-card>
      </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:'客机统计',
            dataPanel:[
              {
                title:'客机：robot1',
                dataItem:[
                  [
                    {
                      label:'今日新粉丝咨询量',
                      value:0
                    },
                    {
                      label:'今日新粉丝收货单量',
                      value:0
                    },
                    {
                      label:'今日新粉丝转化率',
                      value:0
                    },
                    {
                      label:'今日新粉丝预收货货值',
                      value:0
                    },
                  ],
                  [
                    {
                      label:'今日新粉丝咨询量',
                      value:0
                    },
                    {
                      label:'今日新粉丝收货单量',
                      value:0
                    },
                    {
                      label:'今日新粉丝转化率',
                      value:0
                    },
                    {
                      label:'今日新粉丝预收货货值',
                      value:0
                    },
                  ],
                  [
                    {
                      label:'今日新粉丝咨询量',
                      value:0
                    },
                    {
                      label:'今日新粉丝收货单量',
                      value:0
                    },
                    {
                      label:'今日新粉丝转化率',
                      value:0
                    },
                    {
                      label:'今日新粉丝预收货货值',
                      value:0
                    },
                  ]
                ]
              },
              {
                title:'客机：robot2',
                dataItem:[
                  [
                    {
                      label:'今日新粉丝咨询量',
                      value:0
                    },
                    {
                      label:'今日新粉丝收货单量',
                      value:0
                    },
                    {
                      label:'今日新粉丝转化率',
                      value:0
                    },
                    {
                      label:'今日新粉丝预收货货值',
                      value:0
                    },
                  ],
                  [
                    {
                      label:'今日新粉丝咨询量',
                      value:0
                    },
                    {
                      label:'今日新粉丝收货单量',
                      value:0
                    },
                    {
                      label:'今日新粉丝转化率',
                      value:0
                    },
                    {
                      label:'今日新粉丝预收货货值',
                      value:0
                    },
                  ],
                  [
                    {
                      label:'今日新粉丝咨询量',
                      value:0
                    },
                    {
                      label:'今日新粉丝收货单量',
                      value:0
                    },
                    {
                      label:'今日新粉丝转化率',
                      value:0
                    },
                    {
                      label:'今日新粉丝预收货货值',
                      value:0
                    },
                  ]
                ]
              }
            ]
          },
          {
            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>