<script setup lang="ts">
import { ref } from 'vue'

const commentList = ref([
	{
		id: 'string',
		comment: 'string',
		user: {
			id: 'string',
			username: 'string',
			avatar: 'https://gw.alicdn.com/imgextra/i3/2215468931119/O1CN019pzVLv1K8Y4vdSOVw_!!2215468931119.jpg'
		},
		children: {}
	},
	{
		id: 'string',
		comment: 'string',
		user: {
			id: 'string',
			username: 'string',
			avatar: 'https://gw.alicdn.com/imgextra/i3/2215468931119/O1CN019pzVLv1K8Y4vdSOVw_!!2215468931119.jpg'
		},
		children: {}
	},
	{
		id: 'string',
		comment: 'string',
		user: {
			id: 'string',
			username: 'string',
			avatar: 'https://gw.alicdn.com/imgextra/i3/2215468931119/O1CN019pzVLv1K8Y4vdSOVw_!!2215468931119.jpg'
		},
		children: {}
	}
])
</script>

<template>
	<div class="details-main">
		<div class="details-p">
			<div class="img-show">
				<img src="https://gw.alicdn.com/imgextra/i3/2215468931119/O1CN019pzVLv1K8Y4vdSOVw_!!2215468931119.jpg" />
			</div>
			<div class="text-right">
				<h1>纯种银渐层幼猫活体宠物猫英国短毛猫银渐层英短银渐层银渐层猫咪</h1>
				<div class="text-price">
					<span class="price-unit">¥</span>
					<span class="price-count">300</span>
				</div>
				<div class="botton-group">
					<button class="buy">立刻购买</button>
					<button class="shopping-card">加入购物车</button>
					<button class="collection">收藏</button>
				</div>
			</div>
			<div style="width: 1000px">
				<div class="user-comment">用户评论</div>
				<div v-for="item in commentList" :key="item.id" class="user-comment-list">
					<img :src="item.user.avatar" />
					<div style="margin-left: 15px">
						<div style="font-size: 18px">{{ item.user.username }}</div>
						<div style="font-size: 25px">{{ item.comment }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.details-main {
	width: 100%;
	display: flex;
	justify-content: center;

	.details-p {
		width: 1552px;
		padding: 16px;
		background: white;
		margin-top: 30px;
		border-radius: 10px;
		display: flex;

		flex-wrap: wrap;
		justify-content: space-between;

		.text-right {
			text-align: left;
			width: 750px;

			.text-price {
				margin-top: 30px;
				font-weight: bold;

				.price-unit {
					font-size: 17px;
					color: #ff5500;
				}

				.price-count {
					color: #ff5500;
					font-size: 30px;
				}
			}
		}

		.img-show {
			width: 624px;
			height: 624px;
			background-color: #f5f5f5;
			display: flex;
			border-radius: 8px;
			justify-content: center;
			align-items: center;
			margin-left: 120px;

			img {
				height: 624px;
				border-radius: 16px;
			}
		}
	}
}

.botton-group {
	margin-top: 120px;

	.buy {
		background: linear-gradient(90deg, rgb(255, 119, 0), rgb(255, 73, 0));
		width: 203px;
		height: 48px;
		cursor: pointer;
		border: none;
		color: white;
		font-size: 18px;
		font-weight: bold;
	}

	.shopping-card {
		background: linear-gradient(90deg, rgb(255, 203, 0), rgb(255, 148, 2));
		width: 203px;
		height: 48px;
		border: none;
		color: white;
		cursor: pointer;
		font-size: 18px;
		font-weight: bold;
	}

	.collection {
		width: 94px;
		height: 48px;
		margin-left: 20px;
		border-radius: 5px;
		cursor: pointer;
		border: 2px solid #ccc;
		background: none;
	}

	.collection:hover {
		color: #ff5500;
		border: 2px solid #ff5500;
	}
}

.user-comment {
	margin: 20px;
	font-weight: bold;
	font-size: 20px;
}

.user-comment-list {
	margin-top: 20px;
	margin-left: 20px;
	width: 1000px;
	display: flex;

	img {
		width: 60px;
		height: 60px;
		border-radius: 30px;
	}
}
</style>
