<template>
	<view class="details">
		<view class="main"></view>
		<view></view>
		<view class="data-list">
			<view>
				<image src="/static/image/user/2.png"></image>
				<text>2.5w</text>
			</view>
			<view>
				<image src="/static/image/user/3.png" v-if="0"></image>
				<image src="/static/image/user/7.png" v-else></image>
				<text>2.5w</text>
			</view>
			<view>
				<image src="/static/image/user/4.png" v-if="0"></image>
				<image src="/static/image/user/6.png" v-else></image>
				<text>2.5w</text>
			</view>
		</view>
		<view class="comment-list">
			<view class="item" v-for="(item, index) in 4" :key="index">
				<view class="info">
					<image></image>
					<view class="center">
						<view class="name">用户1</view>
						<view class="time">6小时前</view>
					</view>
					<view class="btn" @click="showChat=true">回复</view>
				</view>
				<view class="content u-line-1">德铭阳光赞德铭阳光赞德铭阳光赞</view>
			</view>
		</view>
		<u-popup v-model="showChat" mode="bottom" :mask=false>
			<view class="chat">
				<view class="input-box">
					<input type="text">
					<view class="btn">发送</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			showChat: false
		}
	},
	onLoad(option) {
		this.setNavTitle(option.current);
	},
	methods: {
		setNavTitle(current) {
			uni.setNavigationBarTitle({
				title: current == 0 ? "图文详情" : "视频详情"
			});
		}
	},
};
</script>
<style lang="scss" scoped>
.details {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	.main {
		height: 740rpx;
		margin: 2rpx 0rpx; 
		background-color: #FFFFFF;
	}
	.comment-list {
		.item {
			background-color: #FFFFFF;
			padding: 30rpx;
			margin-bottom: 2rpx;
			.info {
				display: flex;
				align-items: flex-end;
				margin-bottom: 20rpx;
				> image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					background-color: aqua;
				}
				.center {
					margin-right: auto;
					.name {
						font-size: 26rpx;
						color: rgba(51,51,51,1);
						margin-bottom: auto;
					}
					.time {
						font-size: 22rpx;
						color: rgba(153,153,153,1);
					}
				}
				.btn {
					font-size: 26rpx;
					color: rgba(51,51,51,1);
				}
			}
			.content {
				margin-left: 80rpx;
				display: flex;
			}
		}
	}
	.data-list {
		background-color: #FFFFFF;
		display: flex;
		height: 88rpx;
		padding: 0 30rpx;
		align-items: center;
		justify-content: space-between;
		@mixin image-class($width) {
			> image {
				width: $width;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
		> view {
			display: flex;
			align-items: center;
			&:first-child {
				@include image-class(45rpx);
			}
			&:nth-child(2) {
				@include image-class(40rpx);
			}
			&:last-child {
				@include image-class(32rpx);
			}
			> text {
				font-size: 28rpx;
				color: rgba(51,51,51,1);
			}
		}
	}
	.chat {
		background-color: #ECECEC;
		width: 100%;
		height: 98rpx;
		padding: 19rpx 30rpx;
		.input-box {
			background-color: #FFFFFF;
			width: 690rpx;
			height: 60rpx;
			background: rgba(255,255,255,1);
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			> input {
				flex: 1;
				padding: 10rpx 30rpx;
			}
			.btn {
				width: 90rpx;
				background: rgba(255,120,15,1);
				border-radius: 25rpx;
				font-size: 26rpx;
				color: rgba(255,255,255,1);
				line-height: 50rpx;
				text-align: center;
				margin-right: 5rpx;
			}
		}
	}
}
</style>