<template>
	<view class="con_middle">
		<view class="con_middle_my myCon">
			<!-- 头部信息 -->
			<view class="myCon_top">
				<view class="myCon_top_title" @click="navTo('main')">个人中心</view>
				<image mode="heightFix" v-if="subTitle" src="@/static/images/right.png"></image>
				<view class="myCon_top_name" v-if="subTitle">{{subTitle}}</view>
			</view>
			<!-- 头部信息 -->

			<!-- 通知列表 -->
			<view class="myCon_notice">
				<view class="myCon_notice_middle" v-if="messageList.length>0">
					<view class="myCon_notice_middle_item" v-for="(item,index) in messageList" :key="index" @click="openDetail(item)">
						<view class="myCon_notice_middle_item_left">
							<image mode="heightFix" v-if="item.businessStatus == '3'||item.businessStatus == '4'" src="@/static/images/notice_person.png"></image>
							<image mode="heightFix" v-else src="@/static/images/message_case_icon.png"></image>
							<view class="myCon_notice_middle_item_left_text">{{item.messageContent}}</view>
							<view class="myCon_notice_middle_item_left_status" :class="getClass(item.businessStatus)">{{getDictValue(statusArr,item.businessStatus).text}}</view>
						</view>
						<image mode="heightFix" src="@/static/images/right.png"></image>
					</view>
				</view>
				<!-- <view class="myCon_notice_middle myCon_notice_empty" v-else>没有任何消息哦</view> -->
			</view>
			<!-- 通知列表 -->
		</view>
	</view>
</template>

<script>
	import {
		getMessageList,
	} from '@/api/my/my.js'
	export default {
		props:{
			dataSource:{
				type: Array,
				default: []
			},
			status:{
				type: Array,
				default: []
			},
		},
		data() {
			return {
				subTitle: '所有通知',
				messageList:[],
				// statusArr: [{key: '0',text: '已美化'},{key: '1',text: '未通过'},{key: '2',text: '审核中'},{key: '3',text: '审核通过'}],
				statusArr: []
			};
		},
		methods:{
			getClass(type) {
				//0审核通过 1审核未通过 2已美化 3完成绑定 4解除绑定
				if (type == 0) {
					return 'green'
				} else if (type == 1) {
					return 'red'
				} else if (type == 2) {
					return 'blueText'
				}
			},
			getDictValue(data,value){
				let str = data.filter(item => item.key == value)[0]
				return str
			},
			navTo(type){
				this.$emit('navTo',type)
			},
			// 跳转课件详情
			openDetail(info){
				this.$emit('openDetail',info)
			}
		},
		watch: {
		    dataSource: {
		      handler(newVal, oldVal) {
				this.messageList = this.dataSource
				this.statusArr = this.status
			  },
		      immediate: true,
		      deep: true
		    },
			status: {
			  handler(newVal, oldVal) {
				this.statusArr = this.status
			  },
			  immediate: true,
			  deep: true
			},
		},
	}
</script>

<style lang="scss" scoped>
.con{
	position: relative;
	background-color: #F2F3F5;
	width: 100%;
	&_middle{
		background-color: #fff;
		width: 100%;
		height: calc(100vh - 35.42rpx);
		overflow: auto;
		.myCon{
			width: 74%;
			margin-left: 13%;
			padding-top: 11.46rpx;
			padding-bottom: 21.88rpx;
			&_top{
				display: flex;
				align-items: center;
				&_title{
					color: #86909C;
					font-size: 12.5rpx;
					font-weight: 500;
					line-height: 16.67rpx; /* 133.333% */
					cursor: pointer;
				}
				uni-image{
					width: 7.29rpx;
					height: 7.29rpx;
				}
				&_name{
					color: #1D2129;
					font-size: 12.5rpx;
					font-weight: 500;
					line-height: 16.67rpx; /* 133.333% */
				}
			}
			&_notice{
				padding: 0 8.33rpx;
				margin-top: 8.33rpx;
				&_middle{
					&_item{
						padding: 5.21rpx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;
						cursor: pointer;
						&_left{
							display: flex;
							align-items: center;
							uni-image{
								width: 7.29rpx;
								height: 7.29rpx;
							}
							&_text{
								margin-right: 2.08rpx;
								margin-left: 2.08rpx;
								color: #4E5969;
								font-size: 7.29rpx;
								font-weight: 400;
								line-height: 11.46rpx; /* 157.143% */
							}
							&_status{
								font-size: 7.29rpx;
								font-weight: 400;
								line-height: 11.46rpx; /* 157.143% */
							}
						}
						uni-image{
							width: 7.29rpx;
							height: 7.29rpx;
						}
					}
				}
				&_empty{
					height: 40rpx;
					line-height: 40rpx;
					background-color: #F2F3F5;
					border-radius: 2.08rpx;
					text-align: center;
					border-radius: 2.08rpx;

					color: #4E5969;
					font-size: 7.29rpx;
					font-weight: 400;
				}
			}
			&_nav{
				margin-top: 8.33rpx;
				padding: 6.25rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				cursor: pointer;
				&_left{
					display: flex;
					align-items: center;
					width: calc(100% - 8rpx);
					uni-image{
						width: 16.67rpx;
						height: 16.67rpx;
					}
					&_text{
						margin-left: 2.08rpx;
						color: #1D2129;
						font-size: 7.81rpx;
						font-weight: 500;
						line-height: 12.5rpx; /* 24px */
					}
				}
				&_right{
					width: 7.29rpx;
					height: 7.29rpx;

					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					uni-image{
						width: 7.29rpx;
						height: 7.29rpx;
					}
				}
			}
		}
	}
}
.orange{
	color: #FF7D00!important;
}
.gray{
	color: #86909C!important;
}
.red{
	color: #F53F3F!important;
}
.green{
	color: #00B42A!important;
}
.blueText{
	color: #165DFF!important;
}
</style>
