<template>
    <div ref="card-list" class="table-card-wrapper" :class="{ fullScreen: fullFlag }" :style="'height:' + 'calc(100% - ' + sHeight + 'px)'">
        <div :class="{ 'card-full': fullFlag }" style="height:100%;position:relative">
            <Spin
                size="large"
                fix
                v-if="loading"
                :style="{
                    marginTop: spinMT + 'px',
                    height: 'calc(100% - ' + loadingToB + 'px)',
                }"
            >
            </Spin>
            <div class="table-card-wrapper-body i-scrollbar">
                <Row :gutter="16" style="padding: 0 16px">
                    <template v-if="cardList.length>0">
                        <i-col v-bind="grid" class="table-card-col" span="6" v-for="(item, key) in cardList" :key="key">
                            <Card :data="item"></Card>
                        </i-col>
                    </template>
                    <div class="no-data" v-else>暂无数据</div>
                </Row>
            </div>
            <div class="table-card-wrapper-page ivu-text-center">
                <Page :total="pageSetting.pageTotal" :page-size="pageSetting.pageSize"
                    :current.sync="pageSetting.pageNum" :show-sizer="pageSetting.showSizer"
                    :page-size-opts="pageSetting.pageSizeOpts" show-total @on-page-size-change="pagesizechange"
                    @on-change="pageChange"
                ></Page>
            </div>
        </div>
    </div>
</template>
<script>
    import Card from './card';
    export default {
        name: 'bing-table-card',
        data () {
            return {
                cardList:[],
                loading:false,
                grid: {
                    xl: 6,
                    lg: 8,
                    md: 8,
                    sm: 12,
                    xs: 24,
                },
                fullFlag:false,
                sHeight:0,
                spinMT:3,
                loadingToB:34
            }
        },
        components: {
            Card
        },
        props: {
            // 获取数据的api
            dataApi: {
                type: Object,
                default: function() {
                    return null;
                },
            },
            pageSetting: {
                type: Object,
                default() {
                    return {
                        pageNum: 1,
                        pageTotal: 50,
                        pageSize: 40,
                        showSizer: true,
                        pageSizeOpts: [20, 40, 50, 100],
                    };
                },
            },
            // 搜索对象
            searchObj: {
                type:Object
            },
            // card上部内容的高度
            topHeight:{
                type:Number,
                default:0
            },
            // 是否全屏显示
            fullScreen:{
                type:Boolean,
                default:false
            }
        },
        watch: {
            fullScreen(val){
                this.fullFlag = val;
                if(val==true){
                    this.loadingToB=92
                }else{
                    this.loadingToB=34
                }
            }
        },
        created() {
            this.getData(this.pageSetting)
        },
        mounted(){
            this.sHeight = this.topHeight;
        },
        methods: {
            getData (searchObj) { // 获取数据源
                this.loading = true;
                let dataParams = {
                    pageNum: this.pageSetting.pageNum,
                    pageSize: this.pageSetting.pageSize,
                };
                if(searchObj){
                    dataParams = Object.assign(dataParams,searchObj);
                }else{
                    dataParams = Object.assign(dataParams,this.searchObj);
                }
                this.dataApi.tableList(dataParams).then((res) => {
                    this.cardList = res.data.rows ? res.data.rows : res.data;
                    this.pageSetting.pageTotal = res.data.total;
                    this.loading = false;
                })
                this.$emit('getData')
            },
            pageChange(page) {
                this.pageChangeFlag = true;
                this.pageSetting.pageNum = page;
                this.getData();
            },
            pagesizechange(pageSize) {
                this.pageSetting.pageSize = pageSize;
                this.pageChange(1);
            },
            openFullModal(fullFlag) {
                this.fullFlag = fullFlag;
                this.$emit("open-full-modal", this.fullFlag);
            },
        }
    }
</script>
<style lang="less">
    .table-card-wrapper {
        .table-card-col {
            padding-top: 16px;
        }
        .card-full{
            height:100%;
        }
        .table-card-wrapper-body {
            position: relative;
            text-align: center;
            width: 100%;
            height: calc(~"100% - 30px");
            overflow: hidden;
            overflow-y: auto;
            border: 1px solid rgba(51, 63, 72, 0.15);
            // border-top: none!important;
            border-radius: 0 0 4px 4px;
            padding-bottom:16px;
            .no-data{
                margin-top:120px;
            }
        }
        &.fullScreen{
            position: fixed!important;
            top: 48px;
            left: 0;
            z-index: 99;
            width: 100%;
            height: 100%!important;
            background-color: #fff;
            .table-card-wrapper-body {
                height: calc(~"100% - 88px");
            }
        }
        .table-card-wrapper-page {
            padding-top: 8px;
        }
    }
</style>
