<template>
	<Layout :index="-1" :banner="0"  :img="'/static/img/about.jpg'" :titles="'个人中心'" :title_content="'个人中心'">
		<view class="bg ptm-80">
			<view class="content">
				<view class="content_left">
					<memberleft :index="'5'"></memberleft>
				</view>
				<view class="content_right">
					<view class="mtitle">
						<image src="../static/img/member/tz.png" class="mimg"></image>
						平台通知
					</view>
					<view class="lines"></view>
					
					<view class="content_r">
						<view class="d-b-c">
							<view class="sx" >
								<view class="sx_list" :class="state=='all'?'active':''" @tap="StackingContext('all')">
									全部
								</view>
								<view class="sx_list" :class="state=='unread'?'active':''" @tap="StackingContext('unread')">
									未读通知
								</view>
							</view>
							<view class="search-box" @tap="readall()">
								全部已读
							</view>
						</view>
						<!-- listData 列表渲染 -->
						<view class="notice_content">
							<view
								class="notice_list"
								v-for="item in listData"
								:key="item.notice_id"
								@tap="goEdit(item.notice_id)"
							>
								<view class="notice_list_left">
									<image
										:src="item.read_status == 1 ? '../static/img/member/wd.png' : '../static/img/member/yd.png'"
										class="nimg"
									></image>
									<view class="notice_title">
										{{ item.title }}
									</view>
									<view class="notice_desc">
										{{ item.content }}
									</view>
								</view>
								<view class="notice_time">
									{{ item.create_time ? item.create_time.split(' ')[0] : '' }}
								</view>
	
							</view>
						</view>
							
							
							
						<el-pagination v-if="total>15" background layout="prev, pager, next" :total="total" :current-page="page" :page-size="list_rows" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>	
							
					</view>
					
				</view>
			</view>
			
		</view>
	</Layout>
</template>

<script>
	import Layout from './part/layouts.vue';
	import memberleft from './part/member_left.vue';
	export default {
		components:{
			Layout,
			memberleft
		},
		data(){
			return {
				page: 1,
				list_rows: 15,
				listData: [],
				total: 0,
				name:'',
				state:'all',//unread未读
			}
		},
		created() {
			const width = window.innerWidth;
			const height = window.innerHeight;
			const mobileWidth = 768; // 可以根据需要调整这个值
			const isMobile = width <= mobileWidth || height <= mobileWidth;
			if(isMobile){
				this.list_rows = 30;
			}
			let obj = this.$Route.query;
			if(obj.hasOwnProperty('index')){
				this.category_id = Number(obj.index);
			}
			
		},
		onShow() {
			this.getData();
		},
		
		methods:{
			StackingContext(e){
				this.state = e;
				this.page = 1;
				this.getData();
			},
			 downloadPDF(e) {
				 if(!e){
				 	 this.$message.error('评估报告生成中~');
				 }else{
					window.open(e, '_blank'); 
				 }
				// 下载
				// const pdfUrl = e; 
				// const a = document.createElement('a');
				// a.href = pdfUrl;
				// a.download = '评估报告.pdf'; 
				// a.click();
				// document.body.removeChild(a); 
			 },
			goEdit(e){
				this.$router.push({
					path: 'notice_details',
					query: {
						id: e
					}
				})
			},
			/*每页多少条*/
			handleSizeChange(val){
				this.list_rows = val;
				this.getData();
			},
			/*选择第几页*/
			handleCurrentChange(val){
				this.page = val;
				this.getData();
			},
			getData(){
				this._get('notice.Notice/index',{
					page: this.page,
					limit: this.list_rows,
					state: this.state,
				},res=>{
					this.listData = res.data.data;
					this.total = res.data.total;
				}
				,err=>{
					uni.showToast({
						icon:'none',
						title: err.data.msg
					})
					return;
					// this.$message(err.data.msg);
				}
				);
			},
			readall(){
				this._post('/notice.Notice/readAll',{
				},res=>{
					uni.showToast({
						icon:'none',
						title: '操作成功'
					})
					this.getData();
				}
				,err=>{
					uni.showToast({
						icon:'none',
						title: err.data.msg
					})
					return;
					// this.$message(err.data.msg);
				}
				);
				
			}
		}
	}
</script>

<style lang="scss">
	.bg{
		width: 100%;
		background: #F1F1F1;
		min-height: 800px;
	}
	.content{
		width: 1290px;
		margin: 0 auto;
		padding-top: 14px;
		display: flex;
		justify-content: space-between;
	}
	.content_left{
		width: 245px;
		min-height: 789px;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px rgba(78,89,105,0.06);
		border-radius: 0px 0px 0px 0px;
	}
	.content_right{
		width: 1024px;
		min-height: 789px;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px rgba(78,89,105,0.06);
		border-radius: 0px 0px 0px 0px;
	}
	.mtitle{
		font-weight: 500;
		font-size: 16px;
		color: #3D3D3D;
		width: 985px;
		margin:0 auto;
		height: 48px;
		line-height: 48px;
		display: flex;
		    align-items: center;
	}
	.lines{
		width: 985px;
		height: 0px;
		border: 1px solid #D8D8D8;
		opacity: 0.6;
		margin:0 auto;
	}
	.mimg{
		width: 20px;
		height: 20px;
		margin-right: 10px;
		margin-left: 23px;
	}
	.content_r{
		padding: 34px 22px;
	}
	.addimg{
		width: 12px;
		height: 12px;
		margin-left: 5px;
	}
	.addimgs{
		width: 16px;
		height: 16px;
		margin-left: 8px;
	}
	.sx{
		display: flex;
	}
	.sx .sx_list{
		background: #EDEEF0;
		border-radius: 16px 16px 16px 16px;
		padding: 5px 20px;
		margin-right: 24px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #1D2129;
		text-align: center;
		cursor: pointer;
	}
	.sx .active{
		background: #F78A30 !important;
		color: #ffffff;
	}
	.search-box{
		width: 96px;
		height: 32px;
		border-radius: 16px 16px 16px 16px;
		border: 1px solid #F05B0E;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #F05B0E;
		line-height: 32px;
		text-align: center;
		font-style: normal;
		text-transform: none;
		cursor: pointer;
	}
	.search-name{
		width: 232px;
		height: 32px;
		background: #F7F8FA;
		padding: 0 12px;
		font-size: 14px;
		color: #333333;
		line-height: 32px;
	}
	.search-names{
		font-weight: 400;
		font-size: 14px;
		color: #86909C;
	}
	.notice_content{
		margin-top: 30px;
	}
	::v-deep .el-table__header th {
	  background-color: #F2F3F5;
		 font-weight: 400;
		 font-size: 14px;
		 color: #1D2129;
		 text-align: center;
	}
	.green{
		font-weight: 400;
		font-size: 12px;
		color: #20BC30;
	}
	.red{
		font-weight: 400;
		font-size: 12px;
		color: #EA3B3B;
	}
	.center-table .el-table__header th,
	.center-table .el-table__body td {
	 color: #EA3B3B !important;
	}
	.asset_e{
		font-weight: 400;
		font-size: 12px;
		color: #F6773C;
	}
	.asset_l{
		font-weight: 400;
		font-size: 12px;
		color: #165DFF;
	}
	::v-deep .el-table__fixed-right::before, .el-table__fixed::before{
		background-color:#ffffff !important;
	}
	
	
	.notice_list{
		display: flex;
		justify-content: space-between;
		margin-bottom: 12px;
		cursor: pointer;
	}
	.notice_list .notice_list_left{
		width: 100%;
		display: flex;
		align-items: center;
	}
	.notice_list .nimg{
		width: 18px;
		height: 18px;
		margin-right: 10px;
	}
	.notice_title{
		font-weight: 500;
		color: #3D3D3D;
		margin-right: 8px;
		font-size: 14px;
	}
	.notice_desc{
		width: 660px;
		height: 22px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #767676;
		line-height: 22px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		//一行显示多的用省略号
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.notice_time{
		width: 105px;
		height: 22px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #767676;
		line-height: 22px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	@media screen and (max-width: 768px) {
	
	}
</style>
