<template>
    <div class="displayColumn">
        <div class="displayColumn-title">
            <div class="displayColumn-title-left">
                <span class="displayColumn-title-left-title">{{title}}</span>
                <div class="displayColumn-title-left-contentTitle">
                    <span>{{searchTitle}}</span>
                </div>
            </div>
            <div class="more" v-if="moreFlag" @click="toMore(morePath)"><i class="el-icon-more"></i></div>
        </div>
        <div class="displayColumn-total">
            <span>共{{total}}条符合查询结果</span>
        </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>{{index + 1}}.{{truncateString(item.contentTitle,limitNum)}}</span>
                </div> 
                <div class="displayColumn-content-item-time">
                    <div class="displayColumn-content-item-time-left">
                        <span>时间：{{parseTime(item.publishTime)}}</span>
                    </div>
                    <div class="displayColumn-content-item-time-right">
                        <span>{{transContentType(item.contentType)}}</span>
                    </div>
                </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: '标题栏'
            },
            searchTitle: {
                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);
            },

            transContentType(contentType) {
                switch (contentType) {
                    case '0':
                        return '医保服务指南';
                    case '1':
                        return '医保政策解读';
                    case '2':
                        return '医院医保动态';
                    case '3':
                        return '医院动态';
                    case '4':
                        return '通知公告';
                    case '5':
                        return '健康园地';
                    case '6':
                        return '名医有约';
                    case '7':
                        return '人才招聘';
                    case '8':
                        return '就医指南';
                } 
            }
        }
    }
</script>

<style lang="scss" scoped>
    .displayColumn {
        width: 100%;
        text-align: left;
        cursor: default;
       .displayColumn-title {
         width: 100%;
         height: 62px;
         padding: 10px 20px;
         box-sizing: border-box;
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: $font-common-second-size;
         color: $blue-color;
         box-sizing: border-box;
         background-color: #fff;
         margin-bottom: 10px;
         .displayColumn-title-left {
            display: flex;
            align-items: center;
         }
         .displayColumn-title-left-title {
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
            line-height: 22px;            
         }
         .displayColumn-title-left-contentTitle {
            height: 32px;
            padding: 5px 20px;
            margin-left: 30px;
            border-radius: 16px;
            border: 1px solid #1280F9;
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #1280F9;
            line-height: 16px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
         }
         .more {
            font-size: 20px;
         }
       }
       .displayColumn-total {
            width: 100%;
            padding: 20px;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 16px;
            color: #333333;
            line-height: 16px;
            background-color: #fff;
            box-sizing: border-box;        
       }
       .displayColumn-content {
          width: 100%;
          max-height: 616px;
          overflow: auto;
          background-color: #fff;  
         .displayColumn-content-item {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            border-top: 1px dashed #DBDBDB;
            .displayColumn-content-item-title {
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #0C60BD;
                line-height: 22px;
                margin-bottom: 10px;
            }
            .displayColumn-content-item-time {
                display: flex;
                align-items: center;
                .displayColumn-content-item-time-left {
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 16px;
                    color: #333333;
                    line-height: 22px;
                    margin-right: 40px;
                }
                .displayColumn-content-item-time-right {
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 16px;
                    color: #589B29;
                    line-height: 22px;
                }
            }
         }
       }
       .pageSize {
         margin: 20px;
         text-align: center;
       }
    }
</style>