<template>
	<view>
		<use-tabbar :tabbar="false" />
		<view class="margin-bottom-xl" v-if="fetch && fetch.info">
			<view class="padding margin-lr margin-tb-sm bg-main border-radius">
				<view class="goods-area">
					<view class="dflex pos-r">
						<view class="img" @click="Dever.pic.preview(fetch.info.pic, fetch.info.pic[0])">
							<image :src="fetch.info.pic[0]" mode="aspectFit"></image>
						</view>
						<view class="margin-left-sm"><text class="clamp-2"><span>{{ fetch.info.name }}
								</span></text>
							<view class="ft-dark fs-xs padding-top-xs">{{ fetch.info.sku_name || '&nbsp;&nbsp;' }}</view>
							<view class="margin-top-sm"><text class="price"><span>{{ fetch.info.price_text }}</span></text></view>
						</view>
					</view>
				</view>
			</view>
			
			
			<!-- 评价区 -->
			<view class="use-area evaluate-area margin-lr-sm" v-if="fetch.review && fetch.review.length > 0">
				<view class="dflex-b use-hover">
					<view class="dflex fwbd">评价（{{ fetch.review_total }})</view>
				</view>
			
				<view v-for="(item, index) in fetch.list" :key="index" class="margin-top border-line">
					<view class="dflex-b">
						<view class="dflex">
							<image class="headimg border-radius-c" :src="item.user.avatar" mode="aspectFill" @click="Dever.pic.preview([item.user.avatar], item.user.avatar)"></image>
							<view class="right-area flex1 padding-left-sm">
								<view class="margin-right">
									<view class="fwbd">{{ item.user.name }}</view>
									<view class="use-rate dflex line-height-1">
										<view v-for="i in 5" :key="i" class="pos-r margin-left-sm"
											:style="{ marginLeft: '0px' }">
											<text class="iconfont"
												:class="i <= item.rate ? 'iconshoucang- ft-base fs' : 'iconshoucang-01 ft-dark fs'"></text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<text class="time ft-dark fs-xs">{{ item.cdate_str }}</text>
					</view>
			
					<view class="content-area margin-top-xs">
						<view class="ft-main margin-top-xs margin-bottom-sm clamp-2">
							{{ item.content || '此用户没有填写评价' }}
						</view>
			
						<view class="dflex dflex-wrap-w" v-if="item.pic && item.pic.length > 0">
							<view v-for="(img, i) in item.pic" :key="i" class="dflex-c image-area border-radius">
								<image :src="img" mode="aspectFill" style="height: 166px;" @click="Dever.pic.preview([item.pic], img)"/>
							</view>
						</view>
			
						<view class="padding-bottom-sm">
							<text class="fs-xxs ft-dark">{{ item.style }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fetch: {},
				id: 0,
			}
		},
		onLoad(options) {
			this.id = options.id;
			if (!this.id) {
				return Dever.goHome()
			}
			this.loadData();
			this.loadReview(1)
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadReview(1);
		},
		//加载更多
		onReachBottom() {
			this.loadReview(2);
		},
		methods: {
			loadData() {
				this.DeverApi.get(this, 'source.info', {
					id: this.id
				}, res => {
					uni.setNavigationBarTitle({
						title: res.info.name
					})
				});
			},
			loadReview(page) {
				this.DeverApi.page([page, 'list'], this, 'source.getReviewList', {source_id:this.id});
			},
		}
	}
</script>

<style lang="scss">
	uni-image {
		width: 96rpx;
		height: 96rpx;
	}
	.goods-area:last-child {
		margin-bottom: 0;
	}

	.goods-area image {
		width: 180rpx;
		height: 180rpx;
	}
	/* 评价 */
	.evaluate-area {
		padding: 28rpx;
	
		.headimg {
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
		}
	
		.right-area {
			image {
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				height: 200rpx;
				width: 30%;
			}
		}
	}
</style>