<template>
  <section class="CockPitContainer">
    <section class="homeManageCockPit" v-for="(item,index) in cockPitListArr" :key="index">
        <div class="htaTitle">
            <strong>{{item.item_boardname}}</strong>
            <!-- <em>查看更多<img src="~@/assets/images/other/more.png"></em> -->
            </div>
        <section class="hAllContainer">
            <div class="htaBox">
                <ul>
                    <li v-for="(its,idx) in item.children" :key='idx' v-if='its.isshow'>
                        <span><strong>{{its.count}}</strong></span>
                        <span><em>{{its.item_title}}</em></span>
                    </li>
                </ul>
            </div>            
        </section>
    </section>  
  </section>  
</template>
<script>
export default {
    data(){
        return{         
          cockPitListArr:[]
        }
    },
    mounted() {
        this.cockPitList()
    },
    methods: {
        cockPitList(){
            let data={
                name:"工作台",
                type:1
            }
            this.$api.v3CockPitListApi(data,{
                onSucess: response => {
                    console.log(response.data)
                   if(response.data.code==0){
                       this.cockPitListArr=response.data.data
                       console.log(this.cockPitListArr)
                       if(response.data.data.length){
                           console.log(response.data.data)
                          response.data.data.forEach(item=>{
                              if(item.children.length){
                                   item.children.forEach(its=>{
                                        console.log(its)
                                        let dateli={
                                            id:its.id
                                        }
                                        this.$api.v3CockPitChildId(dateli,{
                                            onSucess:res=>{
                                                    console.log(res.data.data.title)
                                                    if(res.data.code==0){
                                                       let sum=res.data.data&&res.data.data.data[0].sum
                                                       this.cockPitListArr.forEach(ims=>{
                                                            if(ims.children.length){
                                                                ims.children.forEach(iks=>{
                                                                    if(iks.item_title==res.data.data.title){
                                                                         this.$set(iks,'count',sum)
                                                                         this.$set(iks,'isshow',res.data.data.isshow)
                                                                         this.$forceUpdate();
                                                                    }
                                                                })
                                                            }
                                                       })
                                                       console.log(this.cockPitListArr)
                                                    }
                                            }
                                        })
                                   })
                              }
                          })
                       }                    
                   }
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.commBoxBg{
     background: #FFFFFF;
     box-shadow: 0px 2px 6px -4px rgba(0, 0, 0, 0.12), 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
     border-radius: 8px;
}
.homeManageCockPit{
    display: flex; 
    flex-direction: column;
    margin-bottom: 20px;
    @extend .commBoxBg;
    .htaTitle{
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        // font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
        padding: 16px;
        display: flex;
        align-items: center;
        strong{flex:1;color: #3c4766; font-size: 16px;}
        em{
            color: rgba(0, 0, 0, 0.65);
            font-size: 14px;
            display: flex;
            align-items: center;
            cursor: pointer;
            img{
                margin-right:8px;
            }
        }
    }
    .htaBox{
        padding: 16px 0 16px 10px;
        .htH3{
            color: #000000;
            font-size: 18px;
            font-weight: bold;
            margin-left:9px;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            
            li{
                background: #fff;
                width: 96px;
                height: 72px;
                border-radius: 4px;
                display: flex;
                flex-direction: column;
                margin-right:10px;
                margin-bottom: 16px;
                align-items: center;
                // cursor: pointer;
                span{
                  margin-bottom: 8px; 
                   strong{                      
                    //    color: rgba(0, 0, 0, 0.85);
                       font-size: 19px;
                    //    font-weight: bold;
                      color: #3c4766;
                   }
                   em{
                       font-size: 12px;
                    //    color: #000000;
                       color: #82899e;
                       margin-top:5px;
                   }
                }
            }
        }
    }
}
</style>