<template>
    <div class="commons-notice">
        <el-dialog
            title="系统公告"
            :visible.sync="value"
            width="460px"
            :before-close="handleClose">
            <div class="title">
                {{ data.length == 0 ? '暂无数据' :  data[indexCopy].title}}
            </div>
            <div class="text-content" v-if="data.length > 0" style="margin-top:10px">
                {{ data[indexCopy].content}}
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="indexCopy--" :disabled="data.length < 2 || indexCopy == 0">上一条</el-button>
                <el-button size="small" @click="indexCopy++" :disabled="data.length == indexCopy + 1">下一条</el-button>
                <el-button type="primary" size="small" :disabled="data.length == 0" @click="confirm">确认已读</el-button>
                <span class="more" @click="more">查看更多 &gt;</span>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props:{
        //数据源
        data: {
            type: Array,
            default: () => []
        },
        //控制显示隐藏
        value: {
            type: Boolean,
            default: () => true
        },
        //展示索引
        index:{
            type: Number,
            default: () => 0
        },
    },
    data(){
        return {
            indexCopy:this.index * 1        
        }
    },
    methods:{
        more(){
            this.$emit("more", this.data[this.indexCopy])
        },
        confirm(){
            this.$emit("confirm", this.data[this.indexCopy])
        },
        handleClose(){
            this.$emit("input", false)
        },

    },
}
</script>
<style>
    .commons-notice .el-dialog__footer{
        text-align: left!important;
        margin-top: 24px;
    }
    .commons-notice .more{
        color:#0084FF;
        float: right;
        cursor: pointer;
    }
    .commons-notice .el-dialog__header{
        background: #EEEEEE;
    }
    .commons-notice .el-dialog__title{
        position: relative;
        padding-left: 30px;
        color: #333333;
        font-weight: bold;
    }
    .commons-notice .el-dialog__title::before{
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAftJREFUOE+tlT9MU1EUxr9zWwgBI/D6Boh/EnbCRiImMhBCGqNhcnDQrbgRAyxGBgYICzXYDbrB4OBENIaY4GAMrmqc3DQxMrxWNGkH0Hv83m0ptvS1EHqTm/fuO+f+zjn3nHueoGYoIFju7kGXGeTrJOd1qlwqq30HdJdzCwX7GY9+7QsX/yO4Ph66gHb0+EkiUzAyRklnrcHyugirb4jKYj/YlgUcHOlVgJrxLkLMHJVSEOmLAFV/Vt2j8SzUrsh0/ncodEDnmec9BswsYV1Vu1RD6+842zmvUR6vkRcAm0Y+vxR6Ku7MVv3bMFir65nVT/gZDNNgBw1+oM7ACe9DTy0e4GHwQnS5uxedbRs8s1t1w1S7I9O5cRfJU/8j9Ybq6ll9ieLhfdFM7w1IfDsyAacFAkXonySB3gokNhuZhNMDGcLfNIGJXWZ3pDVA+z4EfiXwaouA384GzDApEpEUlzXrgI1Dhn7B4cEITOwCYob1aK40iCYMuVlS1BLAY0GMz8ssWxMNdElpVjaaJ+RZCaJ3GbIXASyXTdPC1udAcK8E8TcJvNO4sJtePfsa/bmbDvIj8QrGTDS8ei6QsDkk/Hl2mpm6zUH0bSliGaU8bBLHQ7XA832CXLDomsORxLUvgDfGTJ2pfcGuc1+6qn1VoK1ssBXoOX8B/wDYqv5bje949AAAAABJRU5ErkJggg==);
    }
</style>