<script setup>
	// 商品评价列表
	import {
		ref,
		reactive,
		nextTick,
		getCurrentInstance,
	} from 'vue'
	import {
		onLoad,
		onReady,
		onPageScroll,
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from 'vuex'
	// 
	import util from '@/common/js/util.js'
	const {
		proxy
	} = getCurrentInstance()
	const {
		userinfo
	} = useStore().state
	const typeList = ref([{
		text: '全部',
		icon: null,
		value: 1
	}, {
		text: '最新',
		icon: '/static/picture.png',
		value: 2
	}, {
		text: '图/视频',
		icon: '/static/time.png',
		value: 3
	}])
	// 当前选中
	const typeIndex = ref(0)

	// 
	const list = reactive([{
		id: 0,
		userId: 1,
		ks: 123,
		isLike: 1,
		userName: '明月天涯',
		portrait: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
		time: '2023年10月30日 14:20',
		content: '明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯',
		imageList: [
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg'
		],
		child: [{
			nickname: '用户a',
			content: '这款产品怎么样？',
		}, {
			nickname: '用户b',
			content: '这款产品怎么样？',
		}, ],
	}, {
		id: 0,
		userId: 1,
		isLike: 0,
		ks: 123,
		userName: '明月天涯',
		portrait: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
		time: '2023年10月30日 14:20',
		content: '明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯明月天涯',
		imageList: [
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg',
			'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/00412594-656b-4379-a49e-0b381d5f6652.jpg'
		],
		child: [],
	}])

	/**
	 * 当前评论状态
	 * @param {Object} index
	 */
	function handleTypeIndex(index) {
		if (typeIndex.value === index) return
		typeIndex.value = index
	}

	// 打开弹窗
	function open() {
		proxy.$refs.popup.open();
	}

	// 预览图片
	function preview(urls, current) {
		uni.previewImage({
			urls,
			current,
		})
	}
</script>

<template>
	<view class="app">
		<view class="typeList df ptb20 pl20 bfff f30">
			<view class="item df fdr aic mr20 ptb5 plr20 br4" :class="{'active': index === typeIndex}"
				v-for="(item, index) in typeList" :key="index" @click="handleTypeIndex(index)">
				<!-- <image class="icon mr10 wh30" v-if="item.icon" :src="item.icon" /> -->
				<text class="">{{ item.text }}</text>
			</view>
		</view>

		<view class="listBox f28">
			<view class="nomore" v-if="!list[0]">暂无评论~</view>

			<view class="list df fdc" v-for="(item, index) in list" :key="index">
				<!-- 评论的用户 -->
				<view class="userinfo rows mtb20 mlr20">
					<image class="wh80 cir" :src="item.portrait" mode="aspectFill" />
					<view class="name f1 mlr20 c333 f34">{{ item.userName }}</view>
					<uni-icons type="more-filled" color="#999" />
				</view>

				<view class="content ml40 plr20 bfff br20">
					<!-- 款式日期 -->
					<view class="rows mtb20 c999">
						<view class="">款式：{{ item.ks }}</view>
						<view class="">{{ item.time }}</view>
					</view>

					<!-- 评论内容 -->
					<view class="content mtb20 f30">{{item.content}}</view>

					<!-- 图片 -->
					<view class="images mtb20" v-if="item.imageList[0]">
						<view class="item pr" @click="preview(item.imageList,index)"
							v-for="(image, index) in item.imageList" :key="index">
							<image class="img pa br10" :src="image" mode="aspectFill" />
						</view>
					</view>

					<!-- 菜单 -->
					<view class="fn df jcr aic mtb20 c999">
						<!-- 点赞 -->
						<view class="ec-item df aic mr20">
							<uni-icons type="hand-up-filled" color="#FF0000" v-if="item.isLike == 1" />
							<uni-icons type="hand-up" color="#999" v-else />
							<view class="ml10">0</view>
						</view>

						<!-- 留言数 -->
						<view class="ec-item df aic mr20">
							<uni-icons type="chat" color="#999" />
							<view class="ml10">{{item.child.length}}</view>
						</view>
					</view>

					<!-- 子评论 -->
					<view class="child oh mtb20 plr20 br10">
						<view class="msg mtb10" v-for="(secItem,secIndex) in item.child" :key="secIndex">
							<text class="c666">{{secItem.nickname}}：</text>
							<text class="c333 ml5">{{secItem.content}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="nomore mtb30">暂无更多评论~</view>
		</view>
	</view>
</template>

<style lang="scss">
	.typeList {
		.item {
			color: #666;
			background-color: #FFF6EB;
			transition: .3s;

			&.active {
				color: #fff;
				background-color: #FF9B27;
			}
		}
	}

	// 图片
	.images {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 10rpx;

		.item {
			padding-bottom: 100%;

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}


	// 子评论
	.child {
		background-color: #F4F4F4;
	}
</style>