<template>
	<view class="upload_primary">
		<u-navbar title="上传剧本" :autoBack="true" placeholder />
		<!-- 剧本基本信息 -->
		<view class="script_info mb-20">
			<view class="col-3d f-w-500 l-h-38 f-32">剧本基础信息</view>
			<u--form :model="scrpitForm" ref="uForm" labelWidth="70" :labelStyle="{fontSize: '28rpx', color: '#999',lineHeight: '38rpx'}">
				<u-form-item label="剧本封面:" prop="coverImg">
					<u-upload
							:fileList="mainCoverList"
							name="mainCover"
							multiple
							:maxCount="1"
							@afterRead="afterRead"
							@delete="deletePic"
						/>
				</u-form-item>
				<u-form-item label="剧本名称:" prop="scriptTitle">
					<u-input v-model="scrpitForm.scriptTitle" border="bottom" placeholder="请填写剧本名称" />
				</u-form-item>
				<u-form-item label="剧本时长:" prop="scriptTitle">
					<u-input v-model="scrpitForm.scriptHour" border="bottom" placeholder="请填写剧本时长(小时)" />
				</u-form-item>
				<u-form-item label="剧本评分:" prop="scriptTitle">
					<u-input v-model="scrpitForm.scriptRate" border="bottom" placeholder="请填写剧本评分" />
				</u-form-item>
				<u-form-item label="剧本价格:" prop="scriptTitle">
					<u-input v-model="scrpitForm.scriptPrice" border="bottom" placeholder="请填写剧本价格(元/人)" />
				</u-form-item>
				<u-form-item label="剧本角色:" labelPosition="top" prop="scriptTitle">
					<view class="role">
						<view class="line mb-20">
							<view class="role_box">
								<u-icon name="man" size="10" color="#fff"></u-icon>
								<text class="col-f f-28 l-h-38 m-l-10">男</text>
							</view>
							<u-number-box v-model="scrpitForm.scrpitRole.man" buttonSize="20" />
						</view>
						<view class="line">
							<view class="role_box woman">
								<u-icon name="woman" size="10" color="#fff"></u-icon>
								<text class="col-f f-28 l-h-38 m-l-10">女</text>
							</view>
							<u-number-box v-model="scrpitForm.scrpitRole.woman" buttonSize="20" />
						</view>
					</view>
				</u-form-item>
			</u--form>
		</view>
	
		<!-- 基本内容信息 -->
		<view class="script_info mb-20">
			<view class="title_tip mb-30">
				<view class="col-3d f-32 l-h-42 f-w-500 mb-20">剧情</view>
				<view class="content_list">
					<view v-for="item in 10" :key="item" class="content_item">情感</view>
				</view>
			</view>
			<view class="title_tip mb-30">
				<view class="col-3d f-32 l-h-42 f-w-500 mb-20">题材</view>
				<view class="content_list">
					<view v-for="item in 10" :key="item" class="content_item">克鲁苏</view>
				</view>
			</view>
			<view class="title_tip">
				<view class="col-3d f-32 l-h-42 f-w-500 mb-20">难度</view>
				<view class="content_list">
					<view v-for="item in 10" :key="item" class="content_item">克鲁苏</view>
				</view>
			</view>
		</view>
	
		<!-- 剧情介绍 -->
		<view class="script_info mb-20">
			<view class="col-3d f-32 l-h-42 f-w-500 mb-20">剧情介绍</view>
			<u--textarea v-model="value1" placeholder="请填写剧本介绍~" ></u--textarea>
		</view>
		
		<!-- 上传剧本照片 -->
		<view class="script_info">
			<view class="col-3d f-32 l-h-42 f-w-500 mb-20">上传剧本图片</view>
			<u-upload
				:fileList="detailList"
				name="detail"
				multiple
				:maxCount="1"
				@afterRead="afterRead"
				@delete="deletePic"
			>
				<view style="background-color: #F6F7FB;width: 200rpx;height: 200rpx;" class="dis-flex flex-y-center flex-x-center">
					<image style="width: 96rpx;height: 80rpx;" src="../static/photo.png" mode=""></image>
				</view>
			</u-upload>
			<view class="col-3d f-22 m-top20" style="line-height: 26rpx;">
				请上传大小不超过<text style="color: #FF0006;">5MB</text> 格式为<text style="color: #FF0006;">png/jpg/jpeg</text>的文件
			</view>
		</view>
		
		<!-- 底部提交 -->
		<view class="footer">
			<view class="btn add">确定上传剧本</view>
		</view>
	</view>
</template>

<script>
	import upload from '@/mixins/upload';
	export default {
		mixins: [upload],
		data() {
			return {
				scrpitForm: {
					coverImg: '',
					scriptTitle: '',
					scriptHour: '',
					scriptRate: '',
					scriptPrice: '',
					scrpitRole: {
						man: 1,
						woman: 2
					}
				},
				// 校验规则
				rules: {
					coverImg: [
						{ required: true, message: '请上传封面', trigger: ['change'] }
					],
					scriptTitle: [
						{ required: true, message: '请填写剧本名称', trigger: ['blur', 'change'] }
					],
					scriptHour: [
						{ required: true, message: '请填写剧本时长', trigger: ['blur', 'change'] }
					],
					scriptRate: [
						{ required: true, message: '请填写剧本评分', trigger: ['blur', 'change'] }
					],
					scriptPrice: [
						{ required: true, message: '请填写剧本价格', trigger: ['blur', 'change'] }
					]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.upload_primary{
	padding: 20rpx 30rpx;
	background-color: #F6F7FB;
	padding-bottom: 150rpx;
	.script_info{
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
	}
}
.role{
	margin-top: 30rpx;
	.line{
		display: flex;
		align-items: center;
		.role_box{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 48rpx;
			background: #87D5FF;
			border-radius: 200rpx;
			margin-right: 40rpx;
			&.woman{
				background: #FFAEAE;
			}
		}
	}
}

.title_tip{
	background-color: #FFFFFF;
	.content_list{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 12rpx;
		.content_item{
			padding: 6rpx 30rpx 4rpx;
			background-color: #F7F8FA;
			border-radius: 8rpx;
			color: #999;
			font-size: 28rpx;
		}
	}
}
// 底部模块
.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;
		}
	}
}
</style>