<template>
	<view class="script_control">
		<!-- 吸顶 -->
		<u-sticky>
			<!-- 顶部模块 -->
			<view class="nav_box">
				<!-- 搜索框 -->
				<u-search
					v-model="keyword"
					placeholder="搜索本店剧本"
					height="72rpx"
					:showAction="false"
					margin="14rpx 30rpx 28rpx 30rpx"
					bgColor="#F7F8FA"
				/>
				<!-- 筛选列表 -->
				<view class="select_list">
					<view class="left">
						<view v-for="item in 5" :key="item" class="left_item dis-flex flex-y-center">
							<text style="margin-right: 6rpx;" class="f-28 l-h-38 col-3d">剧情</text>
							<u-icon name="arrow-down" size="12" color="#333"></u-icon>
						</view>
					</view>
					<view class="QRcode">
						<image style="width: 32rpx;" src="@/static/homeImg/QRCode.png" mode="widthFix"></image>
					</view>
				</view>
				<!-- 选择主题 -->
				<view class="select_primary">
					<view v-for="(item, index) in primaryList" :key="index" :class="{active: primaryCurrent === index}" class="item" @click="primaryCurrent = index">
						{{ item }}
					</view>
				</view>
			</view>
		</u-sticky>
		
		<!-- 内容列表 -->
		<view class="script_container">
			<view v-for="item in 3" :key="item" class="scritp_item">
				<view class="left">
					<image class="cover_img" src="@/static/homeImg/bgimg.webp" mode=""></image>
					<text class="people_num">6人本</text>
				</view>
				<view class="right">
					<text class="f-32 col-3d f-w-500 l-h-38 mb-10">北宋奇案·汴京</text>
					<text class="col-9"><text class="m-r-10">4男2女</text> 古风/推理/悬疑/高阶</text>
					<text style="margin-top: 18rpx;margin-bottom: 14rpx;" class="col-9">灰烬工作室</text>
					<text class="u-line-1 col-9">一段北宋时期耻辱的历史，两个南宋同朝...</text>
					<view class="edit" @click="addPrimary">添加</view>
				</view>
			</view>
		</view>
	
		<!-- 底部模块 -->
		<view class="footer" @click="show = true">
			<view class="f-24 l-h-32 col-f dis-flex flex-y-center">
				<text>没有你想要的本？</text>
				<text style="color: #FFD900;">联系平台添加</text> 
				<u-icon name="arrow-right-double" size="8" color="#FFD900"></u-icon>
			</view>
		</view>
		
		<!-- 添加新本 -->
		<u-popup :show="show" closeable mode="center" round="20" @close="show = false">
			<view class="new_script">
				<view class="f-32 f-w-500 l-h-42 col-3d t-c">添加新本</view>
				<u--input v-model="scriptName" placeholder="请输入内容" :customStyle="{height: '72rpx',width: '540rpx',boxSizing: 'border-box',margin: '60rpx auto'}" border="surround"/>
				<view class="col-6 f-24 l-h-32 t-c">输入剧本名称 联系平台运营人员，上传新本信息</view>
				<view class="btn">发送</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: ['剧本杀', '密室逃脱'],
				current: 0,
				keyword: '',
				show: false,
				scriptName: '',
				primaryCurrent: 0,
				primaryList: ['全部', '情感', '推理', '机制', '还原', '悬疑']
			};
		},
		methods: {
			toggleList(item, index) {
				this.current = index;
			},
			addPrimary(){
				uni.showModal({
					content: '确定将主题《北宋奇案·汴京》 添加到本店主题库吗？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
// 顶部模块
.nav_box{
	background-color: #fff;
	padding: 14rpx 0 20rpx 0;
	.select_list{
		position: relative;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		.left{
			display: flex;
			align-items: center;
			gap: 40rpx;
			flex-shrink: 0;
		}
		.QRcode{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 30rpx;
		}
	}
	.select_primary{
		overflow: hidden;
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		gap: 20rpx;
		padding: 0 30rpx;
		.item{
			display: inline-block;
			width: 120rpx;
			height: 48rpx;
			background: #F7F8FA;
			border-radius: 200rpx;
			color: #999;
			flex-shrink: 0;
			font-size: 28rpx;
			text-align: center;
			line-height: 48rpx;
			&.active{
				background: #FFD900;
				color: #3d3d3d;
			}
		}
	}
}

// 内容列表
.script_container{
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	padding: 20rpx 30rpx;
	background-color: #F6F7FB;
	padding-bottom: 150rpx;
	.scritp_item{
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 12rpx;
		&:last-child{
			border-bottom: 0;
		}
		.left{
			position: relative;
			width: 140rpx;
			height: 180rpx;
			border-radius: 8rpx;
			overflow: hidden;
			margin-right: 20rpx;
			.cover_img{
				width: 100%;
				height: 100%;
			}
			.people_num{
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 32rpx;
				background-color: rgba(0, 0, 0, 0.7);
				line-height: 32rpx;
				color: #fff;
				text-align: center;
				font-size: 24rpx;
			}
		}
		.right{
			position: relative;
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 24rpx;
			line-height: 32rpx;
			.edit{
				position: absolute;
				top: 0;
				right: 0;
				width: 100rpx;
				height: 48rpx;
				background: #333333;
				border-radius: 8rpx;
				color: #fff;
				font-size: 24rpx;
				text-align: center;
				line-height: 48rpx;
			}
		}
	}
}

// 底部模块
.footer{
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 88rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 600rpx;
	height: 80rpx;
	background: #333333;
	border-radius: 200rpx;
}

// 添加新本
.new_script{
	position: relative;
	width: 690rpx;
	height: 800rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	overflow: hidden;
	padding-top: 200rpx;
	box-sizing: border-box;
	.btn{
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100rpx;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		line-height: 100rpx;
		color: #333;
		font-size: 32rpx;
		background-color: #F5F7FA;
	}
}
</style>