<template>
    <div class="colflex nodata" :style="{justifyContent: 'space-between',alignItems: 'center',height:height?height+'px':'calc(100vh - 280px)',flexWrap: 'nowrap'}">
        <div class="flexb tbborder" v-if="cols.length>0">
            <div v-for="(item,index) in cols" :key="index" class="col-td" >
                {{item.title}}
            </div>
        </div>
        <div v-else></div>
        <div style="text-align:center" v-if="loading==false">
            <img src="../../assets/images/nodata.png" alt="">
            <div>暂无数据</div>
        </div>
        <div style="text-align:center" v-else>
             <Button loading shape="circle" type="text"></Button>
        </div>
        <div></div>
    </div>
</template>
<script>
export default {
    props:{
        cols:{
            type:Array,
            default:()=>{
                return []
            }
        },
        loading:{
            type:Boolean,
            default:()=>{
                return false
            }
        },
        height:{
            type:String,
            default:()=>{
                return ''
            }
        }
    },
    data(){
        return{
            height1:'',
        }
    },
    // watch:{
    //     loading:{
    //         handler(){
    //             if(this.loading==true){
    //                 this.$Loading.start();
    //             } else {
    //                 this.$Loading.finish();
    //             }
    //         }
    //     }
    // }
}
</script>
<style scoped>
.tbborder{
    border-top: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
    height: 48px;
    line-height: 48px;
    width: 100%;
    padding:0 12px;
    overflow: hidden;
}
.nodata{
    width: 100%;
    font-size: 14px;
    color: #727475;
    line-height: 28px;
    min-height: 400px;
    margin-top: 20px;
}
.col-td{
    color:#727475;
    word-break: keep-all;
    padding:0 8px;
    line-height: 14px;
}
.colflex{
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;
}
</style>