<template>
	<!-- 评论 -->
	<view class="back">
		<view class="" v-if="commentlist.length >0">
			<view class="box" v-for="(item,idx) in commentlist" :key="idx">
				<!-- 顶部 -->
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="u-flex">
						<image style="width: 68rpx;height: 68rpx;border: radius 34rpx;;" :src="item.member.avatar"
							mode="">
						</image>
						<view class="">
							<text
								class="name">{{item.member.nickname.slice(0,1)+'***'+item.member.nickname.slice(-1)}}</text>
							<uni-rate network allow-half :readonly="true" color="rgba(247, 181, 0, 1)" :size='8'
								:value="5" v-model="rate" />
						</view>
					</view>
					<text class="day">{{timeSince(item.created_at)}}</text>
				</view>
				<view class="day" style="margin-top: 24rpx;">{{item.sku_item.item}}</view>
				<view class="content" style="margin-top: 20rpx;">{{item.content}}</view>
				<!-- <view class="" v-for="(child,index) in item.image.split(',')" :key="index" style="margin-top: 22rpx;"> -->
				<view class="u-flex u-row-between" style="margin-top: 22rpx;flex-wrap: wrap;" v-if="item.image">
					<image v-for="(child,index) in item.image.split(',')" :key="index" :src="child"
						style="margin-bottom: 20rpx; width: 326rpx;height: 326rpx;border-radius: 12rpx;background: #D8D8D8;"
						mode=""></image>
				</view>
			</view>
		</view>
		<view class="" style="height: 400rpx;text-align: center;line-height: 400rpx;">
			暂无数据
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merchant_goods_id: '',
				commentlist: [],
				rate: ''
			};
		},
		onLoad(options) {
			this.merchant_goods_id = options.id
			this.comment()
		},
		onshow() {

		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		methods: {
			//评论接口
			comment() {
				uni.$u.http.post('/api/goods/goods_comment', {
					merchant_goods_id: this.merchant_goods_id,
					page: 1,
					limit: 10
				}).then((res) => {
					console.log(res);
					this.commentlist = res.data
				}).catch(() => {

				})
			},
			timeSince(dateString) {
				// 为兼容iOS，转换日期格式
				// var dateArr = dateString.split("T")[0].split("-");
				// var timeArr = dateString.split("T")[1].split(":");
				// var date = new Date(dateArr[0], dateArr[1] - 1, dateArr[2], timeArr[0], timeArr[1], timeArr[2]);
				var date = dateString;

				const second = 1000;
				const minute = 60 * second;
				const hour = 60 * minute;
				const day = 24 * hour;
				const month = 30 * day;
				const year = 12 * month;

				const now = new Date().getTime();
				const inputDate = new Date(date).getTime();
				const diffValue = now - inputDate;

				if (diffValue < 0) {
					console.error('输入的时间不能在当前时间之后！');
					return dateString;
				}

				if (diffValue < minute) {
					return Math.round(diffValue / second) + '秒前';
				} else if (diffValue < hour) {
					return Math.round(diffValue / minute) + '分钟前';
				} else if (diffValue < day) {
					return Math.round(diffValue / hour) + '小时前';
				} else if (diffValue < month) {
					return Math.round(diffValue / day) + '天前';
				} else if (diffValue < year) {
					return Math.round(diffValue / month) + '个月前';
				} else {
					// 时间间隔超过一年，直接显示具体时间
					return dateArr.join('-');
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.back {
		// background-color:rgba(216, 216, 216, 1) ; 
		padding: 20rpx;
		box-sizing: border-box;

		.box {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
		}

		.day {
			font-family: SFPro, SFPro;
			font-weight: 400;
			font-size: 20rpx;
			color: #9E9E9E;
			line-height: 24rpx;
			text-align: justify;
			font-style: normal;
		}

		.content {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #444444;
			line-height: 36rpx;
			text-align: justify;
			font-style: normal;
		}

		.name {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #444444;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 34rpx;
		}
	}
</style>