<template>
	<div class="publicity-body">
		<div class="screen-box">
			<picker mode="multiSelector" @columnchange="bindDateColumnChange" @change="bindDateChange" :value="values" :range="dateCodes" class="screen-unit">
				<view>{{pageMsg.showDate}}</view>
			</picker>

			<picker mode="selector" @change="bindPartChange" :value="pageMsg.selectPart" range-key="ServerPart_Name" :range="screenPartCodes" class="screen-unit">
				<view>{{pageMsg.selectPart!=0 ?screenPartCodes[pageMsg.selectPart].ServerPart_Name:' 全部服务区'}}</view>
			</picker>

		</div>

		<view v-if="publicity.length>0">
			<div class="publicity-unit" @tap="gopublicityDetail(item)" v-for="(item,i) in publicity" :key="i">
				<div class="publicity-unit-body">
					<div class="publicity-unit-title">
						{{item.PUBLICITY_TITTLE}}
					</div>
					<div class="publicity-unit-info flex-between">
						<div class="serverpart-name">
							<view class="severpart-ico"></view>
							<span>{{item.SERVERPART_NAME}}</span>
						</div>
						<view class="">
							<text class="severpart-base-text">{{item.STAFF_NAME}}</text>
							<text class="severpart-base-text">{{item.OPERATE_DATE}}</text>

						</view>
					</div>

					<p class="publicity-text" >{{item.PUBLICITY_CONTENT}}</p>

					<div class="publicity-unit-info publicity-bottom">
						<div class="button-box">
							<i class="img-tsr"></i>
							<text class="button-text">{{item.COMMENT_COUNT}}评论</text>
						</div>
						<div class=" button-box" hover-class="navigator-hover" @tap.stop="tapPublicity(item)">
							<i class="img-lxfs" :class="{'img-zan-active':item.THUMBUP_STATE==1}"></i>
							<text class="button-text"  :class="{'active':item.THUMBUP_STATE==1}">{{item.THUMBUP_COUNT}}赞</text>
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="footer-text">{{publicity.length===pageMsg.totalCount?'———— 加载完毕 ————':'正在加载...'}}</div> -->
		</view>

		<view v-else-if="!pageMsg.isLoading" style="height: 100%;">
			<noFound :nodata="publicity.length>0 ? false : true"/>
		</view>
		<view class="load-more" v-if="publicity.length>0">
			<text>{{!pageMsg.isEnd ? '正在加载,请稍后...':'——— 我是有底线的 ———'}}</text>
		</view>

	</div>
</template>

<script>
	import { mapGetters,mapMutations } from 'vuex'
	export default {
		data () {
			const date = new Date()
			const year = date.getFullYear()
			const month = date.getMonth() + 1
			const day = date.getDate()
			let years = []
			let months = []
			let startYear = 2015
			for (let i = 1; i <= 12; i++) {
			    months.push(i+'月')
			}
			for (let i = startYear; i <= year; i++) {
			   years.push(i+'年')
			}

			let nowShowTime = this.$util.cutDate(new Date(), 'YYYY年MM月')

			return {

				showPicker: false,
				pageMsg: {
					pageIndex: 1,
					pageSize: 16,
					totalCount: 0,
					showDate: nowShowTime,
					selectDate: year+'-'+month,
					selectPart: 0,
					isEnd:false,
					isLoading: true,
				},
				/**
				 * 解决动态设置indicator-style不生效的问题
				 */
				visible: true,
				dateCodes:[years,months],
				values: [years.length-1,month-1],
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				publicity: [],
				screenPartCodes:[], // 可选择的服务区列表
			}
		},

		computed: {
			...mapGetters({
				'user': 'getUser',
				isReloading:'shouldReLoadingList'
			}),
		},
		methods:{
			...mapMutations(['shouldReLoadingList']),
			bindDateChange() {
				let values = this.values
				this.pageMsg.showDate = this.dateCodes[0][values[0]] +  this.dateCodes[1][values[1]]
				this.pageMsg.selectDate = this.dateCodes[0][values[0]].replace('年','') +'-'+  this.dateCodes[1][values[1]].replace('月','')
				this.pageMsg.pageIndex=1
				this.loadingType = 1
				this.getpublicity()
			},
			bindDateColumnChange (e){

				this.values[e.detail.column] =  e.detail.value

			},
			bindPartChange (e){
				this.pageMsg.selectPart = e.detail.value
				this.pageMsg.pageIndex= 1
				this.loadingType = 1
				this.getpublicity()
			},
			pickerCancel(){
				this.showPicker=false
			},
			tapPublicity(item){

				let _this = this

				_this.$request.$post("updatePublicityThumbs",{
					publicityId: item.PUBLICITY_ID
				}).then(rs=>{
					if( item.THUMBUP_STATE ==1) {
						item.THUMBUP_STATE = 0
						item.THUMBUP_COUNT -= 1
					}else {
						item.THUMBUP_STATE = 1
						item.THUMBUP_COUNT += 1
					}
				})
			},
			getServerList() { // 获取服务区
				let _this = this
				_this.$request.$get('GetPendingItemsBySP',{
					moduleguid: 'c870b1bc-95c8-473d-81c8-8596eb793bd4'
				}).then(rs => {
					if(rs.ResultCode && rs.ResultCode=='100'){
						_this.screenPartCodes = rs.Data.List
					}

					_this.screenPartCodes.unshift({ServerPart_Name:'全部服务区',ServerPartID:''})

				})
			},
			getpublicity(){
				let _this = this
				_this.$request.$get('getPublicityList',{
					serverpartId: _this.pageMsg.selectPart==0? '' :_this.screenPartCodes[_this.pageMsg.selectPart].ServerPartID,
					startDate: this.pageMsg.selectDate,
					pageIndex: this.pageMsg.pageIndex,
					pageSize: this.pageMsg.pageSize
				}).then(res => {

					uni.hideLoading()

					if(res.ResultCode==100 && res.Data.List instanceof Array){
						let _data = res.Data

						_this.pageMsg.totalCount = _data.TotalCount
						_this.publicity = _this.pageMsg.pageIndex==1 ? _data.List : [..._this.publicity,..._data.List,]
						if(_data.List.length< _this.pageMsg.pageSize) {
							_this.pageMsg.isEnd = true
						}
					}else{
						_this.publicity =[]
						_this.pageMsg.isEnd =true
						_this.pageMsg.isLoading= false
					}

					_this.$forceUpdate()
				})
			},
			gopublicityDetail(item){
				this.$util.toNextRoute('navigateTo',"/pages/publicity/publicityDetail?PUBLICITY_ID=" + item.PUBLICITY_ID)
				// uni.navigateTo({
				// 	url: "/pages/publicity/publicityDetail?PUBLICITY_ID=" + item.PUBLICITY_ID
				// })
			},
			reloading() {
				let _this = this
				uni.showLoading({
					title:'正在加载'
				})
				_this.publicity = []
				_this.publicitySum = []
				_this.getpublicity()
				_this.getServerList()
			},
			reachBottom () {
				let _this = this

				if(! _this.pageMsg.isEnd){
					uni.showLoading({
						title:'正在加载'
					})
					_this.pageMsg.pageIndex += 1
					_this.getpublicity()
				}

			}
		},
		onLoad() {
			this.reloading()


		},
		onReachBottom() {
			this.reachBottom()
		},
		onPullDownRefresh() {
			this.reloading()

			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onShow() {
			if(this.isReloading) {
				this.reloading()
				this.shouldReLoadingList(false)
			}
		},
		onUnload() {
			this.$util.addUserBehaviorNew()

		}
	}
</script>

<style scoped>
	.publicity-body {
	}
	.flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.publicity-unit-title {
		padding: 20upx 0 0 0;
		font-weight: bold;
	}
	.publicity-unit-info{
		display: flex;
		align-items: center;
		font-size: 24upx;
		padding: 12upx 0;
	}
	.img-lxfs {
		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-tsr {
		background: url('../../static/images/publicity/comment.png') no-repeat center right;
		background-size: contain;
	}

	.publicity-unit {
		/* border-bottom: 1upx solid #F0F0F0; */
		padding: 0 24upx;
		display: flex;
		align-items: center;
		background-color: #fff;
		margin-bottom: 16upx;
	}
	.severpart-ico {
		background: url('../../static/images/publicity/dingwei.png') no-repeat center right;
		background-size: contain;
		width: 48upx;
		height: 48upx;
		margin-right: 16upx;
	}


	.publicity-text {
		font-size: 28upx;
		/* color: #000; */
		/* height: 96upx; */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.5;
		margin-bottom: 32upx;
	}

	.publicity-unit-info .serverpart-name {
		display: flex;
		align-items: center;
		line-height: 1.7;
		color: #626262;
		background-color: #F7F7F7;
		border-radius: 4upx;
		justify-content: center;
		padding-right: 16upx;
		font-size: 24upx;
	}
	.publicity-unit-info>div i{
		margin-right: 8upx;
		width: 34upx;
		height: 34upx;
	}
	.publicity-bottom {

		border-top: 1upx;
		border-top-color: #eee;
		border-top-style: solid;
		justify-content: center;
		width: 700upx;
	}
	.button-box {
		flex: 1;
		justify-content: center;
		display: flex;
		align-items: center;
	}
	.button-text {
		color: #626262;
		font-size: 24upx;
	}
	.active.button-text  {
		color: #CB3A1B;
	}
	.severpart-base-text {
		font-size: 24upx;
		color: #A8A8A8;
	}
	.severpart-base-text+.severpart-base-text{
		margin-left: 16upx;
	}
	.severpart-base-text.ml30 {
		margin-left: 46upx;
	}
	.severpart-base-text span {
		color: #878686;
	}
	.footer-text {
		font-size: 24upx;
		text-align: center;
		padding: 16upx 0;
		color: #999;
	}
	.screen-box {
		background-color: #F8F8F8;
		padding: 15upx 24upx;
		display: flex;
		justify-content: space-between;
	}
	.screen-unit {
		display: flex;
		align-items: center;
		background-color: transparent;
	}
	.screen-unit:after {
		content: '';
		background: url('../../static/images/tab_down.png') no-repeat center;
		background-size: contain;
		width: 16upx;
		height: 20upx;
		display: inline-block;
		margin-left: 12upx;
	}

</style>
