<!--阳光公示详情-->
<template>
	<div class="page-view">
		<div v-if="isShow">
			<div class='base-info pb20'>
				<view class="content-title">{{baseData.PUBLICITY_TITTLE}}</view>
				<div class="content-top">
					<div class="serverpart-name">
						<view class="severpart-ico"></view>
						<span>{{baseData.SERVERPART_NAME}}</span>
					</div>
					<p>
						<span>{{baseData.STAFF_NAME}}</span>
						<span class="ml30">{{baseData.OPERATE_DATE}}</span>
					</p>

				</div>
				<div class="publicity-content">{{baseData.PUBLICITY_CONTENT}}</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>
				<div class="publicity-content mt30" v-if="baseData.spotcheckFileList.length>0">
					<b class="strong-text">
						抽检文件
					</b>
					<div class="img-Box">
						<fileUnit v-for="(arr,i) in baseData.spotcheckFileList" :fileItem="arr" :key="i" @tap="rememberReader(arr.name)"></fileUnit>

					</div>
				</div>
				<view class="publicity-content mt30" v-if="baseData.THUMBUP_LIST.length>2">
					<view class="support-box uni-flex">
						<i class="img-zan img-zan-active ico" ></i>
						<text class="support-names">{{baseData.THUMBUP_LIST}}</text>

					</view>
				</view>
				<div class="publicity-content mt30" v-if="baseData.commentList.length>0">
					<div>

						<b class="strong-text">最新评论</b> <span class="count">{{baseData.COMMENT_COUNT}}</span>
					</div>

					<view class="">
						<view class="uni-comment-list" v-for="(item,i) in baseData.commentList" :key="i">
							<view class="uni-comment-face"><image src="../../static/images/publicity/user.png" mode="aspectFit"></image></view>
							<view class="uni-comment-body">
								<view class="uni-comment-top">
									<text class="comment-name-text">{{item.STAFF_NAME}}</text>
								</view>
								<view class="uni-comment-content">{{item.COMMENT_CONTENT}}</view>
								<view class="uni-comment-date">
									<view class="date-text">{{timeFormat(item.OPERATE_DATE)}}</view>
									<!-- <view class="uni-comment-replay-btn">5回复</view> -->
								</view>
							</view>
						</view>
					</view>
				</div>
				<div class="rate-box">
					<div class="rate-gray" @click="showPopupBottom=true">写评论</div>
					<div class="rate-ico"  @click="showPopupBottom=true">
						<i class="img-comment ico"></i>
						<text class="fs12">评论</text>
					</div>
					<div class="rate-ico" @tap="tapPublicity" >
						<i class="img-zan ico" :class="{'img-zan-active':baseData.THUMBUP_STATE==1}"></i>
						<text class="fs12">赞</text>
					</div>
				</div>
				<!-- 关联弹出框 -->
				<uni-popup :show="showPopupBottom" type="bottom" @hidePopup="hidePopup">
					<view class="pop-body">
						<textarea v-model="commentContent" cursor-spacing='120' placeholder="填写你的评论" auto-height :focus="showPopupBottom" class="comment-textarea" placeholder-style="color:#A3A6AC;"/>
						<div class="btn" hover-class="btn-active" @tap="upComment">发布</div>
					</view>
				</uni-popup>
			</div>


		</div>

	</div>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex'
	import uniPopup from '@/components/uni-popup.vue'
	import fileUnit from '@/components/filesComponent/fileUnit.vue'
	export default {
		data() {

			return {
				baseData: {

				},
				isShow: false,
				loadingType: 1,
				foundType:0,
				FileList:[],
				cardShow:true,
				isSign: false,
				isResolve: false,
				showPopupBottom: false,
				commentContent: '',
				signInfo: {

				}
			}
		},
		components:{
			uniPopup,
			fileUnit
		},
		computed: {
			...mapGetters({'users':'getUser'})
		},
		methods: {
			...mapMutations(['shouldReLoadingList']),
			getDetail (id) {
				let _this = this
				_this.$request.$get('getPublicityDetils',{
					publicityId: 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
					})
					_this.baseData.spotcheckFileList.map(v => {
						let name= v.IMAGE_DESC.split('.')
						v.type = name[name.length-1]
						v.name = v.IMAGE_DESC
						v.path = v.IMAGE_PATH
					})
					 _this.rememberReader()

				})
			},
			timeFormat(timestamp) {
				var mistiming = Math.round((Date.now() - (new Date(timestamp)).getTime()) / 1000);
				var arrr = ['年', '个月', '星期', '天', '小时', '分钟', '秒'];
				var arrn = [31536000, 2592000, 604800, 86400, 3600, 60, 1];
				for (var i = 0; i<arrn.length; i++) {
					var inm = Math.floor(mistiming / arrn[i]);
					if (inm != 0) {
						return inm + arrr[i] + '前';
					}
				}
			},
			hidePopup() {
				this.showPopupBottom = false
			},
			tapPublicity(){
				let _this = this
				_this.$request.$post("updatePublicityThumbs",{
					publicityId: _this.baseData.PUBLICITY_ID

				}).then(res=>{
					_this.getDetail(_this.baseData.PUBLICITY_ID)
					_this.shouldReLoadingList(true);
				})
			},
			upComment(){
				let _this = this
				if(_this.commentContent.trim().length==0){
					return
				}
				_this.$request.$post("addPublicityComment",{

					publicityId: _this.baseData.PUBLICITY_ID,
					content: _this.commentContent.trim()
				}).then(res=>{
					if(res.ResultCode==100) {
						_this.commentContent = ''
						_this.hidePopup()
						_this.getDetail(_this.baseData.PUBLICITY_ID)
						_this.shouldReLoadingList(true);
					}
				})
			},
			rememberReader(fileName){
				let _this = this
				let data = {}

				_this.$request.$post("InsertPublicityReading",{
					fileName: fileName||'',
					readingType: 1000,
					publicityId: _this.baseData.PUBLICITY_ID
				})
			}
		},
		onUnload() {
			this.$util.addUserBehaviorNew()
		},
		onLoad(option) {
			uni.showLoading({
				title:'正在加载'
			})
			this.getDetail(option.PUBLICITY_ID)

		}
	}
</script>

<style scoped>
	@import url("../../common/css/tenderingDetail.css");
	.page-view {
		height: 100%;
		background-color: #fff;
	}
	.base-info {
		padding-bottom: 140rpx;
	}
	.fs12 {
		padding-left: 8rpx;
		font-size: 22rpx;
	}
	.content-title {
		font-weight: bold;
		line-height: 1.5;
	}
	.ml30 {
		margin-left: 24rpx;
	}
	.content-top {
		display: flex;
		justify-content: space-between;
		color: #A8A8A8;

		padding: 0 36rpx;
	}
	.content-top span{font-size: 24rpx; }
	.serverpart-name {
		display: flex;
		align-items: center;
		line-height: 1.7;
		color: #626262;
		background-color: #F7F7F7;
		border-radius: 4rpx;
		justify-content: center;
		padding-right: 16rpx;

	}
	.severpart-ico {
		background: url('../../static/images/publicity/dingwei.png') no-repeat center right;
		background-size: contain;
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}
	.publicity-content {
		padding: 16rpx 36rpx;
		font-size: 28rpx;
	}
	.mt30{
		margin-top: 16rpx;
	}

	.strong-text{
		display: inline-block;
		font-size: 26rpx;
		font-weight: bolder;
	}
	.count {
		display: inline-block;
		font-size: 24rpx;
		margin-left: 16rpx;
	}
	.img-Box {
		margin-left: 0;
		/* padding-top: 24rpx; */
		font-size: 22rpx;
		width: 100%;
	}
	.uni-comment-top .comment-name-text {
		color: #E49641;
	}
	.uni-comment-content{
		word-break: break-all;
		font-size: 26rpx;
	}
	.uni-comment-face image {
		height: 100%;
	}
	.uni-comment-date .date-text{
		color: #B1B3B8;
	}
	.support-box:before{
		content: '';
		border-width: 0 16rpx 16rpx 16rpx;
		border-style: solid;
		border-color: transparent transparent #F1F1F4;
		position: absolute;
		top: -16rpx;
		left: 16rpx;
	}
	.support-box {
		background-color: #F1F1F4;
		color: #586A8F;
		font-size: 26rpx;
		padding: 12rpx;
		position: relative;
		border-radius: 4rpx;
		margin-top: 30rpx;
		align-items: center;
	}
	.support-names {
		margin-left: 16rpx;
	}
	.rate-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 110rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-top:1rpx solid #e1e1e1;
		justify-content: space-evenly;
		/* padding: 0 30rpx; */
	}
	.rate-gray {
		width: 460rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #A3A6AC;
		background-color: #F7F8FB;
		border-radius: 35rpx;
		padding-left: 24rpx;
		font-size: 26rpx;
	}
	.rate-gray:before {
		content: '';
		width: 31rpx;
		height: 30rpx;
		background: url('../../static/images/publicity/tsjy_yj.png') no-repeat center;
		background-size: contain;
		display: inline-block;
		margin-right: 24rpx;
	}
	.img-zan {
		background: url('../../static/images/publicity/zan.png') no-repeat center;
		background-size: contain;
	}
	.img-zan-active {
		background: url('../../static/images/publicity/zan-active.png') no-repeat center;
		background-size: contain;
	}

	.img-comment {
		background: url('../../static/images/publicity/comment.png') no-repeat center right;
		background-size: contain;
	}
	.rate-ico{
		position: relative;
		align-items: center;
	}
	/* span.ico-t-count {

		font-style: normal;
		color: #fff;
		border-radius: 18px;
		min-width: 8px;
		width: auto;
		height: auto;
		padding: 0rpx 8rpx;
		font-size: 20rpx;
		line-height: 1.2;
		text-align: center;
		white-space: nowrap;
		background-color: #ed4d3e;
		position: absolute;
		right: -28rpx;
		top: -12rpx;
	} */
	.pop-body {
		height: 220rpx;
		padding: 32rpx 24rpx;
		display: flex;
		/* align-items: flex-end; */
		justify-content: space-between;
	}
	.comment-textarea {
		background-color: #F7F8FB;
		font-size: 26rpx;
		border-radius: 6rpx;
		padding: 16rpx;
		min-height: 148rpx;
		text-align: left;
		width: 520rpx;
	}
	.btn {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 26rpx;
		color: #fff;
		background-color: #C4D9F5;
		border-radius: 30rpx;
		margin-top: 90rpx;
	}
	.btn:active {
		background-color: #a7c3e8;
	}
</style>
