<template>
    <section class="homeRTGT">
        <div class="htaTitle">
            <span class="TitleName"><strong>五库</strong></span>
            <!-- <span class="TitleTab"><em v-for='(item,index) in titleArr' :key='index' @click='titleClick(item,index)' :class='inx==index?"active":""'>{{item.name}}</em></span> -->
            <!-- <span class="more" @click='more'>查看更多>></span> -->
        </div>
        <div class="htaBoxWKlist">
                <ul>
                    <li @click="applink('__h0fxOYBf2gPKGICatmN','项目库')"><img src="~@/assets/images/appImgs/xmk.png"><strong>项目库</strong></li>
                    <li @click="applink('__pw297UAJJgIBF9xBtmW','制度库')"><img src="~@/assets/images/appImgs/zdk.png"><strong>制度库</strong></li>
                    <li @click="applink('__10oAyTVxwOhXa88v1Bk','标准库')"><img src="~@/assets/images/appImgs/bzk.png"><strong>标准库</strong></li>
                    <li @click="applink('__uJkyRTCtNDbMdPcF0iy','专家库')"><img src="~@/assets/images/appImgs/zjk.png"><strong>专家库</strong></li>
                    <li @click="applink('__ZVCG1EamEdKwqHCeYPW','供应商库')"><img src="~@/assets/images/appImgs/gysk.png"><strong>供应商库</strong></li>
                </ul>          
        </div>
    </section>
</template>
<script>
export default {
    data(){
        return{
          titleArr:[
              {name:'智能指数榜',type:1},
              {name:'示范试点项目',type:2},
          ],
          inx:0,
          params:{//搜索条件
            pageIndex:1,
            pageSize:3,
            total:0
          },
          type:1,
          tableData:[],
          tableData2:[],
          tableData3:[]
        }
    },
    mounted() {
        this.gtlist()
        this.jdzhyjlist()
        this.lhzbrblist()
    },
    methods: {
        titleClick(item,index){
           this.inx=index
           this.type=item.type
        },
        gtlist(){
            this.$api.gtlistApi(this.params,{
                onSucess: response => {
                    console.log(response)
                    this.tableData=response.data.data
                }
            })            
        },
        jdzhyjlist(){
            this.$api.jdzhyjlistApi(this.params,{
                onSucess: response => {
                    console.log(response)
                    this.tableData2=response.data.data
                }
            })            
        },
        lhzbrblist(){
            this.$api.lhzbrblistApi(this.params,{
                onSucess: response => {
                    console.log(response)
                    this.tableData3=response.data.data
                }
            })            
        },
        applink(appid,names){
            let appId=appid
            let name=names
            let flag=1
            this.$store.dispatch("loadMenus", {appId, name,flag});
        },
        more(){
            // if(this.type==1){
            //      let appId='__Hab04s0VNDPrjFZ3Xlo'
            //     let name='挂图作战'
            //     let flag=1
            //     this.$store.dispatch("loadMenus", {appId, name,flag});
            // }else if(this.type==2){
            //     let appId='__l8yB8fdHv3OmXOrHfyF'
            //     let name='进度滞后预警'
            //     let flag=1
            //     this.$store.dispatch("loadMenus", {appId, name,flag});
            // }else if(this.type==3){
            //     let appId='__u1xGyTCVhsSaWrgdBed'
            //     let name='联合专班日报'
            //     let flag=1
            //     this.$store.dispatch("loadMenus", {appId, name,flag});
            // }            
        },
    },
}
</script>
<style lang="scss" scoped>
.homeRTGT{
    display: flex; 
    flex-direction: column;
    background: #fff;
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    .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;
        .TitleName{
            display: flex;
            align-items: center;
            margin-right: 40px;
            i{
                width: 2px;
                height: 18px;
                background: #0E71FF;
                margin-right:4px;
            }
            strong{color: rgba(0, 0, 0, 0.85);font-size: 16px;}
        }
        .TitleTab{
          flex:1;
          em{
              margin-right: 15px;
              font-size: 16px;
              padding-bottom:16px;
              cursor: pointer;
              &.active{
                 border-bottom: 1px solid #0076f6;  
                 color: #0076f6;
              }
          }
        }
        .more{
            flex-wrap: 150px;
            font-size: 14px;
            cursor: pointer;
        }
    }
    .htaBox{
        padding: 16px 0 16px 16px;
        ul{
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            
            li{
                background: #fff;
                width: 140px;
                height: 100px;
                border-radius: 4px;
                display: flex;
                flex-direction: column;
                padding: 16px;
                margin-right:16px;
                margin-bottom: 16px;
                align-items: center;
                text-align: center;
                span{
                  margin-bottom: 8px;  
                   img{
                     width: 48px;
                     height:48px;
                   }
                   strong{                      
                       color: rgba(0, 0, 0, 0.85);
                       font-size: 14px;
                       font-weight: normal;
                   }
                }
            }
        }
    }
    .scrollbarClass{
        .el-scrollbar__wrap{
            overflow: scroll!important;
            height: calc(100% + 20px)!important; //多出来的20px是横向滚动条默认的样式       
        }
        .el-table--scrollable-x .el-table__body-wrapper{overflow-x: hidden!important;;}
    }

    .htaBoxWKlist{
       ul{
           display: flex;
           width: 100%;
           li{
               display: flex;
               flex-direction: column;
               flex:1;
               align-items: center;
               margin: 16px 0 24px 0;
               cursor: pointer;
               img{width: 48px;margin-bottom: 3px;}
               strong{color: rgba(0, 0, 0, 0.85);font-weight: normal;}
           }
       }
    }
}
</style>