<template>
<div class="ul-wrapper height100">
    <div class="panel-table">
        <ul class="title-wrapper">
            <li v-for="(item,index) in tList" :key="index">
                {{item}}
            </li>
        </ul>
        <ul class="panel-table-content">
            <li v-for="(item,index) in data.slice(0,5)" :key="index">
            <span v-for="(s,key) in item" :key='key'>
                <img :src="getImg(s)" alt="" v-if="s<4">
                <p v-else>{{s}}</p>
            </span>
            </li>
        </ul>
    </div>
     <div class="panel-table">
        <ul class="title-wrapper">
            <li v-for="(item,index) in tList" :key="index">
                {{item}}
            </li>
        </ul>
        <ul  class="panel-table-content">
            <li v-for="(item,index) in data.slice(5,10)" :key="index">
            <span v-for="(s,key) in item" :key='key'>
                {{s}}
            </span>
            </li>
        </ul>
    </div>
    
</div>
</template>
<script>
export default {
    data(){
        return{
                
        }
    },
    props:{
        tList:{
            type:Array,
            default:[]
        },
        data:{
            type:Array,
            default:()=>{return []}
          }         
    },
    methods:{
        getImg(s){
             return require('@/assets/overview/rank0'+ s + '.png')
        }
    }
}
</script>
<style lang="less" scoped>
.ul-wrapper{
    display: flex;
    padding: 15px 20px 40px;
    .panel-table{
        width: 50%;
        &:first-child{
            padding-right: 10px;
        }
        &:last-child{
            padding-left: 10px;
        }
        .title-wrapper{
                 display: flex;
                height: 48px;
                line-height: 48px;
                li{
                    text-align: center;
                    width: 40%;
                    &:first-child{width: 20%;}
                }
            }
        .panel-table-content{
            height: calc(100% - 56px);
            li{
                width: 100%;
                height: 20%;
                line-height: 1;
                max-height: 48px;
                background-color:@party-bg-gray;
                margin-bottom: 4px;
                border-radius: 2px;
                display: flex;
                align-items: center;
                span{
                    text-align: center;
                    width: 40%;
                    display: inline-block;              
                    &:first-child{width: 20%;}
                }
                img{
                    width: 18px;
                    vertical-align: middle;
                }
            }
         }
    }

}
</style>