<template>
	<view class="container">
		<!--  评价 -->
		<view class="evaluate">
			<view class="evaluateCenter">
				<view class="evaluateItem" v-for="(item, index) in list" :key="index" @click="handleLookId(item)">
					<view class="evaluateTip d-flex j-sb a-center">
						<view class="d-flex a-center">
							<image class="img" src="../static/logoLogin.png" mode="widthFix"></image>
							<view class="evaluate-name">{{ item.createUser ? item.createUser : '官方发布'}}</view>
						</view>
						<view class="font">{{item.createTime | formatDate}}</view>
					</view>
					<view class="evaluate-title">{{item.title}}</view>
					<view class="evaluateText" :class="{lineclamp2:item.contentAll}" v-html="item.content"></view>
					<!-- <view class="" v-if="item.isMore">
						<view class="rightText" v-if="item.contentAll" @click="changeAllFun(item, index)">全部</view>
						<view class="rightText" v-else @click="changeAllFun(item, index)">收起</view>
					</view> -->
					<view class="evaluateListImg">
						<view class="evaluateListImgItem" v-for="(itm, ind) in item.fileVos" :key="ind"
							@click.stop="handlePreview(index,ind)">
							<image :src="itm.url" mode="scaleToFill"></image>
						</view>
					</view>
					<view class="margin-top-two">
						<comment-list :personEvalList="item.commentVos"></comment-list>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "evaluateList",
		props: {
			list: {
				type: Array,
				required: true,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {};
		},
		created() {
			this.getlist()
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			getlist() {
				this.list.forEach(item => {
					if (item.content.length > 60) {
						item.isMore = true
						item.contentAll = true
					} else {
						item.isMore = false
						item.contentAll = false
					}
				})
			},
			changeAllFun(item, index) {
				let list = JSON.parse(JSON.stringify(this.list));
				list.forEach((elem, ind) => {
					if (index === ind) {
						elem.contentAll = !elem.contentAll
					}
				})
				this.list = list
			},
			//点击获取id
			handleLookId(data) {
				this.$emit('getId', data.id)
			},
			//图片预览
			handlePreview(index, inx) {
				console.log(index, inx)
				let that = this
				var photoList = that.list[index].fileVos.map(item => { // item 获取到的图片地址
					return item.url;
				});
				console.log(photoList, '第三')
				uni.previewImage({
					current: inx,
					urls: photoList,
					loop: true
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.evaluate .evaluateCenter .evaluateItem {
		// display: inline-block;
		background: #ffa;
		background-color: #FFFFFF;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
		margin: 10px 20rpx 0 20rpx;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
	}

	// 展开收起
	.rightText {
		color: #4399FC;
		text-align: right;
	}

	.evaluate {
		.evaluateCenter {
			overflow-x: auto;

			.evaluateItem {
				.evaluateTip {

					//头像
					.img {
						width: 60rpx;
						height: 60rpx;
						display: table;
						border-radius: 50%;
					}

					.evaluate-name {
						font-size: 28rpx;
						margin-left: 10rpx;
					}
				}

				.evaluate-title {
					font-size: 28rpx;
					font-weight: bold;
					margin-top: 10rpx;
				}

				// 内容样式
				.evaluateText {
					margin-top: 10rpx;
					font-size: 24rpx;
					letter-spacing: 0.5px;
					line-height: 36rpx;
				}

				// 超出省略
				.lineclamp2 {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					white-space: normal;
				}

				.evaluateListImg {
					width: 100%;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.evaluateListImgItem {
						width: 210rpx;
						height: 210rpx;
						background: #ffa;
						margin-top: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.evaluateListImg:after {
					content: '';
					width: 210rpx;
				}


			}
		}
	}
</style>
