<template>
	<view class="message-center mg-lr-24">
		<view class="tab-menu u-f u-f-jcsb">
			<view class="tab-list u-f u-f-jcsb">
				<view class="tab-item mg-right-88">
					<view
						@click="handleCheckTab('系统公告')"
						:class="['tab-content u-f u-f-fdc u-f-aic', acitveTab === '系统公告' ? 'active' : '']">
						<text class="name fs30 fw400 mg-bot-10">系统公告</text>
						<!-- <text class="curve"></text> -->
					</view>
					<!-- <view class="new-tip" v-show="acitveTab === '系统公告'"></view> -->
				</view>
				<view class="tab-item">
					<view 
						@click="handleCheckTab('订单信息')"
						:class="['tab-content u-f u-f-fdc u-f-aic', acitveTab === '订单信息' ? 'active' : '']">
						<text class="name fs30 fw400 mg-bot-10">订单信息</text>
						<!-- <text class="curve"></text> -->
					</view>
					<!-- <view class="new-tip" v-show="acitveTab === '订单信息'"></view> -->
				</view>
			</view>
			<view class="clear-wrap u-f u-f-jcfe">
				<text class="clear"></text>
			</view>
		</view>

		<view class="message-notify mg-top-44" v-if="acitveTab === '系统公告'">
			<view class="notify-card" v-for="(item,index) in list" :key = 'index'>
				<view class="title u-f u-f-jcfs u-f-aic mg-bot-20">
					<view class="title-bell mg-right-10"></view>
					<view class="title-content fs32 fw400">{{item.title}}</view>
				</view>
				<view class="content fw400 fs28">
					<!-- <text>{{item.content}}</text> -->
				</view>
				<view class="detail u-f u-f-jcsb mg-top-20">
					<view class="default-detail-check highlight-detail-check fs28 fw400" @click="handleCheckDetail(item.id)">查看详情</view>
					<view class="detail-date fs24 fw400">{{item.createTime}}</view>
				</view>
			</view>
		</view>
		<view class="message-notify mg-top-44" v-else>
			<view class="notify-card" v-for="(item,index) in list" :key = 'index'>
				<view class="title u-f u-f-jcfs u-f-aic mg-bot-20">
					<view class="title-content title-document mg-right-10"></view>
					<view class="title-content fs32 fw400">{{item.title}}</view>
				</view>
				<view class="content fw400 fs28"> 
					<!-- <text>{{item.content}}</text> -->
				</view>
				<view class="detail u-f u-f-jcsb mg-top-20" @click="handleCheckDetail(item.id)">
					<view class="default-detail-check fs28 fw400">查看详情</view>
					<view class="detail-enter"></view>
				</view>
			</view>
			<!-- <view class="noting-message u-f u-f-jcc">
				<image src="../.././static/messsage-center/nothing-message.png"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				acitveTab: '系统公告',
				list:[],
				pageNum:1,
				total:0,
				type:1
			}
		},
		onLoad(option) {
			this.getList()
		},
			
		onPullDownRefresh(){
			this.pageNum = 1,
			this.getList()
		},
		onReachBottom() {
		   console.log(this.total, this.list.length);
		   if (this.total > this.list.length) {
		    this.pageNum = this.pageNum + 1
		    this.getList(true)
		   } else {
		    wx.showToast({
		     title: '没有更多啦！',
		     icon: 'none'
		    })
		   }
		  },
		methods: {
			handleCheckTab(name) {
				this.acitveTab = name
				if(name == '系统公告'){
					this.type = 1
				}else{
					this.type = 2
				}
				this.pageNum = 1,
				this.getList()
				
			},
			handleCheckDetail(id) {
				uni.navigateTo({
					url: '/pages/notice-center/notice-center?detailsId='+ id
				})
			},
			getList(flag) {
				this.$http.post("/api/client/notice/list", {
					pageNum:this.pageNum,
			        pageSize:'20',
					type:this.type
					}).then(res => {
					  console.log(res.data.data.rows)
					  this.list = !flag ? res.data.data.rows : this.data.data.list.concat(res.data.data.rows)
					  this.total = res.data.data.total
					  
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.message-center {
		.tab-menu {
			.tab-list {
				.tab-item {
					position: relative;
					.tab-content {
						.name {
							color: #999999;
							line-height: 38rpx;
						}
						
						.curve {
							width: 32rpx;
							height: 8rpx;
						}
						
						&.active {
							.name {
								color: #333333;
							}
						
							.curve {
								// background: url(../.././static/messsage-center/curve.png) no-repeat center center;
								background-size: 100%;
							}
						}

					}
					.new-tip {
						position: absolute;
						top: 0rpx;
						right: -10rpx;
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background-color: #FF4502;
					}	
						
				}
			}

			.clear-wrap {
				.clear {
					width: 38rpx;
					height: 38rpx;
					// background: url(../.././static/messsage-center/clear.png) no-repeat center center;
					background-size: 100%;
				}
			}
		}

		.message-notify {
			.notify-card {
				padding: 20rpx;
				border-radius: 14rpx;
				background-color: #ffffff;

				.title {
					.title-bell {
						width: 74rpx;
						height: 74rpx;
						// background: url(../.././static/messsage-center/bell.png) no-repeat center center;
						background-size: 100%;
					}
					
					.title-document {
						width: 74rpx;
						height: 74rpx;
						// background: url(../.././static/messsage-center/document.png) no-repeat center center;
						background-size: 100%;
					}

					.title-content {
						color: #333333;
					}
				}

				.content {
					color: #999999;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #E3E3E3;
				}

				.detail {
					.default-detail-check {
						color: #999999;
						line-height: 38rpx;
					}
					
					.highlight-detail-check {
						color: #FF4502;
					}

					.detail-date {
						color: #999999;
						line-height: 38rpx;
					}
					
					.detail-enter {
						width: 32rpx;
						height: 32rpx;
						// background: url(../.././static/right-arrow.png) no-repeat center center;
						background-size: 30%;
					}
				}
			}
			
			.noting-message {
				padding-top: 74rpx;
				image {
					width: 376rpx;
					height: 376rpx;
				}
			}
		}
	}
</style>