<template>
    <el-container class="cim-s-sp">
        <!-- <img class="bgimg" src="/public/images/common/bg1.png" /> -->
        <div class="info-box">
            <div class="info-close" @click="close">X</div>
            <div class="title">{{ tabletitle }}</div>
            <div class="table-box" >
                <div class="tbtitle" >
                    <div class="labelContainer">
                        <div v-for="(item,index) in labesData" :key="index">{{item.name}}</div>
                    </div>
                </div>
                <div class="table-container">
                    <div class="table-ul" v-for="(item,index) in tablesData" :key="index">
                        <div class="table-li">
                            <div class="text" v-for="(val,num) in labesData" :key="num" :title="item[val.field]">
                                {{item[val.field]}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-container>
</template>
<script>
import {defineComponent, reactive} from "vue";
    /**
     * 小区房屋信息
     * **/
export default defineComponent({
    name: 'houseinfo',
    props: {
        tableDatas: {}
    },
    setup(props,context) {
        let data = reactive({
            tabletitle: props.tableDatas.title,
            labesData: props.tableDatas.labesData,
            tablesData: props.tableDatas.tablesData
            //tabletitle: '标题'
            // labesData: [
            //     { name: '单位名称' , field: 'name' },
            //     { name: '信息名称' , field: 'typename' },
            //     { name: '接入方式' , field: 'accesstype' },
            //     { name: '时间' , field: 'date' }
            // ],
            // tablesData:[
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1 15:30:48'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'}
            // ]
        })
        let methods = {
            close(){
                context.emit('close')
            }
        };
        return {
        ...methods,
        ...data,
        };
    },
});
</script>

<style lang="scss" scoped>
.cim-s-sp{
    width: 350px;
    padding: 0 10px;
    min-height: 150px;
    background: url(/public/images/common/bg1.png);
    background-size: 100% 100%;
}
.table-container{
    height: 120px;
    overflow-y: auto;
}
.bgimg{
    width: 100%;
    height: 100%;
    float: left;
}
.info-box{
    width: 100%;
    height: 100%;
    position: relative;
}
.info-box .title{
    display: inline-block;
    margin: 10px auto;
    color: #fff;
    font-size: 16px;

}
.table-box{
    color: #fff;
    width: 100%;
    text-align: left;
    
    border-bottom: 1px solid #2997BA;
    padding-bottom: 10px;
}
.table-box .tbtitle{
    width: 100%;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    background: rgba(42,160,198,0.4);
}
.labelContainer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.labelContainer div{
    flex: 1;
    text-align: center;
}
.table-ul{
    width: 100%;
}
.table-ul:nth-child(2n){
    background: rgba(42,160,198,0.3);
}
.table-li{
    font-size:14px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
}
.table-li .text{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: center;
}
.info-close{
  color: #fff;
  position: absolute;
  right: 6px;
  top: 10px;
  font-size: 14px;
  cursor: pointer;
}

</style>