<template>
    <section class="homeSecCockPit">
        <div class="htaTitle">
            <strong>保安驾驶舱</strong>
            <!-- <em>查看更多<img src="~@/assets/images/other/more.png"></em> -->
            </div>
        <section class="hAllContainer">
            <div class="htaBox">
                <ul>
                    <li>
                        <span><strong>{{formList.OnjobSecuritySum}}</strong></span>
                        <span><em>在职保安数</em></span>
                    </li>
                    <li>
                        <span><strong>{{formList.CurMonthEmployeeSecuritySum}}</strong></span>
                        <span><em>本月入职保安数</em></span>
                    </li>
                    <li>
                        <span><strong>{{formList.CurMonthQuitEmployeeSecuritySum}}</strong></span>
                        <span><em>本月离职保安数</em></span>
                    </li>
                    <li>
                        <span><strong>{{formList.EffectiveAttPointsSum}}</strong></span>
                        <span><em>有效驻勤点数</em></span>
                    </li>
                    <li>
                        <span><strong>{{formList.NoSecurityAttPointsSum}}</strong></span>
                        <span><em>无保安驻勤点数</em></span>
                    </li>
                    <li>
                        <span><strong>{{formList.nonResidentSecSum}}</strong></span>
                        <span><em>无驻勤保安数</em></span>
                    </li>
                    <li>
                        <span><strong>{{formList.withoutCerSecSum}}</strong></span>
                        <span><em>未证件核验保安数</em></span>
                    </li>
                    <li>
                        <span><strong>{{formList.withoutrealnameSecSum}}</strong></span>
                        <span><em>未实名认证保安数</em></span>
                    </li>
                    <li>
                        <span><strong>{{formList.unlicensedSecSum}}</strong></span>
                        <span><em>未持证保安数</em></span>
                    </li>
                    
                </ul>
            </div>            
        </section>
    </section>
</template>
<script>
export default {
    data(){
        return{
           formList:{
              OnjobSecuritySum:0,
              CurMonthEmployeeSecuritySum:0,
              CurMonthQuitEmployeeSecuritySum:0,
              EffectiveAttPointsSum:0,
              NoSecurityAttPointsSum:0,
              nonResidentSecSum:0,
              withoutCerSecSum:0,
              withoutrealnameSecSum:0,
              unlicensedSecSum:0,
          }
        }
    },
    mounted() {
        this.manageCockPitList()
    },
    methods: {
        manageCockPitList(){
            let data={
                name:"保安员驾驶舱",
                type:1
            }
            this.$api.v3manageCockPitListApi(data,{
                onSucess: response => {
                    console.log(response.data)
                   if(response.data.code==0){
                      let dataNums=response.data.data
                      if(dataNums.length){
                          dataNums.forEach(item=>{                        
                             switch(item.title){
                                 case '在职保安数':
                                 this.$set(this.formList,'OnjobSecuritySum',item.data[0].sum) 
                                 break;
                                 case '本月入职保安数':
                                 this.$set(this.formList,'CurMonthEmployeeSecuritySum',item.data[0].sum) 
                                 break;
                                 case '本月离职保安数':
                                 this.$set(this.formList,'CurMonthQuitEmployeeSecuritySum',item.data[0].sum) 
                                 break;
                                 case '有效驻勤点数':
                                 this.$set(this.formList,'EffectiveAttPointsSum',item.data[0].sum) 
                                 break;
                                 case '无保安驻勤点数':
                                 this.$set(this.formList,'NoSecurityAttPointsSum',item.data[0].sum) 
                                 break;
                                 case '无驻勤保安数':
                                 this.$set(this.formList,'nonResidentSecSum',item.data[0].sum) 
                                 break;
                                 case '未证件核验保安数':
                                 this.$set(this.formList,'withoutCerSecSum',item.data[0].sum) 
                                 break;
                                 case '未实名认证保安数':
                                 this.$set(this.formList,'withoutrealnameSecSum',item.data[0].sum) 
                                 break;
                                 case '未持证保安数':
                                 this.$set(this.formList,'unlicensedSecSum',item.data[0].sum) 
                                 break;                                     
                             }


                          })
                      }
                   }
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.homeSecCockPit{
    display: flex; 
    flex-direction: column;
    .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}
        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: 30px;
                       font-weight: bold;
                   }
                   em{
                       font-size: 12px;
                       color: #000000;
                       margin-top:5px;
                   }
                }
            }
        }
    }
}
</style>