<template>
	<view class="cu-evaluate padding-top bg-white">
		<view class="flex align-center justify-between">
		  <view class="flex align-center">
			  <image lazy-load="true" style="width: 50upx;height: 50upx;border-radius: 50%;" :src="value.avator"></image>
			  <text class="text-black text-bold margin-left-sm">{{value.nickname}}</text>
			  <view class="margin-left-sm">
			  	<cu-rate :value="value.rate" />
			  </view>
		  </view>
		  <view class="text-grey">{{value.createTime}}</view>
		</view>
		<view class="text-grey 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>
</template>

<script>
	import cuRate from "./cu-rate.vue";
	export default{
		components:{
			cuRate
		},
		props:{
			value:{
				type:Object,default:()=>({})
			}
		},
		methods:{
			preview(index){
				uni.previewMedia({
					sources:this.value.imgs,
					current:index
				})
			}
		}
	}
</script>

<style>
</style>