<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>公告详情</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="<c:url value='/scripts/lib/layui/layui.css'/>" rel="stylesheet" type="text/css" />

<!-- Theme style -->
<link href="<c:url value='/styles/AdminLTE.css'/>" rel="stylesheet" type="text/css" />
<link href="<c:url value='/styles/notice/noticeAppPublish.css?v=11111'/>" rel="stylesheet" type="text/css" />
<link href="<c:url value='/styles/notice/noticeAppSend.css'/>" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="<c:url value='/scripts/lib/jquery-1.8.2.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/lib/layui/layui.js'/>"></script>
<script type="text/javascript" src="${ctx}/scripts/jquery/ajaxfileupload.js"></script>
<%-- <script type="text/javascript" src="<c:url value='/scripts/lib/layDate/laydate.dev.js'/>"></script> --%>
<script type="text/javascript" src="<c:url value='/scripts/lib/template-native.js'/>"></script>

<script src="<c:url value='/scripts/admin/notice/element/vue.js?v=1234'/>"></script>
    <link rel="stylesheet" href="//superdesk.avic-s.com/avicfile/theme/theme-chalk.css">
<script src="<c:url value='/scripts/admin/notice/element/element.js?v=1234'/>"></script>
<!-- <script src = "//cdn.polyfill.io/v2/polyfill.min.js"></script> -->
 <script src="<c:url value='/scripts/admin/notice/element/polyfill.js?v=12345555'/>"></script>
<style type="text/css">
    #app{
        width: 100%;
        /* height: 100%; */
        position: absolute;
        background: #fff;
        overflow: hidden;

    }
    .w-i-tips-item{
        line-height: 26px;
        font-size: 14px;
        width: 100px;
        text-align: right;
        padding-right: 13px;
        color: #666;
    }
    .detail-title-item{
        line-height: 26px;

    }
    .w-i-approve{
        color: #666;
    }
    .read-detail-wrap{
        padding-left: 58px;
    }
    .btn-blue-width90{
    padding: 0;
    height: 36px;
    line-height: 36px;
    width: 90px;
    text-align: center;
    border: 1px solid #158DF6;
    color: #158DF6!important;
    background: #fff;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    }
    .btn-blue-fot{
    padding: 0 14px 0 14px;
    height: 34px;
    line-height: 34px;
    text-align: left;
    background: #158DF6;
    border: none;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
    }
    .dialog-desc{
        color: #666;
    }
    .nav-title-wrap{
        display: flex;
    }
    .title-copt{
        flex: 1;
    }
    .mg-l-20{
        margin-left: 20px;
    }
    .mg-r-20{
        margin-right: 20px;
    }
    .mg-l-58{
        margin-left: 58px;
    }
    .mg-top-15{
        margin-top: 15px;
    }
    .mg-top-10{
        margin-top: 10px;
    }
    .mg-bt-50{
        margin-bottom: 50px;
    }
    .read-msg{
    font-weight: 600;
    color: #333;
    font-size: 17px;
    margin-top: -20px;
    margin-bottom: 10px;
    }
    .el-table td, .el-table th {
  padding: 10px 0 !important;
  text-align: center !important;
}
.dialog-show-statis .el-table td ,.dialog-show-statis .el-table th{
  text-align: right !important;
}
.dialog-show-message .el-table td ,.dialog-show-message .el-table th{
  text-align: right !important;
}

.el-table th, .el-table th {
  background-color: #F2F7FC !important;;
  background: #F2F7FC !important;
}
.block{
    text-align: right;
    width: 600px;
    margin-top: 13px;
}
.flex-dsp{
 display: flex;
}
.tips-content{
max-height: 180px;
overflow: auto;
}

</style>
</head>
<body>
<div id="app">
	<div class="bread-wp">
				公告通知 >   公告消息审核  >   公告详情
	</div>
       <div v-if="noticeDetail.noticeType==1">
            <div class="dialog dialog-detail-con">
                <div class="dialog-detail-wp">
                    <div class="nav-title-wrap">
                        <div class="detail-title-item clearfloat title-copt">
                        <span class="tips-title">发布类型</span>
                        <span class="dialog-desc" >公告</span>
                       </div>

                       <div class="detail-title-item clearfloat title-copt">
                        <span class="tips-title">审核类型</span>
                        <span class="dialog-desc">{{noticeDetail.approvalTypeName?noticeDetail.approvalTypeName:'无'}}</span>
                       </div>
                    </div>
                    <div class="detail-title-item clearfloat">
                        <span class="tips-title">封面图片</span>
                        <img :src="noticeDetail.coverUrl" alt="" class="dialog-image">
                    </div>
                    <div class="detail-title-item clearfloat">
                        <span class="tips-title">主题</span>
                        <span class="dialog-desc">{{noticeDetail.title}}</span>
                    </div>
                    <div class="detail-title-item clearfloat">
                        <span class="tips-title">正文</span>
                        <div v-html="noticeDetail.content" class="dialog-textarea-desc" readonly="readonly"></div>
                        <!-- <div class="dialog-textarea-desc" readonly="readonly">{{noticeDetail.content}}</div > -->
                    </div>
                    <div class="detail-title-item clearfloat">
                        <span class="tips-title">摘要</span>
                        <span class="dialog-desc">{{noticeDetail.summaryInfo}}</span>
                    </div>

                    <div v-if="noticeDetail.auditList">
                        <div v-for="item in noticeDetail.auditList" :key="item.id" >
                        <div>
                            <span class="w-i-tips-item">审核人:</span>
                            <span class="w-i-approve">{{item.approvalUser}}</span>
                        </div>
                        <div class=" clearfloat">
                            <span class="w-i-tips-item">审核时间:</span>
                            <span class="w-i-approve">{{item.approvalTime}}</span>
                        </div>
                        <div class=" clearfloat">
                            <span class="w-i-tips-item">审核结果:</span>
                            <span class="w-i-approve">{{item.approvalResult==1?"通过":"不通过"}}</span>
                        </div>
                        <div class="clearfloat">
                            <span class="w-i-tips-item">审核意见:</span>
                            <span class="w-i-approve">{{item.approvalOpinion}}</span>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
    </div>
    <div v-if="(noticeDetail.noticeType==2||noticeDetail.noticeType==5||noticeDetail.noticeType==6||noticeDetail.noticeType==7) &&noticeDetail.contentType==1">
        <div class="dialog dialog-detail-con">
            <div class="dialog-detail-wp">
                <div class="nav-title-wrap">
                    <div class="detail-title-item clearfloat title-copt">
                    <span class="tips-title">发布类型</span>
                    <span class="dialog-desc" >banner</span>
                   </div>

                   <div class="detail-title-item clearfloat title-copt">
                    <span class="tips-title">审核类型</span>
                    <span class="dialog-desc">{{noticeDetail.approvalTypeName?noticeDetail.approvalTypeName:'无'}}</span>
                   </div>
                </div>
                <div class="detail-title-item clearfloat">
                    <span class="tips-title">发布内容</span>
                    <span class="dialog-desc">图文消息</span>
                </div>
                <div class="detail-title-item clearfloat">
                    <span class="tips-title">banner图片</span>
                    <img :src="noticeDetail.coverUrl" alt="" class="dialog-image">
                </div>
                <div class="detail-title-item clearfloat">
                    <span class="tips-title">主题</span>
                    <span class="dialog-desc">{{noticeDetail.title}}</span>
                </div>
                <div class="detail-title-item clearfloat">
                    <span class="tips-title">正文</span>
                    <div v-html="noticeDetail.content" class="dialog-textarea-desc" readonly="readonly"></div>
                    <!-- <div class="dialog-textarea-desc" readonly="readonly">{{noticeDetail.content}}</div > -->
                </div>

                <div v-if="noticeDetail.auditList">
                    <div v-for="item in noticeDetail.auditList" :key="item.id" >
                    <div>
                        <span class="w-i-tips-item">审核人:</span>
                        <span class="w-i-approve">{{item.approvalUser}}</span>
                    </div>
                    <div class=" clearfloat">
                        <span class="w-i-tips-item">审核时间:</span>
                        <span class="w-i-approve">{{item.approvalTime}}</span>
                    </div>
                    <div class=" clearfloat">
                        <span class="w-i-tips-item">审核结果:</span>
                        <span class="w-i-approve">{{item.approvalResult==1?"通过":"不通过"}}</span>
                    </div>
                    <div class="clearfloat">
                        <span class="w-i-tips-item">审核意见:</span>
                        <span class="w-i-approve">{{item.approvalOpinion}}</span>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div v-if="(noticeDetail.noticeType==2||noticeDetail.noticeType==5||noticeDetail.noticeType==6||noticeDetail.noticeType==7) &&noticeDetail.contentType==2">
        <div class="dialog dialog-detail-con">
            <div class="dialog-detail-wp">
                <div class="nav-title-wrap">
                    <div class="detail-title-item clearfloat title-copt">
                    <span class="tips-title">发布类型</span>
                    <span class="dialog-desc" >banner</span>
                   </div>

                   <div class="detail-title-item clearfloat title-copt">
                    <span class="tips-title">审核类型</span>
                    <span class="dialog-desc">{{noticeDetail.approvalTypeName?noticeDetail.approvalTypeName:'无'}}</span>
                   </div>
                </div>
                <div class="detail-title-item clearfloat">
                    <span class="tips-title">发布内容</span>
                    <span class="dialog-desc">跳转链接</span>
                </div>

                <div class="detail-title-item clearfloat">
                    <span class="tips-title">跳转链接</span>
                    <span class="dialog-desc">{{noticeDetail.urlAddress}}</span>
                </div>

                <div v-if="noticeDetail.auditList">
                    <div v-for="item in noticeDetail.auditList" :key="item.id" >
                    <div>
                        <span class="w-i-tips-item">审核人:</span>
                        <span class="w-i-approve">{{item.approvalUser}}</span>
                    </div>
                    <div class=" clearfloat">
                        <span class="w-i-tips-item">审核时间:</span>
                        <span class="w-i-approve">{{item.approvalTime}}</span>
                    </div>
                    <div class=" clearfloat">
                        <span class="w-i-tips-item">审核结果:</span>
                        <span class="w-i-approve">{{item.approvalResult==1?"通过":"不通过"}}</span>
                    </div>
                    <div class="clearfloat">
                        <span class="w-i-tips-item">审核意见:</span>
                        <span class="w-i-approve">{{item.approvalOpinion}}</span>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div v-if="noticeDetail.noticeType==3">
        <div class="dialog dialog-detail-con">
            <div class="dialog-detail-wp">
                <div class="nav-title-wrap">
                    <div class="detail-title-item clearfloat title-copt">
                    <span class="tips-title">发布类型</span>
                    <span class="dialog-desc" >生成链接</span>
                   </div>

                   <div class="detail-title-item clearfloat title-copt">
                    <span class="tips-title">审核类型</span>
                    <span class="dialog-desc">{{noticeDetail.approvalTypeName?noticeDetail.approvalTypeName:'无'}}</span>
                   </div>
                </div>
                <div class="detail-title-item clearfloat">
                    <span class="tips-title">主题</span>
                    <span class="dialog-desc">{{noticeDetail.title}}</span>
                </div>
                <div class="detail-title-item clearfloat">
                    <span class="tips-title">正文</span>
                    <div v-html="noticeDetail.content" class="dialog-textarea-desc" readonly="readonly"></div>
                    <!-- <div class="dialog-textarea-desc" readonly="readonly">{{noticeDetail.content}}</div > -->
                </div>

                <div v-if="noticeDetail.auditList">
                    <div v-for="item in noticeDetail.auditList" :key="item.id" >
                    <div>
                        <span class="w-i-tips-item">审核人:</span>
                        <span class="w-i-approve">{{item.approvalUser}}</span>
                    </div>
                    <div class=" clearfloat">
                        <span class="w-i-tips-item">审核时间:</span>
                        <span class="w-i-approve">{{item.approvalTime}}</span>
                    </div>
                    <div class=" clearfloat">
                        <span class="w-i-tips-item">审核结果:</span>
                        <span class="w-i-approve">{{item.approvalResult==1?"通过":"不通过"}}</span>
                    </div>
                    <div class="clearfloat">
                        <span class="w-i-tips-item">审核意见:</span>
                        <span class="w-i-approve">{{item.approvalOpinion}}</span>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class="read-detail-wrap" v-if="noticeDetail.noticeType==1">
        <div class="detail-title-item clearfloat flex-dsp">
            <div class="tips-title">催读详情</div>
            <div class="tips-content">
            <div v-for="(item,index) in tbRecordList" :key="index" class="tv-record-list">
                <span class="dialog-desc" >
                    <span>{{item.createTime?formatTime(item.createTime):""}} </span>
                    <span class="mg-l-20">{{item.content}}</span>

                </span>
            </div>
          </div>
        </div>
        <div class="block" v-if="totalRecordSize >=5 ">
            <el-pagination  :total="totalRecordSize" @size-change="sizeRecordChangeHandle" @current-change="currentRecordChangeHandle" :current-page="pageRecordIndex" :page-size="pageRecordSize" :page-sizes="[10, 20, 50, 200, 500,1000]" layout="total, prev, pager, next, sizes, jumper" background>
            </el-pagination>
          </div>
        <div class="detail-title-item clearfloat mg-top-10">
            <span class="tips-title" v-if="showTable && showTable.length > 0" >阅读情况</span>
            <span class="dialog-desc"  v-if="showTable && showTable.length > 0" >已读数：{{readNun?readNun:0}}</span>
            <span class="dialog-desc"  v-if="showTable && showTable.length > 0" >/</span>
            <span class="dialog-desc mg-r-20"  v-if="showTable && showTable.length > 0" >总数：{{totalSize?totalSize:0}}</span>
            <span class="dialog-desc" v-if="noticeDetail.isViews==1 && noticeDetail.views>0">浏览量:{{noticeDetail.views?noticeDetail.views:0}}</span>
            <button class="btn-blue-fot mg-l-20" @click="exportTable" v-if="showTable && showTable.length > 0">导出详情</button>
            <button class="btn-blue-fot mg-l-20" @click="mustRead" v-if="showTable && showTable.length > 0">催读</button>
        </div>
        <div class="detail-title-item clearfloat" v-if="showTable && showTable.length > 0">
            <span class="tips-title"></span>
            <el-table :data="showTable" style="width: 601px;max-height: 350px;overflow: auto;" border
                   class="table-box-index mg-l-58"   >
          <el-table-column prop="department" label="部门" width="250"> </el-table-column>
          <el-table-column prop="username" label="用户" width="250"> </el-table-column>
          <el-table-column prop="typename" label="是否已读" width="100"> </el-table-column>
        </el-table>
        </div>
        <div class="block" v-if="showTable && showTable.length > 0 ">
            <el-pagination  :total="totalSize" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-size="pageSize" :page-sizes="[10, 20, 50, 200, 500,1000]" layout="total, prev, pager, next, sizes, jumper" background>
            </el-pagination>
          </div>
    </div>
    <div>
        <button class="btn-blue-width90 mg-l-58 mg-top-15 mg-bt-50" @click="returnBack">返回</button>
    </div>

    <el-dialog  title="催读"  :visible.sync="dialogVisible" width="50%"  >
    <div  class="read-msg">给还未阅读公告的用户推送提醒！</div>
    <el-input type="textarea" :rows="5" placeholder="请输入内容"  v-model="textarea">
</el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="recordSubmit">确 定</el-button>
  </span>
</el-dialog>




</div>
	<script type="text/javascript">
		// 在页面加载好后就初始化vue实例,也可以在外面直接初始化
		$(document).ready(function(){
			const vm = new Vue({
				el:'#app',
				data(){
					return {
                        noticeDetail:{

                        },
                        bannerDetail:{},
                        bannerLink:{},
                        linkDetail:{},
                        noticeTypeValue:'',
                        showTable:[],
                        totalSize: 0,
                        totalRecordSize:0,
                        pageIndex: 1,
                        pageRecordIndex:1,
                        pageRecordSize: 10,
                        pageSize: 10,
                        dialogVisible:false,
                        textarea:'尊敬的用户，您有新的公告消息，请及时查看！',
                        detailId:"",
                        orgId:'',
                        readNun:'',
                        tbRecordList:[],

					}
				},

				methods:{
                    formatTime(v) {
                        var date = new Date(v);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                        var Y    = date.getFullYear()
                        var M    = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
                        var D    = String(date.getDate()).length == 1 ? "0" + date.getDate() : date.getDate()
                        var h    = String(date.getHours()).length == 1 ? "0" + date.getHours() : date.getHours()
                        var m    = String(date.getMinutes()).length == 1 ? "0" + date.getMinutes() : date.getMinutes()
                        var s    = String(date.getSeconds()).length == 1 ? "0" + date.getSeconds() : date.getSeconds()
                        // return `${Y}-${M}-${D} ${h}:${m}:${s}`
                        return  Y+"-"+M+"-"+D+"  "+h+":"+m+":"+s
                    },
                    exprotHandler(){
                    var _this = this;
                    _this.$message({message: '导出', type: 'success'});
                    $.ajax({
                        type: "post",
                        url: "/super_service/notice/appNotice/exportReportList",
                        data: {
                            id: _this.detailId,
                            orgId:_this.orgId,

                        },
                        success: function (data) {
                            if (data.code == 200) {
                                // location.href = data.data;
                                location.href =  "/super_service/upload/RecordFindList.xls";
                            }
                        },
                        error: function (error) {

                        }
		                });
                },
                    exportTable(){
                    var _this=this
                     _this.$confirm("此操作将导出报表详情数据, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            _this.exprotHandler();

                        })
                        .catch(() => {});
                    },
                    mustRead(){
                        this.dialogVisible=true
                    },
                    returnBack(){
                        window.location.href= '/super_service/notice/audit/noticeAppVerify';
                    },
   		//催收
            recordSubmit(){
                let	_this = this
                $.ajax({
                    type: "post",
                    url:  "/super_service/notice/appNotice/recordNotice",
                    data: {
					id: _this.detailId,
                    orgId:_this.orgId,
                    content:_this.textarea
				    },
                    success: function (data) {
                        if (data.code == 200) {
                            _this.$message({message: '催读成功', type: 'success'});
                            _this.dialogVisible=false
                            _this.ajaxDetail(_this.detailId)
                            _this.getDataList();
                            _this.getReminderRecordList();

                        }
                    },
                    error: function (error) {
                    }
                });
            },
            /**
		 *  //noticeType 公告类型： 1 公告 ；2 banner图；3 跳转链接
             //contentType 图文类型： 1 图文消息 ；2 跳转链接
		 * 显示详情弹窗 noticeType 创建公告类型 1 公告 2 banner图文链接 3 banner跳转链接 4 生成链接
		 * @param id
         *
         *
		 */
            ajaxDetail(id){
                let	_this = this
                $.ajax({
                    type: "post",
                    url:  "/super_service/notice/appNotice/getDetail",
                    data: {
					"id": id
				    },
                    success: function (data) {
                        if (data.code == 200) {
                            var result=data.data
                            console.log("noticeDetail",result)
                            _this.noticeDetail=result
                               }
                            },
                            error: function (error) {
                                }
                            });

                         },
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            sizeRecordChangeHandle(val){
                this.pageRecordSize = val
                this.pageRecordIndex = 1
                this.getReminderRecordList()
            },
            currentRecordChangeHandle(val) {
                this.pageRecordIndex = val
                this.getReminderRecordList()
            },
            getReminderRecordList(){
                let	_this = this
                $.ajax({
                    type: "post",
                    url:  "/super_service/notice/appNotice/getReminderRecord",
                    data: {
					id: _this.detailId,
                    page:_this.pageRecordIndex,
                    limit:_this.pageRecordSize,
				    },
                    success: function (data) {
                        if (data.code == 200) {
                            let result=data.data
                            _this.tbRecordList=result
                            _this.totalRecordSize=data.count
                        }
                    },
                    error: function (error) {
                    }
                });
            },
            getDataList(){
                let	_this = this
                $.ajax({
                    type: "post",
                    url:  "/super_service/notice/appNotice/getRecordList",
                    data: {
					id: _this.detailId,
                    page:_this.pageIndex,
                    limit:_this.pageSize,
				    },
                    success: function (data) {
                        if (data.code == 200) {
                            _this.readNun=data.data.read
                            _this.totalSize=data.data.count
                            let result=data.data.items
                            if(result!=null){
                                if(result.length>0){
                                    result.forEach(element => {
                                    element["username"]=element["name"] +" "+element["telephone"]
                                    element["typename"] = element["type"] ?"已读": "未读";
                                    });
                                }
                                _this.showTable=result
                            }else{
                                _this.showTable=[]
                            }



                        }
                    },
                    error: function (error) {
                    }
                });

            },
            getQueryString:
             function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
			},



		},
        created(){
            var id = this.getQueryString("id")
            this.detailId=id
            this.orgId=localStorage.getItem("projectOrgId")
            console.log("详情id",id,localStorage.getItem("projectOrgId"))
            if (!!id) {
                this.ajaxDetail(id)
                this.getDataList();
                this.getReminderRecordList();
            }

        },
			})
		})
	</script>


</body>
</html>
