<template>
    <!-- 查看弹出框 -->
    <el-drawer
    :title="title"
    :visible.sync="open"
    :direction="direction"
    :destroy-on-close="true"
    size="40%">
        <div class="formcontent">
            <div class="title">{{form.title}}</div>
            <div class="timeandistop">
                <div class="time">发布时间：{{publishTime}}</div>
                <div class="istop">
                    <span v-if="form.top==0" @click="$emit('handletop',{id:form.id},1)">置顶</span>
                    <span v-if="form.top==1" @click="$emit('handletop',{id:form.id},0)">取消置顶</span>
                </div>
            </div>
            <div v-html="form.content" class="content"></div>
            <div class="last">
                <div>发布：{{publishTime}}</div>
                <div>责任编辑：{{form.editor}}</div>
                <div>审批：</div>
                <div>来源：{{form.source}}</div>
                <div>声明:{{form.statement}}</div>

            </div>
            
            <div class="footbtns">
                <el-button type="danger" @click="onDel">删除</el-button>
                <el-button @click="()=>{open=false}">关闭</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import moment from 'moment'
    export default {
        name: "NewsInfo",
        components: {
        },
        created() {
        },
        watch:{
            form(newval){
                if(newval.publishTime){
                    this.publishTime = moment(newval.publishTime).format('yyyy-MM-DD')
                }
            }
        },
        data() {
            return {
                // 遮罩层
                loading: true,
                // 弹出层标题
                title: "新闻公告详情",
                // 是否显示弹出层
                open: false,
                direction:"rtl",
                form:{},
                publishTime:"--"
            };
        },

        methods: {
            onDel(){
                this.$confirm('此操作将永久删除该新闻, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.open = false
                    this.$emit('del',this.form.id)
                }).catch(() => {});
            }
        },
    };
</script>

<style lang="less" scoped>
.last{
    font-size: 14px;
    color: #72767b;
}
.footbtns{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    height: 80px;
    border-top: 1px solid gainsboro;
}
.formcontent{
    padding: 0 20px;
    
    .content{
        margin-bottom: 20px;
    }
    .timeandistop{
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        font-size: 14px;
        .time{
            color: #72767b;
            margin-right: 20px;
        }
        .istop{
            color:dodgerblue
        }
    }
    .title{
        font-size: 18px;
        margin-bottom: 10px;
    }
}
.el-drawer__body{
    border-top: 1px solid #72767b !important;
}
</style>