<!--公文阅办详情-->
<template>
	<div class="page-view">
		<div v-if="isShow">
			<div class='content-card pb20'>
				<view class="content-title">{{baseData.DOCUMENT_TITTLE}}</view>
				<div class="content-top">
					<div class="serverpart-name">
						<text class="text-gray">发文：</text>
						<text>{{baseData.STAFF_NAME}}</text>
					</div>
					<text class="ml30">{{baseData.OPERATE_DATE}}</text>
				</div> 
				<view class="line-block between-circle"></view>
				
				<div class="publicity-content" v-if="baseData.SuperiorData">
					<b class="strong-text">
						上级传阅人
					</b>
					<view>
						<text>{{baseData.SuperiorData.READING_STAFF}}：</text>
						<text class="ml30">{{baseData.SuperiorData.SUGGESTION}}</text>
					</view>
				</div>
				<div class="publicity-content" v-if="baseData.fixedFileList.length>0">
					<b class="strong-text">
						附件文件
					</b>
					<div class="img-Box">
						<fileUnit v-for="(arr,i) in baseData.fixedFileList" :fileItem="arr" :key="i" @tap="rememberReader(arr.name)"></fileUnit>
					</div>
				</div>
				
				<view class="publicity-content mt30" v-if="baseData.READING_STAFF">
					<b class="strong-text">
						接收人员
					</b>
					<view class="support-box uni-flex">
						<text :class="{'support-names':moreReader}" >{{baseData.READING_STAFF}}</text>
						<view class="more-btn" @tap="moreReader = !moreReader" :style="!moreReader?'transform:rotate(180deg)':''" v-if="baseData.READING_STAFF.length>50">
							<image src="../../static/images/xl.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</div>
			<view class="button-box">
				<navigator :url="'/pages/officialDocManagement/circulate?id='+baseData.DOCUMENT_ID+'&type='+documentListType"><image src="../../static/images/cy-btn.png" mode="aspectFit"></image> 传阅 </navigator>
				
			</view>
			<div class="publicity-content mt30 " v-if="baseData.readingList.length>0">
				<div class="uni-flex ptb24" style="justify-content: space-between;" >
					<b class="strong-text">阅办记录</b> <navigator class="text-blue" :url="'/pages/officialDocManagement/readerList?id='+baseData.DOCUMENT_ID+'&type='+documentListType">阅办详情 <text class="uni-icon uni-icon-arrowright"></text></navigator>
				</div>
				
				<view class="">
					<view class="reading-list" v-for="(item,i) in baseData.readingList" :key="i">
						<view class="uni-flex" style="justify-content: space-between;margin-bottom: 8upx;">
							<view>
								<text class="comment-name-text">{{item.READING_STAFF}}</text>
								<text class="text-gray fs12" v-if="item.ISDOWN==1">【已下载】</text>
							</view>
							<view  v-if="item.PRESCRIPTION">
								
								<text class="fs12">【{{getDealTime(item.PRESCRIPTION)}}】</text>
								<text class="text-gray fs12"  v-if="item.PREVIEWDATE">{{$util.cutDate(item.PREVIEWDATE,'MM-DD hh:mm') }}</text>
							</view>
							<view v-else><text class="fs12">【未阅】</text></view>
						</view>
						<view class="uni-read-content" v-if="item.SUGGESTION">
							<text>{{item.SUGGESTION}}</text>
						</view>
						<view class="uni-flex fs12" style="margin-bottom: 16upx;align-items: flex-start;" v-if="item.READPERSON || item.NOTREADPERSON">
							<view class="uni-flex" style="align-items: center;">
								<image src="/static/images/reader/read.png" mode="aspectFit"></image>
								<text class="fs12">已阅：</text>
							</view>
							<text class="fs12 reader-text">{{item.READPERSON || '无'}}</text>
						</view>
						<view class="uni-flex fs12" style="align-items: flex-start;"  v-if="item.READPERSON || item.NOTREADPERSON">
							<view class="uni-flex" style="align-items: center;">
								<image src="/static/images/reader/no-read.png" mode="aspectFit"></image>
								<text class="fs12">未阅：</text>
							</view>
							<text class="reader-text fs12">{{item.NOTREADPERSON || '无'}}</text>
						</view>
					</view>
				</view>
			
			</div>
		</div>
	
	</div>
</template>

<script>
	
	import fileUnit from '@/components/filesComponent/fileUnit.vue'
	import { mapGetters } from 'vuex'
	export default {
		data() {
		
			return {
				baseData: {
					
				},
				documentListType: 1000,
				isShow: false,
				
				isRead:true,
				FileList:[],
				refresh: 0,// 当前页面是否更新过数据
				moreReader: true,
				
			}
		},
		components:{
		
			fileUnit
		},
		computed: {
			...mapGetters({'users':'getUser'})
		},
		methods: {
			
			getDetail (option) {
				let _this = this
				_this.$request.$get('getDocumentDetails',{
				
					documentListType: this.documentListType,
					documentId: option.id
				}).then(rs => {
					
					if(rs.ResultCode=='100'){
						this.isShow = true
					}
					uni.hideLoading()
					_this.baseData =  rs.Data
					
					_this.baseData.fixedFileList.map(v => {
						let name= v.IMAGE_DESC.split('.')
						v.type = name[name.length-1]
						v.name = v.IMAGE_DESC
						v.path = v.IMAGE_PATH
					})
					if(option.isread==0){
						this.rememberReader()
					}
				})
			},
			getDealTime(_time){ // 处理时效格式化 
				_time = _time/60
				if(_time<1){
					return '1小时内'
				}
				
				else if(_time>1 && _time<24){
					
					return parseInt(_time)+'小时内'
					
				}
				else if(_time>24){
					return parseInt(_time/24)+'天内'
				} else {
					return parseInt(_time)+'小时内'
				}
			},
			
			rememberReader(fileName){ // 公文传输新增阅览记录

				let _this = this 
				let data = {}
				
				_this.$request.$post("InserDocumentReading",{
				
					documentId: _this.baseData.DOCUMENT_ID,
					documentName: fileName||'',
					readingType: 1000, // 浏览公文:1000,下载文件:2000
					
				})
				
			}
		},
		onUnload() { // 用户后退时若访问初始状态为未浏览（isread = 0） ，则把状态更变的信息通知列表页面进行更新
			this.$util.addUserBehavior()
			if(this.isRead==0 || this.refresh==1){
				uni.$emit('needrefresh', true);
			}
			uni.$off('docCirculate');
		},
		onLoad(option) {
			uni.showLoading({
				title:'正在加载'
			})
			this.documentListType = option.type
			this.isRead = option.isread
			this.getDetail(option)
			let _this = this
			uni.$on('docCirculate', function (data){ // 检测公文状态若为true,则刷新页面
				if(data) {
					uni.showLoading({
						title:'正在加载'
					})
					_this.refresh = 1 
					_this.getDetail({id:_this.baseData.DOCUMENT_ID})
					
				}
			});
		},
		onShow() {
			
		},
	
		onHide() {
			
		}
	}
</script>

<style scoped>
	
	.page-view {
		height: 100%;
		/* background-color: #fff; */
	}
	.ptb24 {
		padding: 24upx 0;
	}
	.mt30{
		margin-top: 16upx;
	}
	
	.ml30 {
		margin-left: 24upx;
	}
	.fs12 {
		padding-left: 8upx;
		font-size: 22upx;
	}
	.content-card {
		margin: 24upx;
		background-color: #fff;
		border-radius: 9upx;
		box-shadow: 0upx 2upx 8upx 0upx rgba(225,225,225,0.48); 
		padding-bottom: 32upx;
		position: relative;
		box-sizing: content-box;
	}
	.line-block {
		border-bottom: 2upx dashed #E4E6EC;
		
		width: 100%;
		margin-top: 12upx;
		
	}
	.between-circle{
		position: relative;
	}
	.between-circle:before {
		content: '';
		width: 20upx;
		height: 20upx;
		background-color: #f8f9fb;
		box-shadow: -4upx 0upx 6upx rgb(234, 234, 234);
		border-radius: 50%;
		position: absolute;
		left: -12upx;
		top: -10upx;
		z-index: 1;
		transform: rotate(180deg);
	}
	.between-circle:after {
		content: '';
		width: 20upx;
		height: 20upx;
		background-color: #f8f9fb;
		box-shadow: -4upx 0upx 6upx rgb(234, 234, 234);
		border-radius: 50%;
		position: absolute;
		right: -12upx;
		z-index: 1;
		top: -10upx;
		
	}
	.content-title {
		text-align: center;
		padding-top: 24upx;
		font-weight: bold;
		line-height: 1.5;
		margin-bottom: 24upx;
	}
	
	.content-top {
		display: flex;
		justify-content: space-between;
		color: #A8A8A8;
		padding: 0 36upx;
	}
	.content-top text {
		font-size: 24upx;
	 }
	.serverpart-name {
		line-height: 1.7;
		color: #626262;
	}
	
	.publicity-content {
		padding: 16upx 32upx;
		font-size: 26upx;
		background-color: #fff;
	}
	
	.strong-text{
		display: inline-block;
		font-size: 24upx;
		font-weight: bolder;
	}
	.text-blue {
		color: #377EF6;
		display: inline-block;
		font-size: 24upx;
		margin-left: 16upx;
	}
	.uni-icon-arrowright {
		font-size: 24rpx;
	}
	.img-Box {
		margin-left: 0;
		/* padding-top: 24upx; */
		font-size: 22upx;
		width: 100%;
	}
	.reading-list {
		margin-bottom: 30upx;
	}
	.text-gray  {
		color: #B1B3B8;
		
	}
	 .comment-name-text {
		color: #E49641;
	}
	.uni-read-content{
		word-break: break-all;
		font-size: 26upx;
		margin: 0 0 12upx;
	}
	.reader-text {
		color: #74838E;
		max-width: 570upx;
	}
	.reading-list image {
		width: 26upx;
		height: 26upx;
	}

	.support-box:before{
		content: '';
		border-width: 0 16upx 16upx 16upx;
		border-style: solid;
		border-color: transparent transparent #F8F9FB;
		position: absolute;
		top: -16upx;
		left: 16upx;
	}
	.support-box {
		background-color: #F8F9FB;
		color: #586A8F;
		font-size: 26upx;
		padding: 12upx;
		position: relative;
		border-radius: 4upx;
		margin-top: 30upx;
		align-items: center;
		flex-direction: column;
	}
	.support-names {
		overflow: hidden;
		text-overflow: ellipsis;
		height: 98upx;
		display: -webkit-box;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		width: 100%;
	}
	.all-names {
		
	}
	.more-btn {
		text-align: center;
		width: 100%;
		line-height: 1;
		transition: all 200ms ;
	}
	.more-btn image {
		width: 22upx;
		height: 12upx;
	}
	.button-box {
		display: flex;
		justify-content: space-around;
		padding-bottom: 6upx;
	}
	.button-box image {
		width: 100upx;
		height: 100upx;
	}
	.button-box navigator {
		font-size: 24upx;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
</style>
