<template>
    <div class="notificationDetail">
        <el-dialog title="公告详情" custom-class="startToDia" v-model="dialogVisible" width="900px" :close-on-click-modal="false">
            <div class="notifcaFrom">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :validate-on-rule-change="false">      
                    <el-form-item label="公告标题" prop="noticeTitle">
                        <el-input v-model="ruleForm.noticeTitle" disabled  placeholder="请输入公告标题" />
                    </el-form-item>
                    <el-form-item label="公告内容" prop="noticeContent">
                        <el-input v-model="ruleForm.noticeContent" disabled
                            type="textarea" :rows="10" placeholder="请输入公告内容"></el-input>
                    </el-form-item>
                    <el-form-item label="附件">
                        <div class="fliesHeader">
                            <span>附件名</span>
                            <span>发送单位</span>
                            <span>操作</span>
                        </div>
                        <div v-for="it in filesListEdit" :key="it">
                            <div class="fliesMain">
                                <div>
                                    <img :src="file" style="margin-right: 10px" >
                                    <span class="fliesMainSpan spanOne">{{it.fileName}}</span>
                                </div>
                                <span class="fliesMainSpan spanTwo" style="font-size:14px">{{it.releaseDept}}</span>
                                <div class="fileOperate">
                                    <div @click="previewFile(it)" style="cursor:pointer">
                                        <img :src="yulan" style="margin-right: 10px;" >
                                        <span style="font-size:14px">预览</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import yulan from '../../assets/btnIcon/yulan.png'
import fileDelete from '../../assets/btnIcon/fileDelete.png'
import {apiGetevaluationdeptnoticeFilePreview} from '../../api/api'
export default {
    data() {
        return {
            dialogVisible: false,
            ruleForm: {
                serialNumber: 1,
                noticeTitle: '',
                noticeContent: '',
                sendTo: '',
                sendToContent: [],
                releaseDept: '',
                releasePeople: '',
            },
            filesListEdit: [],
            yulan: yulan,
            fileDelete: fileDelete
        }
    },
    methods: {
        init(row) {
            this.dialogVisible = true
            this.filesListEdit = []
            let conStr = ''
            for(let i in row.noticeContent) {
                let it = row.noticeContent[i]
                if (it === ' ' && i !== 0 && row.noticeContent[i-1] !== ' ') {
                    it = it+'\n'
                }
                conStr += it 
            }
            this.ruleForm = {
                serialNumber: row.serialNumber*1,
                noticeTitle: row.noticeTitle,
                noticeContent: conStr,
                sendTo: row.sendTo,
                sendToContent: row.sendToContent.split(','),
                releaseDept: row.releaseDept,
                releasePeople: row.releasePeople
            }
            if (row.memo4 !== '') {
                let filesNameArr = row.memo4.split(',')
                let filesUrlArr = row.noticeAnnex.split(',')
                let filesArr = []
                filesNameArr.forEach((iv, index) =>{
                    let obj = {
                        releaseDept: row.releaseDeptName,
                        fileName: iv,
                        fileUrl: filesUrlArr[index]
                    }
                    filesArr.push(obj)
                })
                this.filesListEdit = filesArr
            }
        },
        previewFile(it) {
            let downipcc = ''
            let previewipcc = ''
            if (window.location.hostname === '10.65.78.81') {
                downipcc = 'http://10.65.79.83:86'
                previewipcc = 'http://10.65.79.83:8012'
            } else {
                downipcc = 'http://10.65.78.23:18600'
                previewipcc = 'http://10.65.78.23:8012'
            }
            let downUrl = `${downipcc}/f-center/hadoop/hdfs/download?path=${it.fileUrl}`
            let previewUrl = `${previewipcc}/onlinePreview?hdfs=true&url=${encodeURIComponent(downUrl)}`
            window.open(previewUrl)
        },
    }
}
</script>

<style lang="less">
.notificationDetail{
    .el-overlay{
        .startToDia{
            margin-top: 5vh;
            background: #EDEFF5;
            .el-dialog__body{
                padding: 30px 60px 30px 20px !important;
                .notifcaFrom{
                    .el-select, .el-input{
                        width: 100%;
                    }
                    .el-input{
                        height: 30px;
                    }
                    .uploadFiles{
                        .el-button{
                            height: 25px !important;
                        }
                    }
                    .fliesHeader{
                        width: 100%;
                        display: flex;
                        justify-content: space-around;
                        span{
                            font-size: 14px;
                        }
                    }
                    .fliesMain{
                        width: 100%;
                        display: flex;
                        .fliesMainSpan{
                            display: inline-block;
                            width: 260px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .spanOne{
                            color: #1063CB;
                            font-size: 14px;
                        }
                        .fileOperate{
                            width: 160px;
                            display: flex;
                            justify-content: space-around;
                            .removeImg{
                                margin-right: 10px;
                                position: relative;
                                top: 2px;
                            }
                        }
                        .removeDiv{
                            width: 160px;
                            .removeImg{
                                margin: 0 10px 0 20px;
                                position: relative;
                                top: 3px;
                            }
                        }
                    }
                }
                .flowSty{
                    width: 100%;
                    height: 70vh;
                }
            }
            .el-dialog__footer{
                background: #fff;
                border-radius: 0 0 10px 10px;
                text-align: left;
                .notificationFooter{
                    margin-left: 20px;
                    .el-button{
                        height: 30px !important;
                    }
                }
            }
        }
    }
}
</style>