<template>
	<view :class="['bg', valueType == 'honor'?'honorBG':'']">

		<view class="user-other-info">
			<!-- // 景区 -->
			<view class="scenic-container" v-if="valueType=='scenic_ids'">
				<view class="userinfo-item" v-for="(item,i) in scenicIds" :key="i" @click="changeSelection(item)">
					<span>{{item.name}}</span>
					<view v-if="item.value.length>0" class="text-overflow" >{{item.valueStr}}</view>
					<view v-else class="empty-value" >请选择</view>
				</view>
			</view>
			<!-- 语言 -->
			<view class="lingo-container" v-else-if="valueType=='lingo_ids'">
				<view class="userinfo-item" v-for="(item,i) in lingoIds" :key="i" @click="changeSelection(item)">
					<span>{{item.name}}</span>
					<view v-if="item.value.length>0" class="text-overflow" >{{item.valueStr}}</view>
					<view v-else class="empty-value" >请选择</view>
				</view>
				<view class="language-doc-container">
					<span>证明材料</span>
					<view class="img-container">
						<view v-for="(file,i) in fileList" class="doc-image" :key="i">
							
							<image :src="showImg(file)" class="doc-image"  ></image>
							<view class="doc-del" @click.native="removeFile(i)">x</view>
							
						</view>
						
						
						<view class="doc-image flex flex-center" @click="uploadImage()">
							<image class="upload-image" :src="showImg('/uploads/20241202/33e04a3b13241a6705616f6d6db315ce.png')"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 亮点 -->
			<view class="scenic-container" v-else-if="valueType=='sparkle_text'">
				<view class="userinfo-item" v-for="(item,i) in speakText" :key="i">
					<span>{{i==0?'主亮点':`副亮点${i}`}}</span>
					<view class="point">
						<input v-model="item.text" type="text" placeholder="请输入内容" />
						
						<uni-icons v-if="i!=0" class="del-icon" type="trash" size="20" @click.native="delText(i)"></uni-icons>
					</view>
				</view>
				<view class="add-btn" @click="addText">+ 添加更多</view>
			</view>
			<!-- 视频 -->
			<view class="video-container" v-else-if="valueType=='video_list'">
				<view class="top-del" style="text-align: right;padding-bottom: 15rpx;position: relative;">
					<uni-icons type="trash" size="19" @click.native="changeDeleteMode(true)"></uni-icons>
					<view v-if="deleteIndex.length>0" class="del-num">{{deleteIndex.length}}</view>
				</view>
				<view class="video-upload-container">
					<view v-show="!deleteMode" class="video-upload-image flex flex-column flex-center" 
						@click="uploadVideo()" style="border: 1px dashed #ADADAD;">
						<image class="upload-image" style="margin-bottom: 12rpx;" :src="showImg('/uploads/20241202/33e04a3b13241a6705616f6d6db315ce.png')"></image>
						上传视频
					</view>
					
					<view class="video-upload-image" v-for="(file,i) in fileList" :key="i">
						<video :src="showImg(file)" class="video-upload-image" preload="metadata" 
						:controls="false" :show-progress="false" :show-fullscreen-btn="false"
						:show-play-btn="false" :show-center-play-btn="false" :show-loading="false"></video>
						
						<view class="cover-div">
							<view class="cover-play" @click="playVideo(file)">
								<image style="width: 66rpx;height: 66rpx;" :src='showImg("/uploads/20241202/44b29b02b77b0a0342bb38c2d9282f49.png")'></image>
							</view>
							<view :class="['delete-container', deleteIndex.includes(i)?'selected':'']" v-if="deleteMode" @click.stop="changeDeleteIndex(i)">
								<image v-if="!deleteIndex.includes(i)" :src="showImg('/uploads/20241202/b6e64e71e01a6cfd8ade6c639583357b.png')" title="未选中"></image>
								<image v-else :src="showImg('/uploads/20241202/21f56765ccdc74a07fbd3b30a72a87a0.png')" title="选中"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 荣誉称号 -->
			<view class="scenic-container" v-else-if="valueType=='honor'">
				<view class="honor-item" v-for="(item,i) in honor" :key="i">
					<uni-icons v-if="honor.length>1" class="del-icon" type="trash" size="20" @click.native="removeArr(i,honor)"></uni-icons>
					<view class="userinfo-item" @click="changeHonorSelection(item, 'name')">
						<span>{{`荣誉称号${i+1}`}}</span>
						<view v-if="item.nameStr" class="text-overflow icon-select" >{{item.nameStr}}</view>
						<view v-else class="empty-value icon-select" >请选择</view>
					</view>
					<view class="userinfo-item" @click="openRankOption(item)">
						<span>级别</span>
						<view v-if="item.rankStr" class="text-overflow icon-select" >{{item.rankStr}}</view>
						<view v-else class="empty-value icon-select" >请选择</view>
					</view>
					<view class="language-doc-container">
						<span>证明材料</span>
						<view class="img-container">
							<view v-for="(file,index) in item.fileList" class="doc-image" :key="`honor${i}_${index}`">
								<image :src="showImg(file)" class="doc-image"  ></image>
								<view class="doc-del" @click.native="removeArr(index,item.fileList)">x</view>
							</view>
							<view class="doc-image flex flex-center" @click="uploadImage(item.fileList)">
								<image class="upload-image" :src="showImg('/uploads/20241202/33e04a3b13241a6705616f6d6db315ce.png')"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="add-btn" style="background: white;" @click="addHonor">+ 添加更多</view>
			</view>
			
			
			<view class="nickname-box" v-else>
				<input v-model="inputValue" type="text" placeholder="请输入内容" v-show="!['duration'].includes(valueType)"/>
				<input v-model="inputValue" type="number" placeholder="请输入内容" v-show="['duration'].includes(valueType)"/>
			</view>
			
			<!-- 底部保存 -->
			<view class="btn-tao" @click="submit" v-if="!['scenic_ids','sparkle_text','video_list','honor'].includes(valueType)">保存</view>
			
			<view class="bottom-btn" v-if="['scenic_ids','sparkle_text'].includes(valueType)">
				<view class="btn" @click="goBack()" >取消</view>
				<view class="btn" @click="submit()" >保存</view>
			</view>
			
			<view class="bottom-btn-fixed" v-if="['video_list','honor'].includes(valueType)">
				<template v-if="!deleteMode">
					<view class="btn" @click="goBack()" >取消</view>
					<view class="btn" @click="submit()" >保存</view>
				</template>
				<template v-else>
					<view class="btn" @click="changeDeleteMode(false)" >取消删除</view>
					<view class="btn" @click="confirmDelVideo()" >确认删除</view>
				</template>
			</view>
			
		</view>

		<!-- 弹框 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup-box">
				<view class="btn-top flex flex-between w-full">
					<view @click="$refs.popup.close()">取消</view>
					<view @click="selectAll" v-if="!selection.single">全选</view>
				</view>
				<view class="popup-content">
					<view :class="['popup-item','flex-center',selection.value.includes(item.id)?'active':'']"
					v-for="(item,index) in selection.arr" :key="index" @click="changeItemSelect(item)">
						{{item.name}}
						<uni-icons v-show="selection.value.includes(item.id)" class="active-img" type="checkmarkempty" size="23" color="#96684F"></uni-icons>
					</view>
				</view>
				<view class="popup-btns flex-center" @click="popSubmit">
					<view>确定</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="popupRank" type="bottom">
			<view class="popup-box">
				<view class="btn-top flex flex-between w-full">
					<view @click="$refs.popupRank.close()">取消</view>
				</view>
				<view class="popup-content">
					<view :class="['popup-item','flex-center',selectionItem&&selectionItem.rank==item.id?'active':'']"
					v-for="(item,index) in honorRankList" :key="index" @click="changeRank(item)">
						{{item.name}}
						<uni-icons v-if="index!=0" class="active-img" type="right" size="20" color="#96684F"></uni-icons>
						
						<picker v-if="item.id==2" class="cover-picker" :range="province" range-key="name" @change="changeArea"></picker>
						<picker v-if="item.id==3" class="cover-picker" :range="mulProvince" range-key="name" @change="changeArea" @columnchange="pickerColumnchange" mode="multiSelector"></picker>
					</view>
				</view>
				<view class="popup-btns flex-center" @click="$refs.popupRank.close()">
					<view>确定</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import {pathToBase64} from  "@/static/js/mmmm-image-tools/index.js"
	export default {
		data() {
			return {
				valueType: '',
				inputValue: '',
				inputValueStr: '',
				keyNames: [
					{key: 'nickname', value:'姓名'},{key: 'mobile', value:'手机号'},
					{key: 'certificate_number', value: '导游证号码'},
					{key: 'duration',value: '工作年限'},
					{key: 'bio',value: '个性签名'},
					{key: 'scenic_ids',value: '擅长景区'},
					{key: 'lingo_ids',value: '语言能力'},
					{key: 'sparkle_text', value: '核心亮点'},
					{key:'video_list', value: '讲解视频'},
					{key:'honor', value: '荣誉称号'}
				],
				lingoIds: [],
				scenicIds: [],
				speakText: [],
				
				honor: [],
				honorNameList: [{id: 1, name: "称号1"},{id: 2, name: "称号2"}],
				honorRankList: [{id: 1, name: "全国级"}, {id: 2, name: "省级"}, {id:3,name:"市级"}],
				
				selectionItem: null, // 景点选中更改的值
				selection: {arr: [], value: [], valueStr: '', single: false}, //弹窗值
				
				fileList: [],
				deleteIndex: [],
				
				deleteMode: false, // 视频删除
				
				province: [
					{id: 1, name: '北京', children: [{id:2, name: '北京'}, {id:3, name: "h萨拉开放"}]},
					{id: 4, name: '北京2', children: [{id:5, name: '北京2'}, {id:6, name: "h萨拉开放2"}]},
				],
				mulProvince : [
					[
						{id: 1, name: '北京',children: [{id:2, name: '北京'}, {id:3, name: "h萨拉开放"}]},
						{id: 4, name: '北京2',children: [{id:5, name: '北京2'}, {id:6, name: "h萨拉开放2"}]},
					],
					[{id:2, name: '北京'}, {id:3, name: "h萨拉开放"}]
				]
			}
		},
		onLoad(options) {
			this.initData(options)
		},
		

		methods: {
			initData (options) {
				uni.setNavigationBarTitle({title: ''});
				this.valueType = ''
				this.inputValue = ''
				this.inputValueStr = ''
				this.deleteMode = false
				this.fileList = []
				this.speakText = []
				if (options.inputValue && options.inputValue!='null' && options.inputValue!='undefined') {
					this.inputValue = options.inputValue
				}
				if (options.valueType) {
					this.valueType = options.valueType
					let titleData = this.keyNames.find(v=>v.key == this.valueType)
					if (titleData) {
						uni.setNavigationBarTitle({title: titleData.value});
					}
					if (this.valueType == 'lingo_ids') {
						this.initLingoList()
					}
					if (this.valueType == 'scenic_ids') {
						this.initScenicList()
					}
					if (this.valueType == 'sparkle_text') {
						this.initSparkleText()
					}
					if (this.valueType == 'video_list') {
						this.initVideo()
					}
					if (this.valueType == 'honor') {
						this.initHonor()
					}
					
				} else {
					this.goBack()
					return
				}
				

				
			},
			// 导游语言列表
			async initLingoList() {
				
				let res = await this.Post({},'/api/guide/getGuideLingoList')
				let valueArr = []
				try {
					valueArr = (this.inputValue || '').split(',').map(v=>{return Number(v)})
				} catch(e) {}
				console.log(valueArr)
				let param = [{arr: res.data||[],name:'语言能力'}]
				this.lingoIds = param.map(v=>{
					let valueHave = v.arr.filter(x=>valueArr.includes(x.id))
					return {...v, value: valueHave.map(x=>x.id), valueStr: valueHave.map(x=>x.name).join(',')}
				})
				try {
					let fileList =  uni.getStorageSync('userfileList')
					this.fileList = JSON.parse(fileList)
					console.log(this.fileList)
				} catch(e) {
					this.fileList = []
				}

			},
			// 景区列表
			async initScenicList() {
				let res = await this.Post({},'/api/guide/getGuideScenicList')
				let valueArr = []
				try {
					valueArr = (this.inputValue || '').split(',').map(v=>{return Number(v)})
				} catch(e) {}
				console.log(valueArr)
				this.scenicIds = (res.data || []).map(v=>{
					let valueHave = v.arr.filter(x=>valueArr.includes(x.id))
					return {...v, value: valueHave.map(x=>x.id), valueStr: valueHave.map(x=>x.name).join(',')}
				})
			},
			// 亮点
			initSparkleText () {
				let arr = (this.inputValue||'').split(',').map(v=>{
					return {text: v}
				})
				this.speakText = arr 
			},
			addText () {
				this.speakText.push({text:''})
			},
			delText (index) {
				this.speakText.splice(index,1)
			},
			// 视频
			initVideo () {
				try {
					let fileList =  uni.getStorageSync('userVideofileList')
					this.fileList = JSON.parse(fileList)
					console.log(this.fileList)
				} catch(e) {
					this.fileList = []
				}
			},
			// 荣誉称号
			initHonor () {
				let honor = []
				try {
					honor =  uni.getStorageSync('userHonor')
					honor = JSON.parse(honor)
					if (!Array.isArray(honor)) {
						honor = []
					}
				} catch(e) {
					honor = []
				}
				
				if (honor.length<=0) {
					honor = [
						{nameStr: '', name: null, rank: null, rankId: null, rankStr: '',fileList: []}
					]
				}
				this.honor = honor
			},
			addHonor() {
				this.honor.push({nameStr: '', name: null, rank: null,rankId: null, rankStr: '',fileList: []})
			},
			// honor 荣誉选择弹窗
			changeHonorSelection (item, keyName) {
				this.selectionItem = item
				this.selection = {arr: this.honorNameList, value: item.name?[item.name]:[], valueStr: '', single: true}
				this.$refs.popup.open()
			},
			openRankOption (item) {
				this.selectionItem = item
				this.$refs.popupRank.open()
			},
			changeRank (item) {
				// 全国
				if (item.id == 1) {
					this.selectionItem.rank = 1
					this.selectionItem.rankId = null
					this.selectionItem.rankStr = "全国级"
				}
			},
			
			changeArea (e) {
				console.log(e)
				let value = e.detail.value
				// 市级
				if (Array.isArray(value)) {
					this.selectionItem.rank = 3
					this.selectionItem.rankId = value[1]
					let address = this.mulProvince[0][value[0]].name+this.mulProvince[1][value[1]].name
					this.selectionItem.rankStr = `市级（${address}）`
				} else {
					this.selectionItem.rank = 2
					this.selectionItem.rankId = value
					let address = this.province[value].name
					this.selectionItem.rankStr = `省级（${address}）`
				}
				
			},
			pickerColumnchange (e) {
				if(e.detail.column === 0){
					let index = e.detail.value
					// console.log('第一列滑动');
					// this.newProvinceDataList[1] = [];
					this.mulProvince[1] = this.mulProvince[0][index].children || []
				}
			},

			// 选择弹窗
			changeSelection (item) {
				this.selectionItem = item
				let single = item.single||false
				let value = []
				if (single && item.value) {
					value = [Number(item.value)]
				} else {
					value = JSON.parse(JSON.stringify(item.value))
				}
				this.selection = {arr: item.arr, value: value, valueStr: '', single: single}
				this.$refs.popup.open()
			},
			// 单个选中
			changeItemSelect (item) {
				let index = this.selection.value.findIndex(x=>x==item.id)
				if (index>=0) {
					this.selection.value.splice(index,1)
				} else {
					let single = this.selection.single
					if (single) {
						this.selection.value = [item.id]
					} else {
						this.selection.value.push(item.id)
					}
				}
			},
			selectAll() {
				this.selection.value = this.selection.arr.map(x=>x.id)
			},
			// 选项确定
			popSubmit () {
				let tempSelect = JSON.parse(JSON.stringify(this.selection))
				let valueHave = tempSelect.arr.filter(x=>tempSelect.value.includes(x.id))
				if (['scenic_ids','lingo_ids'].includes(this.valueType)) {
					this.selectionItem.value = tempSelect.value
					this.selectionItem.valueStr = valueHave.map(x=>x.name).join(',')
				} else if (['honor'].includes(this.valueType)) {
					// 修改称号
					if (tempSelect.value.length>0) {
						this.selectionItem.name = tempSelect.value[0]
						this.selectionItem.nameStr = valueHave.map(x=>x.name).join(',')
					} else {
						this.selectionItem.name = null
						this.selectionItem.nameStr = ""
					}
					console.log(this.selectionItem, this.honor)
				}
				this.$refs.popup.close()
			},
			
			uploadImage(arr) {
				let _this = this
				let url = this.NEWAPIURL
				// #ifdef H5
				 url = '/api'
				// #endif
				url+='/api/Common/upload'
				uni.chooseImage({
					count:1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: url,
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								try {
									let res = JSON.parse(uploadFileRes.data)
									if (res.code == 1) {
										if (Array.isArray(arr)) {
											arr.push(res.data.url)
										} else {
											_this.fileList.push(res.data.url)
										}
									}
								} catch(e) {}
								
								
							},
							fail:()=> {
								uni.showToast({
									title:'上传失败',
									icon:'none'
								})
							}
						});
						
					},
					fail:()=> {
						uni.showToast({
							title:'上传失败',
							icon:'none'
						})
					}
				});
			},
			uploadVideo() {
				let _this = this
				let url = this.NEWAPIURL
				// #ifdef H5
				 url = '/api'
				// #endif
				url+='/api/Common/upload'
				uni.showLoading()
				uni.chooseVideo({
					count:1,
					success: (res) => {
						
						const tempFilePath = res.tempFilePath;
						const uploadTask = uni.uploadFile({
							url: url,
							filePath: tempFilePath,
							name: 'file',
							success: (uploadFileRes) => {
								uni.hideLoading()
								try {
									let res = JSON.parse(uploadFileRes.data)
									if (res.code == 1) {
										_this.fileList.push(res.data.url)
									}
								} catch(e) {}
								
								
							},
							fail:()=> {
								uni.hideLoading()
								uni.showToast({
									title:'上传失败',
									icon:'none'
								})
							}
						});
						
					},
					fail:()=> {
						uni.hideLoading()
						uni.showToast({
							title:'上传失败',
							icon:'none'
						})
					}
				});
			},
			
			// 数组删除
			removeArr(index, arr) {
				arr.splice(index,1)
			},
			
			playVideo (file) {
				uni.navigateTo({
					url: '/subPackages/video/video?item=' + encodeURIComponent(JSON.stringify(file))
				})
			},
			changeDeleteMode (value) {
				this.deleteIndex = []
				this.deleteMode = value
			},
			changeDeleteIndex (index) {
				let i = this.deleteIndex.findIndex(v=>v==index)
				if (i>=0) {
					this.deleteIndex.splice(i,1)
				} else {
					this.deleteIndex.push(index)
				}
				console.log(this.deleteIndex)
			},
			
			confirmDelVideo () {
				this.fileList = this.fileList.filter((v,i)=>!this.deleteIndex.includes(i))
				this.changeDeleteMode(false)
			},
			
			
			// 校验和选择数据时的数据处理
			handleSubmitData() {
				// 景点数据处理
				if (["scenic_ids","lingo_ids"].includes(this.valueType)) {
					let data = []
					if (this.valueType == 'lingo_ids') {
						data = this.lingoIds
					}
					if (this.valueType == 'scenic_ids') {
						data = this.scenicIds
					}
					
					let value = []
					data.forEach(v=>{
						if(Array.isArray(v.value) && v.value.length>0) {
							value.push(v)
						}
					})
					this.inputValue = value.map(v=>v.value.join(',')).join(',')
					this.inputValueStr = value.map(v=>v.valueStr).join(',')
					console.log(this.inputValue,this.inputValueStr)
				}
				
				// 亮点
				if (this.valueType == 'sparkle_text') {
					this.speakText.forEach(v=>{
						if (v.text &&v.text.trim) {
							v.text = v.text.trim()
						}
					})
					if (!this.speakText[0].text) {
						uni.showToast({
							title: '主亮点必填',
							icon:'none'
						})
						return true
					}
					this.inputValue = this.speakText.filter(v=>v.text)
					this.inputValueStr = this.inputValue.map(v=>v.text).join(',')
				}
				// 视频
				if (this.valueType == 'video_list') {
					this.inputValue = JSON.parse(JSON.stringify(this.fileList))
					this.inputValueStr = ''
				}
				// 荣誉称号
				if (this.valueType == 'honor') {
					// 过滤都没填的数据
					let data = this.honor.filter(v=> !(!v.name&&!v.rank&&v.fileList.length<=0))
					if (data.length>0) {
						if (data.every(v=>(v.name&&v.rank&&v.fileList.length>0))) {
							this.inputValue = JSON.parse(JSON.stringify(data))
							this.inputValueStr = data[0].nameStr
						} else {
							uni.showToast({
								title: '请补充信息',
								icon:'none'
							})
							return true
						}
						
					} else {
						this.inputValue = []
						this.inputValueStr = ""
					}
				}
				
				
			},

			submit() {
				let res = this.handleSubmitData()
				if (res) return
				
				try {
					this.inputValue = this.inputValue.trim()
				} catch(e) {}
				
				uni.$emit("updateInfo", {
					msgType: 'registerInfo',
					data: {
						valueType: this.valueType,
						inputValue: this.inputValue,
						inputValueStr: this.inputValueStr,
						fileList: this.fileList
					}
				})
				this.goBack()
			},

		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: content-box;
	}
	.bg{
		min-height: 100vh;
		overflow-x: hidden;
		background: white;
		padding-bottom: 50rpx;
	}
	.bg.honorBG{
		background: #F1F1F1;
	}

	.empty-value{
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
	}
	
	.nickname-box {
		display: flex;
		align-items: center;
		background: white;
		margin-bottom: 100rpx;
		font-size: 30rpx;
		height: 70rpx;
		border-bottom: 1rpx solid #D8D8D8;
		span {
			flex-shrink: 0;
		}
		input {
			flex: 1;
			font-size: 30rpx;
			display: block;
		}
	}
	

	.user-other-info {
		padding:30rpx;
	}

	.userinfo-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		position: relative;
		span{
			flex-shrink: 0;
			width: 140rpx;
		}
		&>view{
			flex: 1;
			padding: 40rpx 10rpx 40rpx 0;
			margin-left: 30rpx;
			border-bottom: 1px solid #D8D8D8;
		}
	}
	.btn-tao {
		width: 333rpx;
		height: 80rpx;
		background: #96684F;
		border-radius: 40rpx;
		text-align: center;
		font-size: 30rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		margin: 68rpx auto 0;
	}
	
	.popup-box {
		border-radius: 0rpx;
		background: #fff;
		overflow: hidden;
		.btn-top{
			padding: 26rpx 26rpx 0 26rpx;
			color: #999999;
			font-size: 31rpx;
			box-sizing: border-box;
		}
		.popup-content{
			max-height: 500rpx;
			width: 100%;
			overflow-x: hidden;
			overflow-y: auto;
		}
		
		.popup-item {
			width: 697rpx;
			height: 99rpx;
			font-weight: 500;
			font-size: 31rpx;
			color: #12293C;
			margin: auto;
			border-bottom: 1rpx solid #D8D8D8;
			position: relative;
			
			.cover-picker{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
			}
		}
		.popup-item.active{
			color: #96684F;
		}
		.popup-item:last-of-type {
			border: none;
		}
		.active-img{
			position: absolute;
			right: 10rpx;
			
		}
		
		.popup-btns {
			width: 100%;
			height: 153rpx;
			background: #FFFFFF;
			color: #12293C;
			border-top: 13rpx solid #F2F2F2;
			box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(82,82,82,0.25);
			padding: 40rpx 26rpx;
			box-sizing: border-box;
			view{
				box-sizing: border-box;
				width: 100%;
				height: 73.33rpx;
				line-height: 73.33rpx;
				background: #DC2525;
				border-radius: 11rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	
	.del-num{
		position: absolute;
		top: -5rpx;
		right: -10rpx;
		background: #E5131B;
		color: white;
		width: 24rpx;
		height: 24rpx;
		text-align: center;
		line-height: 24rpx;
		font-size: 20rpx;
		border-radius: 50%;
	}
	
	.language-doc-container{
		display: flex;
		align-items: flex-start;
		padding-top: 40rpx;
		span{
			flex-shrink: 0;
			width: 140rpx;
		}
		.img-container{
			flex:1;
			flex-shrink: 0;
			display: flex;
			flex-wrap: wrap;
			padding-left: 20rpx;
			
			.doc-image{
				width: 141rpx;
				height: 151rpx;
				border-radius: 13rpx;
				margin: 0 40rpx 20rpx 0;
				background: #F1F1F1;
				position: relative;
			}
			.doc-del{
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: black;
				color: white;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				border-radius: 50%;
			}
			
			.upload-image{
				width: 43rpx;
				height: 41rpx;
			}
		}
	}
	.userinfo-item .point{
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		input{
			font-size: 28rpx;
		}
		.del-icon{
			padding-left: 20rpx;
		}
	}
	
	.add-btn{
		width: 343rpx;
		height: 72rpx;
		background: #F1F1F1;
		border-radius: 13rpx;
		line-height: 72rpx;
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		margin: 55rpx auto 0;
	}
	

	.video-upload-container{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.upload-image{
			width: 72rpx;
			height: 68.67rpx;
		}
		.video-upload-image{
			width: 330rpx;
			height: 330rpx;
			background: #F1F1F1;
			border-radius: 10rpx;
			margin-bottom:20rpx;
			position: relative;
			overflow: hidden;
			
			.cover-div{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				.cover-play{
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					position: absolute;
					z-index: 5;
				}
				.delete-container{
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					position: absolute;
					z-index: 10;
					padding: 20rpx;
					image{
						width: 44rpx;
						height: 44rpx;
						
					}
				}
				.delete-container.selected{
					background: rgba(0,0,0,0.8);
				}
			}
		}
	}

	
	.bottom-btn{
		padding: 66rpx 80rpx 0;
		display: flex;
		justify-content: space-between;
		.btn{
			width: 244rpx;
			height: 81rpx;
			border-radius: 40rpx;
			border: 1px solid #000000;
			line-height: 81rpx;
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #010101;
		}
		.btn:last-of-type{
			background: #96684F;
			border: none;
			color: #FFFFFF;
		}
	}
	.bottom-btn-fixed{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 133rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(102,102,102,0.24);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 92rpx;
		box-sizing: border-box;
		.btn{
			width: 244rpx;
			height: 81rpx;
			border-radius: 40rpx;
			border: 1px solid #000000;
			line-height: 81rpx;
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #010101;
		}
		.btn:last-of-type{
			background: #96684F;
			border: none;
			color: #FFFFFF;
		}
	}
	
	.honor-item{
		background: white;
		border-radius: 13rpx;
		padding: 0 12rpx;
		position: relative;
		margin-bottom: 28rpx;
		.del-icon{
			position: absolute;
			bottom: 5rpx;
			right: 5rpx;
		}
	}
	
	.icon-select{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.icon-select::after{
		content: "";
		width: 20rpx;
		height: 20rpx;
		margin-left: 6rpx;
		background-image: url('https://static.ticket.sz-trip.com/tongli/images/user/rightIcon-gray.png');
		background-size: 100% 100%;
	}
</style>
