<template>
	<view class="container">
		<!--  评价 -->
		<view class="evaluate">
			<view class="evaluateCenter">
				<view class="evaluateItem" v-for="(item, index) in list" :key="index">
					<view class="evaluateTip d-flex a-center j-sb">
						<view class="d-flex a-center">
							<image class="img" :src="item.image" mode="widthFix"></image>
							<view class="evaluate-name">{{ item.name}}</view>
						</view>

						<view class="font">{{item.time}}</view>
					</view>
					<view class="evaluate-title">这是文章标题！</view>
					<view class="evaluateText" :class="{lineclamp2:item.contentAll}"> {{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 v-for="(itm, ind) in item.imageList" :key="ind">
							<image class="evaluateListImgItem" :src="itm.url" mode="scaleToFill"></image>
						</view>
					</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
			}
		}

	}
</script>

<style lang="scss" scoped>
	.evaluate .evaluateCenter .evaluateItem {
		display: inline-block;
	}

	// 展开收起
	.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%;

					.evaluateListImgItem {
						width: 210rpx;
						height: 210rpx;
						float: left;
						margin-right: 10rpx;
						margin-top: 10rpx;
					}
				}


			}
		}
	}
</style>