<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>
import { mapState, mapActions ,mapGetters } from 'vuex'
export default{
    data(){
      return {
        activeName:'second',
        queryLists:[
          {
            title:'个人统计',
            numItem:[
              {
                label:'今日接入量',
                value:'加载中。。。'
              },
              {
                label:'今日预约量',
                value:'加载中。。。'
              },
              {
                label:'今天预约单量',
                id:'todayBookings',
                value:'加载中。。。'
              },
              {
                label:'本月预约单量',
                id:'monthBookings',
                value:'加载中。。。'
              },
              {
                label:'6日内预约单未转正',
                id:'sixDayBookingsUnOpen',
                value:'加载中。。。'
              },
              {
                label:'6日前预约单未转正',
                id:'beforeSixDayBookingsUnOpen',
                value:'加载中。。。'
              }
            ]
          },
          {
            title:'个人待办事项',
            numItem:[
              {
                label:'诊断方案未发送',
                id:'diagnosisUnSend',
                value:'加载中。。。'
              },
              {
                label:'诊断方案未确认',
                id:'diagnosisUnConfirm',
                value:'加载中。。。'
              },
              {
                label:'效果方案未发送',
                id:'effectsUnSend',
                value:'加载中。。。'
              },
              {
                label:'效果方案未确认',
                id:'effectsUnConfirm',
                value:'加载中。。。'
              }
            ]
          },
          {
            title:'组内待办事项',
            numItem:[
              {
                label:'诊断方案未发送',
                value:54
              },
              {
                label:'诊断方案未确认',
                value:54
              },
              {
                label:'效果方案未发送',
                value:54
              },
              {
                label:'效果方案未确认',
                value:54
              }
            ]
          }
        ]
      }    
    },
    mounted() {
        this.getPersonStatistics().then((data)=>{
          let qs = this.queryLists
          for(let o in data){
            for(let q in qs[0].numItem){
              if(qs[0].numItem[q].id == o){
                qs[0].numItem[q].value = data[o]
              }
            }
          }
          console.log(data)
        })
        this.personTodo().then((data)=>{
          let qs = this.queryLists
          for(let o in data){
            for(let q in qs[1].numItem){
              if(qs[1].numItem[q].id == o){
                qs[1].numItem[q].value = data[o]
              }
            }
          }
          console.log(data)
        }).catch((error)=>{
          console.log(error)
        })
    },
    components: {
    },
    methods: {
      ...mapActions('chenzhen',[
        'getPersonStatistics',
        'personTodo',
      ]),
      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>