<template>
	<view class="content">
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				查看评价
			</block>
		</cu-custom>
		<view class=" bg-ff padding" style="margin: 15rpx 20rpx;border-radius: 15rpx;">
			<view class="" style="background-color: #FAFAFA ;padding: 30rpx;border-radius: 10rpx;">

				<view class="flex align-center margin-top" v-for="(item,index) in appraiseInfo.gradeList" :key="index">
					<view class="color-66" style="width: 150rpx;">
						{{item.name}}
					</view>
					<u-rate :count="5" v-model="item.score" active-color="#FC6035 " size="38" gutter="40"
						:disabled="true">
					</u-rate>
					<view class="color-66">
						<text style="font-size: 28rpx;font-weight: bold;color: #333;"> {{item.score}} </text><text
							style="font-size: 22rpx;margin-left: 4rpx;">分</text>
					</view>
				</view>

			</view>

			<view class="color-33 text-bold font-30" style="margin-top: 50rpx;word-break: break-all;">
				{{appraiseInfo.content}}
			</view>

			<view class="" style="margin-top: 50rpx;border-bottom: 1rpx solid #eee;padding-bottom: 30rpx;">
				<view class="flex flex-wrap">
					<view class="flex align-center  justify-center  margin-bottom-xs"
						@tap.stop="$videoList(index,appraiseInfo.resourceList,'resourceType')"
						v-for="(item,index) in appraiseInfo.resourceList" :key="index"
						style="width: 150rpx;height:150rpx;border-radius: 10rpx;background-color: #007AFF;margin-right: 13rpx;">
						<video :src="item.url" v-if="item.type=='002'" :poster="item.faceImg"
							style="position: relative;width: 150rpx;height: 150rpx;"></video>
						<image :src="item.url" v-else-if="item.type=='001'" style="width: 150rpx;height: 150rpx;"  mode="aspectFill">
						</image>

					</view>

				</view>
				<view class="margin-top-sm" style="color: #C1C1C1;" v-if="appraiseInfo.createTime">
					评价时间 {{appraiseInfo.createTime.substring(0,appraiseInfo.createTime.length - 3)}}
				</view>
			</view>
			<view class="">
				<view class="" style="margin-top: 46rpx;" v-if="appraiseInfo.reContent">
					<view class="flex color-99 justify-between">
						<view class="" style="font-size: 28rpx;">
							追评：
						</view>
						<view class="" style="font-size: 24rpx;">
							{{appraiseInfo.reContentTime.substring(0,appraiseInfo.reContentTime.length-3)}}
						</view>
					</view>
					<view class=""
						style="word-break: break-all;font-weight: 500%; background-color: #FAFAFA;border-radius: 10rpx;padding: 30rpx 23rpx;margin-top: 24rpx;line-height: 45rpx;font-size: 28rpx;color: #111;">
						{{appraiseInfo.reContent}}
					</view>
				</view>
				<view class="" style="margin-top: 46rpx;" v-if="appraiseInfo.reply">
					<view class="flex color-99 justify-between">
						<view class="" style="font-size: 28rpx;">
							商家回复：
						</view>
						<view class="" style="font-size: 24rpx;">
							{{appraiseInfo.replyTime}}
						</view>
					</view>
					<view class=""
						style="word-break: break-all;font-weight: 500%; background-color: #FAFAFA;border-radius: 10rpx;padding: 30rpx 23rpx;margin-top: 24rpx;line-height: 45rpx;font-size: 28rpx;color: #111;">
						{{appraiseInfo.reply}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				appraiseInfo: {
					gradeList: []
				}
			}
		},
		onLoad(options) {
			this.getDetails(options.commontId)
		},

		methods: {
			getDetails(commontId) {
				const that = this
				this.$u.api.getcommentDetail(commontId).then(res => {
					// console.log(res.data)
					if (res.code == 200) {
						this.appraiseInfo = res.data
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.active {
		background-color: #FC6035;
	}

	.submit {
		color: #fff;
		margin: 50rpx auto;
		text-align: center;
		line-height: 90rpx;
		width: 600rpx;
		height: 90rpx;

		border-radius: 45rpx 45rpx 45rpx 45rpx;
	}
</style>
