<template>
	<view class="praise_Item">
		<!-- 学生端显示 -->
		<view class="praise_Item-1" v-if="type === LIKETYPE.STUDENTEND">
			<view class="praise_Item-1-l" v-if="info.is_my">
				<view class="praise_Item-1-l-1" v-if="info.status === OPERATIONSTATUS.ADOPT">已通过</view>
				<view class="praise_Item-1-l-1s" v-else-if="info.status === OPERATIONSTATUS.PENDINGREVIEW">待审核</view>
				<view class="praise_Item-1-l-1s" v-else>未通过</view>
			</view>
			<view class="praise_Item-1-l-2">{{ info.create_time }}</view>
		</view>
		<!-- 老师端/管理员端显示 -->
		<view class="praise_Item-t" v-if="type === LIKETYPE.TEACHERSEND || type === LIKETYPE.ADMINEND">
			<view class="praise_Item-t-l">
				<u--image
					shape="circle"
					height="72rpx"
					width="72rpx"
					:src="info.uimg"></u--image>
			</view>
			<view class="praise_Item-t-r">
				<view class="praise_Item-t-r-1">{{ info.uname }}</view>
				<view class="praise_Item-t-r-2">{{ info.create_time }}</view>
			</view>
		</view>
		<view class="praise_Item-2">
			{{ info.content }}
		</view>
		<view class="praise_Item-3">
			<u--image
				v-for="(item, index) in info.imgs"
				:key="index"
				radius="15rpx"
				height="145rpx"
				width="145rpx"
				@click.native="seeImg(index)"
				:src="item"></u--image>
		</view>
		<view class="praise_Item-4" v-if="type === LIKETYPE.ADMINEND && info.showOperation">
			<view class="praise_Item-4-1" @click="operation(OPERATIONSTATUS.REFUSE)">不通过</view>
			<view class="praise_Item-4-2" @click="operation(OPERATIONSTATUS.ADOPT)">通过</view>
		</view>
	</view>
</template>

<script>
	import { LIKETYPE, OPERATIONSTATUS } from "@/emit/index.js"
	export default {
		name:"praise_Item",
		props: {
			type: {
				type: [String, Number],
				default: LIKETYPE.STUDENTEND
			},
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				OPERATIONSTATUS,
				LIKETYPE
			};
		},
		methods: {
			operation(type) {
				var datas = {
					id: this.info.id,
					status: type
				}
				var jkurl = '/admin/praise_check'
				this.$service.P_post(jkurl, datas).then(res => {
					this.$emit('success', this.info.id)
				})
			},
			seeImg(index) {
				uni.previewImage({
				    current: index, // 当前显示图片的链接，不填则默认为 urls 的第一张图片
				    urls: this.info.imgs // 需要预览的图片链接列表
				})
			}
		}
	}
</script>

<style lang="scss">
.praise_Item{
	background: #fff;
	border-radius: 15rpx;
	padding: 30rpx;
	box-shadow: 7rpx 0rpx 24rpx 0rpx rgba(153,153,153,0.22);
	margin-bottom: 20rpx;
	.praise_Item-1{
		display: flex;
		align-items: center;
		.praise_Item-1-l{
			.praise_Item-1-l-1{
				line-height: 36rpx;
				padding: 0 7rpx;
				background-color: #18BD7A;
				font-size: 22rpx;
				color: #FFFFFF;
				border-radius: 5rpx;
			}
			.praise_Item-1-l-1s{
				line-height: 36rpx;
				padding: 0 7rpx;
				background-color: #2D9FFF;
				font-size: 22rpx;
				color: #FFFFFF;
				border-radius: 5rpx;
			}
		}
		.praise_Item-1-l-2{
			color: #A1A0AB;
			font-size: 24rpx;
			margin-left: 20rpx;
		}
	}
	.praise_Item-t{
		display: flex;
		align-items: center;
		.praise_Item-t-l{
			flex-shrink: 0;
		}
		.praise_Item-t-r{
			margin-left: 25rpx;
			.praise_Item-t-r-1{
				color: #3D4054;
				font-size: 28rpx;
			}
			.praise_Item-t-r-2{
				color: #A1A0AB;
				font-size: 24rpx;
			}
		}
	}
	.praise_Item-2{
		font-size: 26rpx;
		line-height: 39rpx;
		color: #3D4054;
		margin-top: 28rpx;
	}
	.praise_Item-3{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-row-gap: 20rpx;
		grid-column-gap: 20rpx;
		margin-top: 30rpx;
	}
	.praise_Item-4{
		display: flex;
		justify-content: flex-end;
		padding-top: 20rpx;
		border-top: #EEEEEE solid 1rpx;
		margin-top: 20rpx;
		.praise_Item-4-1{
			width: 172rpx;
			border: 1rpx solid #2D81FF;
			color: #2D81FF;
			background: rgba(45,159,255,0.1);
			border-radius: 200rpx;
			font-size: 28rpx;
			line-height: 63rpx;
			text-align: center;
		}
		.praise_Item-4-2{
			width: 172rpx;
			border: 1rpx solid #2D81FF;
			color: #FFFFFF;
			background: #2D81FF;
			border-radius: 200rpx;
			font-size: 28rpx;
			line-height: 63rpx;
			text-align: center;
			margin-left: 29rpx;
		}
	}
}
</style>