<!--
 * @Author: ch
 * @Date: 2022-06-22 15:15:22
 * @LastEditors: ch
 * @LastEditTime: 2022-06-23 14:23:27
 * @Description: file content
-->
<template>
	<view class="preview">
		<view class="preview--top">
			{{current + 1}}/{{imgs.length}}
		</view>
		<u-swiper :list="imgs" :current="current" @change="handleChange" :autoplay="false" />
		<view class="preview--footer">
			<BsCommentUserInfo :userData="data"/>
			<view>
				<view class="top">
					<u-rate count="5" size="30rpx" :value="data.commentScore" activeColor="#FFA35B" readonly inactiveColor="#DDD"></u-rate>
					<text class="top--time">{{ data.createTime }}</text>
				</view>
				<view class="ctx">{{ data.commentContent }}</view>
			</view>
		</view>
	</view>
</template>
<script>
import BsCommentUserInfo from '@/components/BsCommentUserInfo.vue';

export default {
	components: { BsCommentUserInfo },
	data (){
		return {
			data : this.$store.state.comment_preview,
			current : Number(this.$Route.query.idx)
		}
	},
	computed : {
		imgs(){
			const arr = this.data.pictureUrl || [];
			return arr.split(',')
		}
	},
	onShow(){
		if(!this.data.id){
			this.$Router.back();
		}
	},
	methods:{
		handleChange(idx){
			this.current = idx.current
		}
	}
}
</script>
<style lang="scss">
page{
	background: #000;
}
</style>
<style lang="scss" scoped>

.preview{
	&--top{
		color: #fff;
		height: 44px;
		padding: 0 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: -webkit-sticky;
		position: sticky;
		top: var(--window-top);
		z-index: 999;
	}
}
</style>