<template>
	<view class="mbwa-body">
		<div class="page-header">
			<div class="page-header-middle">
				<div style="flex:1;text-align: center;">
					<image src="https://eshangtech.com/ShopICO/uniapp/jryj.png" mode="aspectFit"></image>

					<div class="page-wcl">
						<span>{{headerContent.UrgentCount||0}}</span>
						条异常
					</div>
				</div>

				<div class="header-text">
					<p class="normal-day" v-if="headerContent.UrgentCount===0">
						今日暂无异常
					</p>
					<view class="unusual-day" v-else>
						<view v-for="tip in headerContent.List" :key="tip.MBWA_ID">
							{{tip.MBWA_ADDRESS}}:{{tip.MBWA_CONTENT}}
						</view>
					</view>
				</div>
			</div>
		</div>

		<div class="massage-tab">
			<div class="massage-unit" :class="{'active':currentTab===0}" @tap="currentTab=0">
				现场
			</div>
			<div class="massage-unit" :class="{'active':currentTab===1}" @tap="currentTab=1">
				异常
			</div>
			<block v-if="screenCodes.length">

				<picker mode="selector" @change="bindPartChange" :value="selectIndex" range-key="showName" :range="screenCodes" class="now-serverpart">
					<view>{{screenCodes[selectIndex].showName}}</view>
				</picker>
			</block>
		</div>

		<view style="flex: 1;width: 750upx;overflow: hidden;">
			<scroll-view v-show="currentTab===0" enableBackToTop="true" scroll-y style="height: 100%;" @scrolltolower="reachBottom()">

				<div class="msg-list" v-if="pageList.length>0">
					<div class="msg-unit" hover-class="navigator-hover" v-for="(value,key) in pageList" :key="key" @tap="toDetail(value)">
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">
								<p>
									<span class="area-title">{{value.SHOPNAME}}</span>
								</p>
								<!-- <span class="status-tag shouldDo" v-if="value.SORTNUM==0">待我处理</span> -->
								<span class="status-tag" :class="{'shouldDo':value.SORTNUM==0, 'normal':value.PROCESSMODE===0, 'typeText-color': value.PROCESSMODE === 4}">{{stautsKeys[value.PROCESSMODE]}}</span>
							</view>
							<p class="mbwa-content">{{value.MBWA_CONTENT}}</p>
							<div class="uni-media-list-text-top">
								<span class="area-name">{{value.MEMBERSHIP_NAME}}</span>
								<span class="massage-date">{{value.CREATE_DATE}}</span>
							</div>
						</view>
						<image mode="aspectFill" lazy-load :src="value.IMAGELIST.length>0 ? value.IMAGELIST[0].IMAGE_URL : 'https://eshangtech.com/ShopICO/no-picture.png'"></image>

					</div>


				</div>
				<block v-else>
					<div class="no-msg" v-show="pageMsg.todayloadingType!==0 && pageList.length===0 && pageMsg.todayIsLastDay==1">
						<noFound></noFound>
					</div>
				</block>
				<block v-if="pageMsg.todayloadingType!==0">
					<view class="moredate-box" @tap="showDate"  v-if="pageMsg.todayIsLastDay==0">
						<text v-if="searchType==-1">轻按查看昨日巡检</text>
						<text v-else-if="searchType==-2">轻按查看前日巡检</text>
						<text v-else>轻按查看<text>{{nextDate}}</text>巡检</text>
					</view>
					<div class="footer-text" v-else-if="pageList.length!=0">——没有更多数据了——</div>
				</block>
				<div class="footer-text" v-else>正在加载...</div>

			</scroll-view>
			<scroll-view v-show="currentTab===1" enableBackToTop="true" scroll-y style="height: 100%;" @scrolltolower="reachBottom()">
				<div class="unusual-header" v-if="screenCodes[selectIndex].ServerPart_Name">
					<div class="unusual-header-text">
						{{screenCodes[selectIndex].ServerPart_Name}}今日应巡查点位<span class="red-span">{{headerContent.CheckPoint}}</span>个共{{headerContent.CheckCount}}次,今日未检点位<span class="red-span">{{headerContent.UnCheckPoint}}</span>个共{{headerContent.UnCheckCount}}次,去查看缺检情况吧

					</div>
					<navigator class="unusual-header-btn" :url="'/pages/mbwa/mbwaUnCheck?id='+screenCodes[selectIndex].ServerPartID" @click="$util.addUserBehaviorNew({intoRoute:'/pages/mbwa/mbwaUnCheck'})">查看详情</navigator>
				</div>
				<div class="msg-list"  v-if="waitList.length>0">
					<view class="msg-unit" hover-class="navigator-hover" v-for="(value,key) in waitList" :key="key" @tap="toDetail(value)">
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">
								<p>
									<span class="area-title">{{value.SHOPNAME}}</span>
								</p>
								<!-- <span class="status-tag shouldDo" v-if="value.SORTNUM==0">待我处理</span> -->
								<span class="status-tag" :class="{'shouldDo':value.SORTNUM==0 , 'normal':value.PROCESSMODE===0, 'typeText-color': value.PROCESSMODE === 4}">{{stautsKeys[value.PROCESSMODE]}}</span>
							</view>
							<p class="mbwa-content">{{value.MBWA_CONTENT}}</p>
							<div class="uni-media-list-text-top">
								<span class="area-name">{{value.MEMBERSHIP_NAME}}</span>
								<span class="massage-date">{{value.CREATE_DATE}}</span>
							</div>
						</view>
						<image mode="aspectFill" lazy-load :src="value.IMAGELIST.length>0 ? value.IMAGELIST[0].IMAGE_URL : 'https://eshangtech.com/ShopICO/no-picture.png'"></image>

					</view>

					<div class="footer-text">{{waitList.length===pageMsg.unusualListCount?'——— 加载完毕 ———':'正在加载...'}}</div>
				</div>
				<div v-else>

					<noFound :nodata="pageMsg.unusualloadingType===2 && waitList.length===0? true : false"/>

				</div>
			</scroll-view>

		</view>
	</view>


</template>

<script>
	import { mapGetters,mapMutations } from 'vuex'
	export default {

		data() {
			let nowTime = this.$util.cutDate(new Date(), 'YYYY/MM/DD')


			let day = new Date();
			let num = day.getDay() - 1;
			day.setDate(day.getDate() - num); //本周第一天
			let lastTime = this.$util.cutDate(day, 'YYYY/MM/DD')
			return {
				searchTime: [nowTime, nowTime],
				searchType: -1,
				nextDate: '',
				selectIndex: 0, // 列表中选中的服务区index
				loadingType: 1,
				foundType: 0,
				currentTab: 0,
				themeColor: '#64a0e6',
				headerContent: {}, // 走动式管理头部预警，今日待检信息
				pageList: [],
				waitList: [],
				pageMsg:{
					unusualEnd: false,
					unusualPageIndex: 1,
					unusualListCount: 0,
					unusualPageSize: 10,
					todayloadingType: 0,
					todayPageIndex: 1,
					todayPageSize: 10,
					todayListCount: 0,
					todayIsLastDay: 0,
				},
				screenCodes:[],
				stautsKeys: {
					0: '正常',
					1: '待处理',
					2: '待反馈',
					3: '待确认',
					4: '已确认'
				}
			}
		},

		computed:{
			...mapGetters({isReloading:'shouldReLoadingList','user': 'getUser'})
		},
		methods: {
			...mapMutations(['shouldReLoadingList']),
			showDate () {
				let _date = this.$util.cutDate(new Date(), 'YYYY/MM/DD',this.searchType)
				this.searchTime = [_date,_date]
				this.searchType -= 1
				this.nextDate = this.$util.cutDate(new Date(), 'YYYY-MM-DD',this.searchType)
				this.pageMsg.todayPageIndex =1
				uni.showLoading({
					title:'正在加载'
				})
				this.getMbwaList()
			},
			getMbwaOutline() { // 获取走动式管理头部预警，今日待检信息
				let _this = this
				_this.$request.$get("GetMbwaOutline",{
					SERVERPART_ID: _this.screenCodes[this.selectIndex].ServerPartID,
					STATISTICSDATE: _this.$util.cutDate(new Date(), 'YYYY/MM/DD'),
				}).then(res => {
					if(res.ResultCode==100) {
						let _data = res.Data
						_this.headerContent = _data
					}else{
						uni.showToast({
							title: _data.ResultDesc,
							icon:'none'
						})
					}

				})
			},
			getServerList() { // 获取服务区
				let _this = this
				_this.$request.$get('GetPendingItemsBySP',{
					moduleguid: 'c26c1620-2149-4b3d-ac2e-07e0c0494042',

				}).then(res => {
					if(!res.ResultCode ||res.ResultCode!='100'){
						_this.isShow = false
					}

					if(res.Data && res.Data.List.length>0){
						_this.screenCodes = res.Data.List
						_this.screenCodes.map(n=>{
							n.showName = n.ServerPart_Name+'【待办'+n.Count+'条】'
						})
						_this.getMbwaList()
						_this.getUnualList()
						_this.getMbwaOutline()

					}else{
						_this.pageMsg.todayIsLastDay=1
						_this.pageMsg.todayloadingType = 1
						uni.hideLoading()
					}

				})
			},
			getMbwaList() { // 以新闻列表模式呈现走动式管理数据

				let _this = this
				_this.$request.$get('GetMbwaNewList',{
					HASPENDING: 0, // 1：仅查询待处理项；其他：所有列表信息
					USER_ID: _this.user.UserId,
					STATISTICSDATE: _this.searchTime.toString(','),
					SERVERPART_ID: _this.screenCodes[this.selectIndex].ServerPartID,
					pageSize: _this.pageMsg.todayPageSize,
					pageIndex: _this.pageMsg.todayPageIndex
				}).then(rs => {

					if(!rs.ResultCode ||rs.ResultCode!='100'){
						_this.isShow = false
					}
					let _data = rs.Data.List
					uni.hideLoading()

					_this.pageMsg.todayIsLastDay = rs.Data.IsLastDate
					_this.pageMsg.todayListCount = rs.Data.TotalCount

					_this.pageList = (_this.pageMsg.todayPageIndex===1 && _this.searchType === -1) ? _data : [..._this.pageList,..._data]

					if(_data.length < _this.pageMsg.todayPageSize) {
						_this.pageMsg.todayloadingType = 2

					}else{
						_this.pageMsg.todayloadingType = 1

					}
					_this.$forceUpdate()

				})

			},
			getUnualList() { // 异常数据

				let _this = this
				_this.$request.$get('GetMbwaNewList',{
					HASPENDING: 1, // 1：查询异常情况
					USER_ID: _this.user.UserId,
					SERVERPART_ID: _this.screenCodes[this.selectIndex].ServerPartID,
				}).then(rs => {
					if(!rs.ResultCode ||rs.ResultCode!='100'){
						_this.isShow = false
					}else {

						let _data = rs.Data.List

						_this.waitList = _this.pageMsg.unusualPageIndex===1 ? _data : [..._this.waitList,..._data]

						_this.pageMsg.unusualListCount = rs.Data.TotalCount
						if(_data.length < _this.pageMsg.unusualPageSize) {

							_this.pageMsg.unusualEnd = true
						}
						_this.$forceUpdate()

					}

				})
			},
			toDetail(value) {
				this.$util.toNextRoute('navigateTo',  '/pages/mbwa/mbwaDetail?MBWA_ID=' + value.MBWA_ID)

			},
			bindPartChange(e) {

				this.selectIndex = e.detail.value

				uni.showLoading({
					title:'正在加载',
					mask:true
				})
				this.getMbwaOutline()

				 // 当前为现场数据

				let _date = this.$util.cutDate(new Date(), 'YYYY/MM/DD')
				this.searchTime = [_date,_date]
				this.searchType = -1
				this.nextDate = this.$util.cutDate(new Date(), 'YYYY/MM/DD',-1)
				this.pageMsg.todayloadingType = 0
				this.pageMsg.todayPageIndex = 1
				this.getMbwaList()

				// 当前为异常数据

				this.pageMsg.unusualEnd =false
				this.pageMsg.unusualPageIndex = 1
				this.getUnualList()
				this.$forceUpdate()
			},
			downFresh() { // 下拉刷新
				let _this = this
				if (_this.currentTab===0) { // 当前为现场数据

					_this.pageMsg.todayPageIndex = 1
					_this.getMbwaList()
					_this.$forceUpdate()
				} else { // 当前为异常数据


					_this.pageMsg.unusualPageIndex = 1
					_this.getUnualList()
					_this.$forceUpdate()
				}
			},
			reloading(){
				this.getServerList()
			},
			reachBottom () {
				let _this = this

				if (_this.currentTab===0) { // 当前为现场数据
					if(_this.pageMsg.todayloadingType === 1){
						_this.pageMsg.todayloadingType = 0
						_this.loadingType = 1
						_this.pageMsg.todayPageIndex += 1
						_this.getMbwaList()
						_this.$forceUpdate()
					}
				} else { // 当前为异常数据
					if(!_this.pageMsg.unusualEnd){
						_this.pageMsg.unusualPageIndex += 1
						_this.getUnualList()

					}
				}
			},
		},
		onLoad() {
			uni.showLoading({
				title:'正在加载',
				mask: true
			})
			this.reloading()

		},

		onPullDownRefresh() {
			this.downFresh()

			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			this.reachBottom()
		},
		onShow() {
			let _this = this

			if(this.isReloading) {
				uni.showLoading({
					title:'正在加载'
				})

				_this.getMbwaList()
				_this.getUnualList()
				_this.shouldReLoadingList(false)
			}

		},
		onUnload() {
			this.$util.addUserBehaviorNew()

		},
		onHide() {

		}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
	}
	.mbwa-body{
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		width: 750upx;
	}
	.ml60 {
		margin-left: 60upx;
	}

	.page-header {
		width: 100%;

		padding: 32upx 24upx 32upx 0;
		background: #fff;
		background-size: cover;
		position: relative;
		box-sizing: border-box;
	}
	.page-header-middle,.unusual-header {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.page-header-middle .header-text {
		width: 472upx;
		padding-left: 32upx;
		border-left: 1upx solid #f1f1f1;

	}
	.header-text .normal-day{
		color: #000;
		height: 96upx;
		line-height: 96upx;
		font-size: 32upx;
	}
	.header-text .unusual-day{
		color: #000;
		height: 96upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.5;
		font-size: 32upx;
	}
	.page-header-middle image {
		height: 35upx;
		width: 148upx;
	}
	.page-wcl {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #869097;
		font-size: 24upx;
	}

	.page-wcl span {
		font-size: 24upx;
		color: #D1352A;
	}

	.mbwa-content{
		font-size: 30upx;
		color: #000;
		height: 96upx;
		width: 424upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.5;
	}
	.text1 {
		color: #808080;
	}
	.typeText-color{
		color: #999999;
	}
	.massage-tab {
		display: flex;
		height: 80upx;

		width: 100%;
		margin-top: 32upx;
		background-color: #fff;
		border-bottom: 1upx solid #f1f1f1;
		position: relative;
	}
	.now-serverpart {
		height: 80upx;
		position: absolute;
		right: 32upx;
		display: flex;
		align-items: center;
	}
	.now-serverpart:before {
		content: '';
		background: url(../../static/images/mbwa/dw.png) no-repeat center;
		background-size: contain;
		height: 28upx;
		width: 26upx;
		margin-right: 8upx;
	}
	.massage-unit {
		width: 120upx;
		text-align: center;
		line-height: 74upx;
		color: #869097;
	}

	.massage-unit.active {
		color: #222;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
	}

	.massage-unit.active:after {
		content: '';
		height: 6upx;
		width: 40upx;
		background: #48a0f9;
		border-radius: 6upx;
		overflow: hidden;
	}
	.unusual-header {
		margin: 32upx 24upx;
		background: #fff;
		box-shadow: 0px 2upx 8upx 1upx #e2e2e2;
		padding: 16upx 24upx;
		display: flex;
		align-items: center;
	}
	.unusual-header .unusual-header-text {
		width: 460upx;
		font-size: 24upx;
	}
	.unusual-header .red-span{
		color: #D13B3B;
	}
	.unusual-header .unusual-header-btn {
		background-color: #64a0e6;
		color: #fff;
		height: 56upx;
		padding: 0 32upx;
		font-size: 24upx;
		line-height: 56upx;
		border-radius: 6upx;
		font-size: 24upx;
	}
	.msg-list {
		background-color: #fff;
		padding: 0 26upx;
	}
	.msg-unit {
		display: flex;
		justify-content: space-between;
		padding: 24upx 0;
		box-sizing: border-box;
	}
	.msg-unit image{
		height: 164upx;
		width: 230upx;
		border-radius: 8upx;
		background: #f9f9f9;
		margin-left: 16upx;
	}
	.msg-unit+.msg-unit {
		border-top: 1upx solid #f1f1f1;
	}

	.uni-media-list-text-top {
		display: flex;
		justify-content: space-between;
	}

	.uni-media-list-text-top>p {
		display: flex;
		align-items: center;
	}

	.massage-date {
		display: flex;
		align-items: center;
		color: #939393;
		font-size: 24upx;

	}
	.massage-date:before {
		content: '';
		margin-right: 8upx;
		background: url(../../static/images/mbwa/xcsj.png) no-repeat center;
		background-size: contain;
		height: 20upx;
		width: 20upx;

	}

	.area-title {

		display: flex;
		align-items: center;
		font-size: 26upx;
		color: #0C8EE9;
	}
	.area-title:before {
		content: '';
		background: url(../../static/images/mbwa/dw.png) no-repeat center;
		background-size: contain;
		height: 28upx;
		width: 26upx;
		margin-right: 8upx;
	}

	.area-name {
		display: flex;
		align-items: center;
		color: #565656;
		font-size: 24upx;

	}
	.area-name:before {
		content: '';
		background: url(../../static/images/mbwa/tsr.png) no-repeat center;
		background-size: contain;
		height: 20upx;
		width: 20upx;
		margin-right: 8upx;
	}

	.uni-media-list-body {
		/* padding-left: 48upx; */
		height: auto;
	}

	.status-tag {
		font-size: 24upx;
		/* background: #fff; */
		color: #999;
		border-radius: 4upx;
		width: 96upx;
		text-align: center;

	}
	.status-tag.shouldDo {

		color: #f17e5f;
	}

	.status-tag.normal {

		color: #72777C;
	}
	.moredate-box {
		padding-top: 40upx;
		padding-bottom: 60upx;
		width: 400upx;
		/* padding: 12upx 24upx; */
		border-radius: 24upx;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		color: #686868;
	}
	.footer-text {
		font-size: 24upx;
		text-align: center;
		padding: 26upx 0;
		color: #999;
	}
</style>
