<template>
	<view class="script_control">
		<!-- 吸顶 -->
		<u-sticky>
			<!-- 头部导航 -->
			<view class="nav_header">
				<view v-for="(item, index) in navList" :key="index" class="nav_item" :class="{active: current === index}" @click="toggleList(item, index)">
					<view class="nav_content">
						<text>{{ item.title }}</text>
					</view>
				</view>
			</view>
			<!-- 顶部模块 -->
			<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">￥99/人</text>
					<text class="u-line-1 col-9">一段北宋时期耻辱的历史，两个南宋同朝...</text>
					<view class="edit">
						<u-icon name="edit-pen" size="16" color="#333" @click="show = true"></u-icon>
					</view>
				</view>
			</view>
		</view>
	
		<!-- 底部模块 -->
		<view class="footer">
			<view class="btn" @click="goRouter('/pages_my/uploadPrimary/uploadPrimary')">{{ current === 0 ? '上传剧本': '上传主题' }}</view>
			<view class="btn add" @click="goRouter('/pages_my/addPrimary/addPrimary')">添加剧本</view>
		</view>
		
		<!-- 编辑弹出层 -->
		<u-popup :show="show" :round="10" mode="bottom" @close="show = false">
			<view class="box">
				<view class="scritp_detail">
					<view class="left">
						<image class="cover_img" src="@/static/homeImg/bgimg.webp" mode=""></image>
					</view>
					<view class="right">
						<text class="f-28 col-3d f-w-500 l-h-38">北宋奇案·汴京</text>
						<text class="col-9 f-24 l-h-32"><text class="m-r-10">4男2女</text> 古风/推理/悬疑/高阶</text>
						<view class="detail_tip">
							<text class="f-24 l-h-32 col-3 m-r-10">详情</text>
							<u-icon name="arrow-right" size="10" color="#333"></u-icon>
						</view>
					</view>
				</view>
				
				<view class="nav_list dis-flex flex-y-center flex-x-around">
					<view v-for="(item, index) in functionList" :key="index" class="dis-flex flex-dir-column flex-y-center" @click="myFun(item)">
						<u-icon :name="item.icon" size="24" color="#333"></u-icon>
						<text class="f-24 l-h-32 col-3d m-top10">{{ item.title }}</text>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 设置排序 -->
		<u-picker
			:show="showSort"
			:columns="columns"
			title="主题排序"
			closeOnClickOverlay
			@close="showSort = false"
			@cancel="showSort = false"
			@confirm="onConfirm"
		/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [
					{ id: 1, title: '剧本杀' },
					{ id: 2, title: '密室逃脱' }
				],
				current: 0,
				keyword: '',
				primaryCurrent: 0,
				show: false,
				showSort: false,
				columns: [['1', '2', '3']],
				primaryList: ['全部', '情感', '推理', '机制', '还原', '悬疑'],
				functionList: [
					{ title: '设置排序', icon: 'arrow-upward' },
					{ title: '下架主题', icon: 'download' },
					{ title: '编辑主题', icon: 'edit-pen' }
				]
			};
		},
		methods: {
			toggleList(item, index) {
				this.current = index;
			},
			goRouter(path){
				uni.navigateTo({
					url: path
				})
			},
			// 功能函数
			myFun(item){
				if(item.title === '设置排序'){
					this.showSort = true
				}else if(item.title === '下架主题') {
					uni.showModal({
						content: '确定将主题《北宋奇案·汴京》 从店铺主题库下架吗？',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.navigateTo({
						url:'/pages_my/uploadPrimary/uploadPrimary'
					})
				}
			},
			// 选择排序
			onConfirm(){
				this.showSort = false
			}
		}
	}
</script>

<style lang="scss" scoped>
// 头部导航
.nav_header{
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 80rpx;
	border-bottom: 2rpx solid #eee;
	background-color: #fff;
	.nav_item{
		flex: 1;
		position: relative;
		text-align: center;
		line-height: 80rpx;
		color: #999;
		.nav_content{
			position: relative;
			font-size: 28rpx;
		}
		&.active{
			color: #3d3d3d;
			&::after{
				position: absolute;
				left: 50%;
				bottom: 0;
				content: '';
				width: 40rpx;
				height: 6rpx;
				transform: translateX(-50%);
				background-color: #FFD900;
				border-radius: 200rpx;
			}
		}
	}
}
// 顶部模块
.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: 32rpx;
				height: 32rpx;
			}
		}
	}
}

// 底部模块
.footer{
	display: flex;
	align-items: center;
	gap: 10rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 16rpx 30rpx;
	background-color: #fff;
	.btn{
		flex: 1;
		height: 80rpx;
		border-radius: 200rpx;
		border: 2rpx solid #333333;
		color: #333;
		font-weight: 500;
		font-size: 28rpx;
		text-align: center;
		line-height: 80rpx;
		box-sizing: border-box;
		&.add {
			background-color: #333;
			color: #fff;
		}
	}
}

// 弹出层
.box{
	padding: 30rpx 30rpx 0;
	.scritp_detail{
		display: flex;
		align-items: center;
		background: #F8F8FA;
		border-radius: 20rpx;
		padding: 20rpx;
		.left{
			width: 120rpx;
			height: 160rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			overflow: hidden;
			.cover_img{
				width: 100%;
				height: 100%;
			}
		}
		.right{
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			flex: 1;
			.detail_tip{
				display: flex;
				align-items: center;
				position: absolute;
				top: 50%;
				right: 40rpx;
				transform: translateY(-50%);
			}
		}
	}
	.nav_list{
		border-bottom: 1px solid #eee;
		padding: 40rpx 0;
	}
}
</style>