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

			<!-- 个人信息 -->
			<view class="myCon_intro">
				<view class="myCon_intro_left">
					<image mode="heightFix" v-if="avatar" :src="avatar"></image>
					<view class="myCon_intro_left_avatar" v-else>{{name ? name.substring(0,1): ''}}</view>
					<!-- <view class="myCon_intro_left_photo">
						<image mode="heightFix" src="@/static/images/camera.png"></image>
					</view> -->
				</view>
				<view class="myCon_intro_right">
					<view class="myCon_intro_right_name">{{name}}</view>
					<view class="myCon_intro_right_dept">{{loginIdentity?getLoginIdentity(loginIdentity):''}}</view>
				</view>
			</view>
			<!-- 个人信息 -->

			<!-- 通知信息 -->
			<view class="myCon_notice">
				<view class="myCon_notice_top">
					<view class="myCon_notice_top_title">通知</view>
					<view class="myCon_notice_top_right" @click="navTo('notice')">
						<view class="myCon_notice_top_right_text">全部</view>
						<image mode="heightFix" src="@/static/images/right.png"></image>
					</view>
				</view>
				<view class="myCon_notice_middle" v-if="messageList.length>0" @click="navTo('notice')">
					<view class="myCon_notice_middle_item" v-for="(item,index) in messageList.slice(0,4)" :key="index">
						<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)}}</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 class="myCon_nav myCon_volunteer" @click="navTo('volunteer')">
				<view class="myCon_nav_left">
					<image mode="heightFix" src="@/static/images/volunteer.png"></image>
					<view class="myCon_nav_left_text">{{loginIdentity == 0 ?'志愿者管理' : '医生管理'}}</view>
				</view>
				<view class="myCon_nav_right">
					<image mode="heightFix" src="@/static/images/right.png"></image>
				</view>
			</view>
			<!-- 志愿者、医生管理 -->

			<!-- 意见反馈 -->
			<view class="myCon_nav myCon_advice" @click="navTo('advice')">
				<view class="myCon_nav_left">
					<image mode="heightFix" src="@/static/images/faceback.png"></image>
					<view class="myCon_nav_left_text">意见反馈</view>
				</view>
				<view class="myCon_nav_right">
					<image mode="heightFix" src="@/static/images/right.png"></image>
				</view>
			</view>
			<!-- 意见反馈 -->
		</view>
	</view>
</template>

<script>
	import {
		getMessageList,
	} from '@/api/my/my.js'
	import {uploadFile} from '@/api/case/case.js'
	export default {
		props:{
			dataSource:{
				type: Array,
				default: []
			},
			status:{
				type: Array,
				default: []
			},
		},

		data() {
			return {
				subTitle: '',
				info:{},
				statusArr: [],
				messageList: [],
				name: this.$store.state.user.nickName||'',
				loginIdentity: this.$store.state.user.loginIdentity||'',
			};
		},
		methods:{
			changeAvatar(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						let params = {
							filePath: res.tempFiles[0].path //res.tempFilePaths tempFiles
						}
						uploadFile(params).then(res => {
							if(res.code == 200){
								console.log('img==',res)
							}
						})
					}
				});
			},
			getDictValue(data,value){
				let temp = data.filter(item => item.key == value)[0]
				return  temp ? temp.text : '未知'
			},
			getClass(type) {
				//0审核通过 1审核未通过 2已美化 3完成绑定 4解除绑定 5 已点评
				if (type == 0) {
					return 'green'
				} else if (type == 1) {
					return 'red'
				} else if (type == 2) {
					return 'blueText'
				}
			},
			getLoginIdentity(type){
				//0医生 1志愿者 2专家
				if(type === '0'){
					return '医生'
				}else if(type === '1'){
					return '志愿者'
				}else if(type === '2'){
					return '专家'
				}else{
					return '未知'
				}
			},
			navTo(type){
				this.$emit('navTo',type)
			}
		},
		computed: {
			avatar() {
				// return this.$store.state.user.avatar
				return "/static/images/profile.png"
			},
		},
		watch: {
		    dataSource: {
		      handler(newVal, oldVal) {
				this.messageList = this.dataSource
			  },
		      immediate: true,
		      deep: true
		    },
			status: {
			  handler(newVal, oldVal) {
				this.statusArr = this.status
				console.log(this.statusArr);
			  },
			  immediate: true,
			  deep: true
			},
		},
	}
</script>

<style lang="scss" scoped>
.con{
	position: relative;
	background-color: #F2F3F5;
	width: 100%;
	&_middle{
		background-color: #F2F3F5;
		width: 100%;
		height: calc(100vh - 35.42rpx);
		overflow: auto;
		.myCon{
			width: 74%;
			margin-left: 13%;
			padding-top: 11.46rpx;
			padding-bottom: 21.88rpx;
			&_top{
				&_title{
					color: #1D2129;
					font-size: 12.5rpx;
					font-weight: 500;
					line-height: 16.67rpx; /* 133.333% */
				}
			}
			&_intro{
				margin: 8.33rpx 0;
				display: flex;
				align-items: center;
				&_left{
					width: 33.33rpx;
					height: 33.33rpx;
					position: relative;
					overflow: hidden;
					margin-right: 8.33rpx;
					cursor: pointer;
					&_avatar{
						width: 33.33rpx;
						height: 33.33rpx;
						line-height: 33.33rpx;
						border-radius: 50%;
						overflow: hidden;
						background-color: #c9cdd4;
						color: #fff;

						text-align: center;
						font-size: 14.58rpx;
						font-weight: 700;
					}
					uni-image{
						width: 33.33rpx;
						height: 33.33rpx;
						border-radius: 50%;
					}
					&_photo{
						position: absolute;
						right: -2.08rpx;
						bottom: -2.08rpx;
						border-radius: 50%;
						height: 10.42rpx;
						width: 10.42rpx;
						border-radius: 50%;
						background-color: #F2F3F5;
						z-index: 3;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						uni-image{
							width: 6.25rpx;
							height: 6.25rpx;
						}
					}
				}
				&_right{
					&_name{
						color: #1D2129;
						font-size: 10.42rpx;
						font-weight: 500;
						line-height: 14.58rpx; /* 140% */
					}
					&_dept{
						color: #86909C;
						font-size: 7.29rpx;
						font-weight: 400;
						line-height: 11.46rpx; /* 157.143% */
					}
				}
			}
			&_notice{
				padding: 6.25rpx;
				border-radius: 3.13rpx;
				background: #FFF;
				&_top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 6.25rpx;
					&_title{
						color: #1D2129;
						font-size: 8.33rpx;
						font-weight: 500;
						line-height: 12.5rpx; /* 150% */
					}
					&_right{
						cursor: pointer;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						uni-image{
							width: 11.46rpx;
							height: 7.29rpx;
						}
						&_text{
							color: #86909C;
							font-size: 6.77rpx;
							font-weight: 400;
							line-height: 11.46rpx; /* 169.231% */
						}
					}
				}
				&_middle{
					padding: 2.08rpx 5.21rpx;
					background-color: #F7F8FA;
					border-radius: 3.13rpx;
					&_item{
						padding: 3.13rpx 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: 17.71rpx;
					line-height: 17.71rpx;
					background-color: #F2F3F5;
					border-radius: 2.08rpx;
					text-align: center;

					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;
					uni-image{
						width: 7.29rpx;
						height: 7.29rpx;
					}
				}
			}
			// &_nav:hover{
			// 	background-color: #fff;
			// }
		}
	}
}
.orange{
	color: #FF7D00!important;
}
.gray{
	color: #86909C!important;
}
.red{
	color: #F53F3F!important;
}
.green{
	color: #00B42A!important;
}
.blueText{
	color: #165DFF!important;
}
</style>
