<template>
	<div id="myapp" class="bodyA">
		<!-- 滚动区域 -->
		<div class="searchMode">
			<van-search v-model="searchVal" :clearable="false" placeholder="请输入搜索关键词" @input="searchA" />
		</div>
		<div class="content">

			<van-pull-refresh v-model="refreshFlag" success-text="刷新成功" @refresh="refreshFn">
				<van-list v-model:loading="listLoadingFlag" :finished="finishFlag"
					:finished-text="listData.length==0?'':'没有更多了'" @load="onLoads">

					<div class="list" v-for="item in listData" @click="seeDetail(item)">
						<img :src="dicObj.listImg[item.moduleId]" alt="">
						<div class="listCont">
							<div class="listInfo1">
								{{dicObj.modelType[item.moduleId]}}
								<div class="date">{{item.gmtCreated}}</div>
							</div>
							<div class="listInfo2">
								您有新消息请注意查收。
								<div class="status" v-if="item.idRead=='Y'">已读</div>
								<div class="drop" v-else></div>
							</div>
						</div>
					</div>

				</van-list>
				<van-empty :description="descriptionVal" v-if='listData.length == 0' />
			</van-pull-refresh>
		</div>
		<!-- 底部 -->
		<!-- <div class="footer indexFooter">
			<van-button class="footerBtn">按钮</van-button>
			<div class="footerTab" :class="switchCurrent==index?'footerAct':''" v-for="(item,index) in switchTab"
				:key="index" @click="toSwitch(index)">
				<van-icon class="icon" :name="item.icon" />
				<div class="tabName">{{item.title}}</div>
			</div>
		</div> -->

		<div class="popMode" v-if="popFlag">
			<div class="popCont">
				<div class="title">{{dicObj.modelType[popData.moduleId]}}</div>
				<div class="contBox">
					{{popData.messageInfo}}
					<div class="info">
						<p>发送人：{{popData.senderName}}</p>
						<p>发送部门：{{popData.senderDepartment}}</p>
						<p>发送时间：{{parseTime(popData.createTime,'{y}-{m}-{d} {h}:{i}:{s}')}}</p>
					</div>
				</div>
				<div class="footerBtn popfotter" @click="popFlagClose">知道了</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		messageReaded,
		messageList
	} from '@/common/api.js'
	import {
		callbackRequest,
		formatDate
	} from '@/common/util.js'
	import {
		parseTime
	} from '@/common/common.js'
	export default {
		data() {
			return {
				loadingFlag: '',
				loadingFlag_Tm: 'n',

				descriptionVal: '暂无数据', // 无数据&异常文本
				refreshFlag: false, // 下拉刷新标识
				noDataFlag: '',
				timer: null,
				pageNum: 1,
				finishFlag: true,
				listLoadingFlag: false,
				// code
				listData: [
					// {
					//     title: '就医助手',  // 模块名称 可以不传 可以根据类型判断
					//     date: '2020-12-12',  // 时间
					//     msg: '您有新消息请注意查收。',  // 消息 可以不传 可以根据类型判断
					//     status: 1,  // 数据读取状态 1已读 2未读
					//     modelType: 1,  // 数据类型 1餐券 2访客 3就医 4理发 5外卖
					// },
					// { title: '就医助手1', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 2, },
					// { title: '就医助手2r', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 1, modelType: 3 },
					// { title: '就医助手3', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 4 },
					// { title: '就医助手4', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 1 },
					// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 1 },
					// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 1, modelType: 2 },
					// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 3 },
					// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 1, modelType: 4 },
					// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 2 },
					// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 2, modelType: 3 },
					// { title: '就医助手', date: '2020-12-12', msg: '您有新消息请注意查收。', status: 1, modelType: 4 },
				],
				dicObj: {
					modelType: {
						1: '临时餐券', // 临时餐券
						2: '就医检查', // 就医检查
						3: '就医手术', // 就医手术
						4: '就医住院', // 就医住院
						5: '就医挂号', // 就医挂号
						6: '理发', // 理发
						7: '员工卡申请', // 员工卡申请
						8: '访客预约', // 访客预约
						9: '临时停车', // 临时停车
						10: '施工申请', // 施工申请
						// 11: '故障报修',   // 故障报修- 重复 同18
						12: '固定券领取', // 固定券领取
						13: '快捷券发放', // 快捷券发放
						14: '外卖', // 外卖
						15: '体检', // 体检
						16: '个人中心', // 个人中心
						17: '故障报修', // 故障报修
						18: '咖啡服务', // 咖啡服务
						19: '公务用车', // 公务用车
						20: '口腔挂号', // 口腔挂号
						21: '便捷服务', // 便捷服务
						22: '防疫申领', // 防疫申领
						23: '证件申领',
						24: '办公用品申领',
						25: '洗车申请',
					},

					listImg: {
						1: '../../static/model/routeIcon_cq.png', // 临时餐券
						2: '../../static/model/routeIcon_jy.png', // 就医检查
						3: '../../static/model/routeIcon_jy.png', // 就医手术
						4: '../../static/model/routeIcon_jy.png', // 就医住院
						5: '../../static/model/routeIcon_jy.png', // 就医挂号
						6: '../../static/model/routeIcon_lf.png', // 理发
						7: '../../static/model/routeIcon_ygk.png', // 员工卡申请
						8: '../../static/model/routeIcon_fk.png', // 访客预约
						9: '../../static/common/close2.png', // 临时停车
						10: '../../static/model/routeIcon_sg.png', // 施工申请
						// 11: '../../static/common/close2.png',   // 故障报修
						12: '../../static/model/routeIcon_cq.png', // 固定券领取
						13: '../../static/model/routeIcon_cq.png', // 快捷券发放
						14: '../../static/model/routeIcon_wm.png', // 外卖
						15: '../../static/model/routeIcon_jc.png', // 体检
						16: '../../static/model/routeIcon_grzx.png', // 个人中心
						17: '../../static/model/routeIcon_gz.png', // 故障报修
						18: '../../static/model/routeIcon_kf.png', // 咖啡服务
						19: '../../static/model/routeIcon_yc.png', // 公务用车
						20: '../../static/model/routeIcon_kq.png', // 口腔挂号
						21: '../../static/model/routeIcon_fw.png', // 便捷服务
						22: '../../static/index/area3_fysl.png', // 防疫申领
					},
				},
				searchVal: '',
				switchTab: [{
						title: '首页',
						icon: 'wap-home'
					},
					{
						title: '消息',
						icon: 'chat'
					},
					{
						title: '我的',
						icon: 'manager'
					},
				],
				switchCurrent: 1,

				// activeName: [],
				popFlag: false,
				popData: {},
			};
		},
		mounted() {
			this.getData();
		},
		methods: {
			searchA(e) {
				this.debounce(() => {
					this.listData = [];
					this.pageNum = 1;
					this.getData(e);
				}, 500)
			},
			popFlagClose() {
				this.loadingFlag_Tm = '';
				this.listData = [];
				this.pageNum = 1;
				this.getData();
				this.popFlag = false;
			},
			seeDetail(obj) {
				const _this = this;
				let params = {
					method: messageReaded,
					id: obj.id
				}
				callbackRequest(params).then(res => {
					if (res.returnCode == 1) {
						_this.popFlag = true;
						_this.popData = obj
					} else {
						uni.showToast({
							title: res.returnMsg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// switch跳转
			toSwitch(i) {
				console.log(i);
				let url;
				switch (i) {
					case 0:
						url = './indexIndex.html';
						break;
					case 1:
						url = './indexTab_message.html';
						break;
					case 2:
						url = './indexTab_mine.html';
						break;
				}
				window.location.href = url;
			},
			// 下拉刷新
			refreshFn() {
				setTimeout(() => {
					this.listData = [];
					this.pageNum = 1;
					this.getData();
				}, 1000);
			},
			// 列表加载更多
			onLoads() {
				this.pageNum = this.pageNum + 1;
				this.getData();
			},
			getData(titleA) {
				const that = this;
				let params = {
					method: messageList,
					messageInfo: titleA || '',
					pageNo: this.pageNum,
					pageSize: 10,
				}
				callbackRequest(params).then(res => {
					let msg;
					if (res.returnCode == 1) {
						let resData = res.returnData.list;
						let arr;
						arr = that.listData.concat(resData)
						that.listData = arr;
						that.finishFlag = resData.length < 10;
						that.listLoadingFlag = false;
						that.refreshFlag = false;
						msg = '未查询到数据'
					} else {
						msg = '数据异常'
					}
					that.loadingFlag = 'n'
					that.loadingFlag_Tm = 'n';
					that.descriptionVal = msg;
				})
			},
			back() {},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		font-size: .38*74upx;
		color: #0e1a24;
		padding: .3243*74upx;
		padding-bottom: 1.6216*74upx;
		width: unset;
	}

	.content .list {
		padding: .36*74upx .3243*74upx;
		background-color: #fff;
		border-radius: .3*74upx;
		margin-bottom: .32*74upx;
		display: flex;
		align-items: center;
	}

	/* .van-collapse-item {
	        margin-bottom: .32*74upx;
	        border-radius: .3*74upx;
	        overflow: hidden;
	    } */

	.content .list img {
		width: 1.2432*74upx;
		height: 1.2432*74upx;
		margin-right: .32*74upx;
	}

	.content .list .listCont {
		flex-grow: 1;
	}

	.content .list .listInfo1,
	.content .list .listInfo2 {
		display: flex;
		align-items: center;
	}

	.content .list .listInfo1 {
		margin-bottom: .2*74upx;
		font-size: .43*74upx;
		color: #0e1a24;
		font-weight: bold;
	}

	.content .list .listInfo2 {
		color: #97A5B1;
	}

	.content .list .listInfo1 .date,
	.content .list .listInfo2 .status {
		margin-left: auto;
		font-size: .32*74upx;
		font-weight: normal;
		color: #97A5B1;
	}

	.content .list .listInfo2 .drop {
		width: .22*74upx;
		height: .22*74upx;
		border-radius: 50%;
		background-color: #fb8107;
		margin-left: auto;
	}

	.popMode {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		display: flex;
		align-items: center;
	}

	.popMode .popCont {
		background-color: #fff;
		width: 100%;
		margin: 1.0811*74upx .5405*74upx;
		height: 7.027*74upx;
		border-radius: .3*74upx;
		padding: .3243*74upx;
		display: flex;
		flex-direction: column;
	}

	.popMode .popCont .title {
		font-size: .4054*74upx;
		color: #0e1a24;
		text-align: center;
		height: .8649*74upx;
		line-height: .8649*74upx;
		flex-grow: 1;
		font-weight: bold;
		background-image: linear-gradient(to right, #eafdf9, #daf1fc);
		border-radius: .2*74upx;
	}

	.popMode .popCont .contBox {
		height: 100%;
		overflow-y: scroll;
		padding: .3243*74upx 0;
		font-size: .3784*74upx;
		color: #0e1a24;
		position: relative;
		line-height: .6486*74upx;
	}

	.popMode .popCont .contBox .info {
		text-align: right;
		position: absolute;
		right: 0;
		bottom: .3243*74upx;
		color: #97A5B1;
		line-height: normal;
	}

	.popMode .popCont .contBox .info p {
		margin-top: .1081*74upx;
	}

	.popMode .popCont .popfotter {
		background-color: aquamarine;
		height: .8649*74upx;
		line-height: .8649*74upx;
		font-size: .3784*74upx;
	}

	.van-cell--clickable {
		display: flex;
		align-items: center;
	}
</style>