<template>
	<!-- 衍生物  已评价-->
	<view class="cu-evaluateA  bg-white margin radius padding">
		<view class="flex">
			 <image class="radius margin-right-sm" style="width: 160upx;height: 160upx;min-width: 160upx;" lazy-load="true" :src="value.img" mode="aspectFit"></image>
			 <view style="flex: auto;" class="padding-tb text-black cut">
			 	{{value.name}}
			 </view>
		</view>
		<view class="padding-top border">
			<view class="flex justify-between align-center">
				<view class="text-gray">{{value.create_time}}</view>
				<button  @click="$emit('click',value)" class="cu-btn bg-red round">删除评价</button>
			</view>
			<view class="text-gray padding-tb">
				{{value.detail}}
			</view>
			<scroll-view v-if="value.imgs" class="flex" enable-flex style="height: 200upx;width: 100%;" scroll-x>
				<view @click="preview(index)" v-for="(item,index) in value.imgs" :key="index" class="margin-right" >
					<image style="width: 200upx;min-width: 200upx;height: 200upx;" :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video style="width: 300upx;min-width: 300upx;height: 200upx;"  :src="item.url" autoplay loop muted show-play-btn="false" controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			value:{
				type:Object,
				default:()=>({})
			}
		},
		methods:{
			preview(index){
				uni.previewMedia({
					sources:this.value.imgs,
					current:index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-evaluateA{
		.cut{
			overflow: hidden;
			text-overflow: ellipsis;
			display:-webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
		}
		.border{
			position: relative;
			&:before{
				content: "";
				position: absolute;
				width: 100%;
				left: 0;top: 0;
				border-top: 1upx solid #bbb;
				transform: scale(1,0.5);
			}
		}
	}
</style>