<template>
	<view>
		<view class="ListItem" @click="openInfoPop">
			<view class="ListItem-t">
				<view class="ListItem-t-l">
					<text class="ListItem-t-l-1">{{ info.uname }}</text>
					<image class="ListItem-t-l-2" src="@/static/images/admin/icon12.png" v-if="info.usex === GENDER.MALE" mode="widthFix"></image>
					<image class="ListItem-t-l-2" src="@/static/images/admin/icon13.png" v-else mode="widthFix"></image>
				</view>
				<view class="ListItem-t-r" v-if="info.is_read === READINGSTATUS.READ">已读</view>
				<view class="ListItem-t-r ListItem-t-r2" v-else @click.stop="openMarkReadPop">
					<image src="@/static/images/admin/icon15.png" mode=""></image>
					<text>未读</text>
				</view>
			</view>
			<view class="ListItem-c">
				{{ info.message }}
			</view>
			<view class="ListItem-b">{{ info.create_time }}</view>
		</view>
		<mark-read-pop ref="markReadPop" @success="successRead"></mark-read-pop>
		<info-pop ref="infoPop"></info-pop>
	</view>
</template>

<script>
	import MarkReadPop from "../MarkReadPop/index.vue"
	import InfoPop from "../InfoPop/index.vue"
	import { READINGSTATUS } from "../../emit.js"
	import { GENDER } from "@/emit/index.js"
	export default {
		name: 'ListItem',
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		components: {
			MarkReadPop,
			InfoPop
		},
		data() {
			return {
				GENDER,
				READINGSTATUS
			}
		},
		methods: {
			successRead(e) {
				this.$emit('successRead', e)
			},
			openInfoPop() {
				this.$refs.infoPop.open(this.info)
			},
			openMarkReadPop() {
				this.$refs.markReadPop.open(this.info)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ListItem {
		padding: 30rpx 38rpx;
		border-radius: 15px;
		box-shadow: 7rpx 0rpx 24rpx 0rpx rgba(153, 153, 153, 0.22);
		background: #fff;
		margin-bottom: 20rpx;
		.ListItem-t {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.ListItem-t-l {
				display: flex;
				align-items: center;
				.ListItem-t-l-1 {
					font-size: 30rpx;
					color: #3D4054;
				}

				.ListItem-t-l-2 {
					height: 27rpx;
					width: 27rpx;
					flex-shrink: 0;
					margin-left: 10rpx;
				}
			}

			.ListItem-t-r {
				line-height: 38rpx;
				padding: 0 15rpx;
				font-size: 24rpx;
				background-color: #F7F8FA;
				color: #A1A0AB;
			}
			.ListItem-t-r2{
				background: linear-gradient(0deg, #0088FF 0%, #2C9DFF 100%);
				color: #fff;
				display: flex;
				align-items: center;
				image{
					margin-right: 5rpx;
					height: 22rpx;
					width: 22rpx;
				}
			}
		}

		.ListItem-c {
			margin-top: 29rpx;
			color: #8E8D97;
			font-size: 26rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			white-space: normal;
			-webkit-line-clamp: 2;
		}

		.ListItem-b {
			text-align: right;
			font-size: 24rpx;
			color: #A1A0AB;
			margin-top: 15rpx;
		}
	}
</style>