<template>
    <div class="notificationDetail">
        <van-nav-bar title="对标考评公告详情" left-text="返回" @click-left="onClickLeft" />
        <div class="mobeilVant">
            <div class="mobeilTop">
                <div class="topLeft">
                    <!-- <van-icon name="star" size="20" /> -->
                    <img :src="logoImg" alt="">
                    <span>全业务域考评系统</span>
                </div>
                <div class="topRight">
                    <span>系统导航</span>
                    <!-- <van-icon name="wap-nav"  size="23" /> -->
                    <img :src="daohangImg" alt="" @click="chooseMenu">
                </div>
            </div>
            <div class="notificationDetailMain">
                <div class="cssCommon">
                    <p>公告标题：</p>
                    <el-input v-model="ruleForm.noticeTitle" disabled />
                </div>
                <div class="cssCommon">
                    <p>公告内容：</p>
                    <el-input v-model="ruleForm.noticeContent" disabled type="textarea" :rows="10"></el-input>
                </div>
                <!-- <div class="cssCommon">
                    <p>发布对象：</p>
                    <el-input v-model="ruleForm.sendTo" />
                </div>
                <div class="cssCommon">
                    <p>排序：</p>
                    <el-input-number v-model="ruleForm.serialNumber" :min="1" />
                </div> -->
                <div class="cssCommon">
                    <p>附件：</p>
                    <el-table :data="filesListEdit" style="width: 100%">
                        <el-table-column label="附件名" prop="fileName" width="130" />
                        <el-table-column label="发送单位" prop="releaseDept" width="150" />
                        <el-table-column label="操作" width="100">
                            <template #default="scope">
                            <div @click="previewFile(scope.row)" style="cursor:pointer">
                                    <img :src="yulan" style="margin-right: 10px;" >
                                    <!-- <span style="font-size:14px">预览</span> -->
                                </div>
                            </template>
                        </el-table-column> 
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import logoImg from '../assets/mobeilImg/logo.png'
import daohangImg from '../assets/mobeilImg/daohang.png'
import dateImg from '../assets/mobeilImg/date.png'
import sortImg from '../assets/mobeilImg/sort.png'
import seachImg from '../assets/mobeilImg/seach.png'
import yulan from '../assets/btnIcon/yulan.png'

import {apiGetevaluationdeptnoticeFilePreview} from '../api/api'

export default {
    data() {
        return {
            logoImg: logoImg,
            daohangImg: daohangImg,
            dateImg: dateImg,
            sortImg: sortImg,
            seachImg: seachImg,
            yulan: yulan,
            showDate: '',
            binSection: '',
            noticDetail: {},
            ruleForm: {
                serialNumber: 1,
                noticeTitle: '',
                noticeContent: '',
                sendTo: '',
                sendToContent: [],
                releaseDept: '',
                releasePeople: '',
            },
            filesListEdit: []
        }
    },
    created() {
        if (this.$route?.query?.rowObj) {
            this.noticDetail = JSON.parse(this.$route.query.rowObj)
            this.init(this.noticDetail)
        }
    },
    methods: {
        init(row) {
            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
            }
        },
        chooseMenu() {
            this.$router.push({ path: "/menu"})
        },
        onClickLeft() {
            this.$router.push({ path: "/notificationMobeil"})
        },
        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 {
    background-color: #184FB4;
    .van-nav-bar{
        width: 100%;
        background-color: #184FB4;
        color: #fff;
        position: fixed;
        top: 0;        
        z-index: 111111;
        .van-nav-bar__content{
            .van-nav-bar__left{
                .van-nav-bar__text{
                    color: #fff;
                }
            }
        }
    }
    .mobeilVant{
        height: 100%;
        margin-top: 45px;
        border-radius: 10px 10px 0 0;
        background-color: #fff;
        .mobeilTop{
            height: 60px;
            display: flex;
            justify-content: space-around;
            .topLeft{
                display: flex;
                img{
                    width: 24px;
                    height: 28px;
                    position: relative;
                    top: 18px;
                    left: -10px;
                }
                span{
                    font-family: MicrosoftYaHei;
                    font-weight: 600;
                    font-size: 16px;
                    color: #444950;
                    line-height: 60px;
                }
            }
            .topRight{
                display: flex;
                img{
                    width: 22px;
                    height: 18px;
                    position: relative;
                    top: 21px;
                    left: 5px;
                }
                span{
                    font-family: MicrosoftYaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #545960;
                    line-height: 60px;
                    margin-right: 5px;
                }
            }
        }
        .notificationDetailMain{
            background-color: #ededf5;
            padding: 17px 20px;
            width: calc(100% - 40px);
            .cssCommon{
                margin-bottom: 20px;
                p{
                    font-size: 16px;
                    font-weight: bold;
                    margin-bottom: 5px;
                }
            }
            .el-table{
                .el-table__header-wrapper{
                    .el-table__header{
                        tr{
                            .cell{
                                line-height: 18px !important;
                            }
                        }
                    }
                }
                .el-table__body-wrapper{
                    .el-table__body{
                        tr{
                            .cell{
                                img{
                                    width: 20px;
                                    height: 14px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>