<template>
    <div class="displayColumn">
        <div class="displayColumn-title">
            <span>{{title}}</span>
            <div class="more" v-if="moreFlag" @click="toMore(morePath)"><i class="el-icon-more"></i></div>
        </div>
        <div class="displayColumn-content">
            <div class="displayColumn-content-item" v-for="(item,index) in content" :key="index" @click="toRouter(routerPath,item.id)">
                <div class="displayColumn-content-item-title">
                    <span>{{truncateString(item.contentTitle,limitNum)}}</span>
                </div> 
                <div class="displayColumn-content-item-time">
                    <span>{{parseTime(item.publishTime)}}</span>
                </div>                 
            </div>            
        </div>
        <div class="pageSize" v-if="(content.length > 0) && paginationFlag">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>        
    </div>
</template>

<script>
    import {parseTime} from "@/utils/index"
    export default {
        name: 'displayColumn',
        props: {
            title: {
                type: String,
                default: '标题栏'
            },
            limitNum: {
                type: Number,
                default: 28
            },
            pageSize: {
                type: Number,
                default: 10
            },
            currentPage: {
                type: Number,
                default: 1
            },
            total: {
                type: Number,
                default: 0
            },
            moreFlag: {
                type: Boolean,
                default: true
            },
            overviewFlag: {
                type: Boolean,
                default: false
            },
            paginationFlag: {
                type: Boolean,
                default: false
            },
            morePath: {
                type: String,
                default: ''
            },
            routerPath: {
                type: String,
                default: ''
            },
            content: {
                type: Array,
                default: () => [
                ],
            },
        },
        methods: {
            toMore(path){
                this.$router.push({
                    name: path,
                });
            },

            toRouter(path,id){
                if(this.overviewFlag) {
                    this.$emit('clickOverview',id);
                }else {
                    this.$router.push({
                        name: path,
                        query: {id:id},
                    });
                }
            },

            truncateString(str, num) {
                if (str.length > num) {
                    return str.slice(0, num > 3 ? num - 3 : num) + '...';
                }
                return str;
            },

            parseTime(time) {
                return parseTime(parseInt(time), '{y}-{m}-{d}')
            },

            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.$emit('sizeCurrentChange',this.pageSize,this.currentPage);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.$emit('sizeCurrentChange',this.pageSize,this.currentPage);
            },
        }
    }
</script>

<style lang="scss" scoped>
    .displayColumn {
        width: 100%;
        text-align: left;
        cursor: default;
       .displayColumn-title {
         width: 100%;
         padding: 10px;
         box-sizing: border-box;
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: $font-common-second-size;
         color: $blue-color;
         .more {
            font-size: 20px;
         }
       }
       .displayColumn-content {
          width: 100%;
          max-height: 616px;
          overflow: auto;
         .displayColumn-content-item {
            width: 100%;
            padding: 20px 10px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 2px dashed $color-border-first;
            font-size: $font-normal-size;
         }
       }
       .pageSize {
         margin: 20px;
         text-align: center;
       }
    }
</style>