<template>
	<view>
		<u-toast ref="toast"></u-toast>
		<view class="news-page-btn">
			<view class="btn-index" @click="selectFn">多选</view>
			<view class="btn-index"  @click="isAllClear()">清空</view>
			<view class="btn-index" @click="allRead()">一键已读</view>
		</view>
		<view class="news-page-list">
			<view class="list-index" v-for="item in items" :key="item.id" @click="returnRouter(item)">
				<view style="margin-top: 16upx;margin-right: 20upx;">
					<radio v-show="flag" @click="changeChecked(item)" :checked="item.checked"/>
				</view>
				<view class="list-index-img">
					<u-badge :isDot="!item.isRead" type="error" :absolute="true" :offset="[0,-2]"></u-badge>
					<image style="width:80upx;height:80upx" src="../../static/images/woman.png" mode=""></image>
				</view>
				<view class="list-index-cen">
					<view class="cen-name">
						{{item.sendName}}
						<view class="list-index-time">{{item.msgTime.split(' ')[0]}}</view>
					</view>
					<view class="cen-text">
						{{item.content}}
					</view>
					
				</view>
				
			</view>
			<u-modal :show="modalShow" @confirm="confirm" @cancel="cancel" :showCancelButton="true" confirmText="删除" ref="uModal" :content='content'></u-modal>
			<view class="information_bottom" v-show="flag">
				<view class="del" @click="delfirm()">删除</view>
				<view class="qux" @click="flag = false">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import apiMessage from '@/api/system/message.js';
	export default {
		props:{
			items:{
				type:Array,
			}
		},
		data() {
			return {
				isAll:0,//0所有 1选择
				content:'确认删所选信息吗？',
				modalShow:false,
				flag: false, //控制勾选按钮的显示
			}
		},
		methods: {
			returnRouter(item) {
				if (item.refType == 2) {
					uni.navigateTo({
						url: '/pages/resource/articeDetail?id=' + item.refId
					});
				    } else if (item.refType == 4) {
						uni.navigateTo({
							url: '/pages/resource/qaDetail?id=' + item.refId
						});
				} else {
				    if (item.conType == '10') {
						uni.navigateTo({
							url: '/pages/resource/microDetail?id='  + item.refId 
						});
				    } else if (item.conType == '20') {
						uni.navigateTo({
							url: '/pages/resource/courseDetail?id=' +item.refId
						});
				    }
				}
			},
			cancel() {
				this.modalShow = false;
			},
			delfirm() {
				this.isAll = 1;
				this.modalShow = true;
			},
			confirm() {
				if(this.isAll == 0) {
					this.allClear();
				}  else{
					this.delList();
				}
				
			},
			//改变checked的值
			changeChecked(val){
				val.checked=!val.checked
			},
			//控制勾选等操作是否显示
			selectFn() {
				if(this.items.length!=0&&!this.flag){
					this.flag = true;
				}
			},
			delList() {
				let ids=[];
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].checked) {
						ids.push(this.items[i].id);
					}
				}
				if(ids.length==0){
					return this.$refs.toast.show({ message: '请先进行勾选', type: 'error' });
				}
				apiMessage.del(ids).then(res => {
					if (res.status == 200) {
						this.$refs.toast.show({ message: '删除成功', type: 'success' });
						// this.queryMessage(true);
						this.flag = false;
						this.modalShow = false;
						this.$emit('loadMessage');
					} else {
						this.$refs.toast.show({ message: '删除失败', type: 'error' });
					}
				});
			},
			isAllClear() {
				this.isAll = 0;
				this.modalShow = true;
				this.content='确认删所有信息吗？'
			},
			allClear() {
				apiMessage.cleanAll().then(res=>{
					if(res.status == 200) {
						this.$emit('loadMessage');
					}
				})
			},
			allRead(){
				let ids = this.items.map(item=>{
					if(!item.isRead) {
						return item.id;
					}
				})
				apiMessage.readAll().then(res=>{
					if(res.status == 200) {
						this.$emit('loadMessage');
					}
				})
				console.log(ids,'ids')
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-modal{
		border-radius: 28upx;
	}
	/deep/ .u-modal__content{
		text-align: center;
		font-size: 36upx;
		font-weight: 600;
		color: #333333;
	}
	/deep/ .uni-radio-input{
		width: 18px !important;
		height: 18px !important;
		background-color: #fff !important;
		border: 4upx solid #8A91A4 !important;
	}
	/deep/ .uni-radio-input-checked{
		border: 4upx solid #007DFF !important;
	}
	/deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before {
	    // font: normal normal normal 28px/1 uni;
	    content: "·";
	    color: #007DFF;
	    font-size: 100px;
	    position: absolute;
	    top: -30%;
	    left: 50%;
	    transform: translate(-50%,-48%) scale(.73);
	    -webkit-transform: translate(-50%,-48%) scale(.73);
	}
	.news-page-btn{
			height: 80upx;
			padding: 30upx 32upx 0 36upx;
			.btn-index{
				font-size: 28upx;
				color: #666666;
				float: right;
				margin-left: 20upx;
				padding: 6upx 32upx 6upx 28upx;
				border: 2upx solid rgba(153,153,153,0.2);
				border-radius: 26upx;
			}
			.btn-index:first-child{
				margin-left: 0;
				float: left;
			}
		}
		.news-page-list{
			padding: 0 32upx 0 36upx;
			box-sizing: border-box;
			.list-index{
				display: flex;
				padding: 40upx 0;
				border-bottom: 2upx solid rgba(153,153,153,0.1);;
				.list-index-img{
					width: 80upx;
					position: relative;
				}
				.list-index-cen{
					margin-left: 30upx;
					width: 100%;
					.cen-name{
						font-size: 28upx;
						font-weight: 500;
						color: #333333;
						margin-top: 4upx;
					}
					.cen-text{
						font-size: 24upx;
						color: #999999;
						margin-top: 4upx;
						word-break:break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical; 
						display: -webkit-box;-webkit-line-clamp: 1;
					}
				}
				.list-index-time{
					float: right;
					margin-top: 4upx;
					// width: 300upx;
					font-size: 24upx;
					color: #999999;
				}
			}
			
		}
		.information_bottom {
			width: 100%;
			// height: 120upx;
			background: #ffffff;
			position: fixed;
			left: 0;
			bottom: 50px;
			box-shadow: 0px -1px 6px 0px rgba(83,83,83,0.18);
			// display: flex;
		
			.qux {
				// width: 316upx;
				height: 76upx;
				// border: 1px solid #dcdcdc;
				// margin-left: 42upx;
				// margin-top: 25upx;
				// border-radius: 40upx;
				font-size: 28upx;
				color: #999999;
				text-align: center;
				line-height: 76upx;
				
			}
		
			.del {
				// width: 316upx;
				height: 76upx;
				// background: #6194fe;
				// margin-left: 42upx;
				// margin-top: 25upx;
				// border-radius: 40upx;
				font-size: 28upx;
				color: #F75B53;
				text-align: center;
				line-height: 76upx;
				border-bottom: 1upx solid #eee;
			}
		}
</style>
