<template>
	<view class="Address">
		<view class="Address_haeder">
			<view class="Address_haeder_title">
				{{api_name}}接口申请
			</view>
			你正在提交接口申请，所有信息请如实填写，所填信息只用于审核。
		</view>
		<form @submit="save">
			<view class="Address_main">
				<view class="Address_item">
					<view class="Address_item_title">
						申请原因
					</view>
					<view class="">
						<textarea name="content" maxlength="300" placeholder-class="Address_item_placeholder" :value="my_value"
							placeholder="详细描述接口能力的具体使用场景如：因当前业务涉及外卖送餐服务，需获取用户地理位置信息。" />
					</view>
				</view>
				<view class="Address_item">
					<view class="Address_item_title">
						辅助网页
						（选填）
					</view>
					<view>
						<input name="url"  type="text" placeholder-class="Address_item_placeholder" placeholder="可上传官网链接协助审核" />
					</view>
				</view>
				<view class="Address_item">
					<view class="Address_item_title">
						辅助图片
						（选填）
					</view>
					<view>
						<view class="tip">
							可上传小程序截图，最多上传10张图片。图片支持jpg、jpeg、bmp、gif或png格式，图片大小不超过5M。
						</view>
						<image class="add_icon" @click="uploadFile" src="../static/images/icon_6.png">
						</image>
						<block v-if="img_arr.length>0">
							<view class="add_icon" v-for="(item,index) of img_arr">
								<image class="img" :src="URL+item" :key='index'></image>
								<image @click="bindDel(index)" src="../static/images/shanchu.png" class="del"></image>
							</view>
						</block>
					</view>
					<view>
						<view class="tip">
							可上传小程序使用录屏，最多上传1个视频。视频支持mp4格式，视频大小不超过20M。
						</view>
						<image class="add_icon" @click="chooseVideo" src="../static/images/icon_6.png">
						</image>
						<view v-if="video_url">
							<video style="width: 100%;" :src="URLVideo+video_url" controls></video>
						</view>
					</view>
				</view>
				<button type="primary" formType="submit">提交申请</button>
			</view>
		</form>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				img_arr: [],
				URL: getApp().globalData.URL,
				URLVideo: getApp().globalData.URL + '/uploads/video/',
				video_url: '',
				api_name:'',
				my_value:'',
			}
		},
		onLoad(e) {
			this.api_name= e.api_name ||'wx.getLocation';
			let my_value;
			if(e.api_name == 'wx.getLocation'){
				my_value="需要获取用户定位，用于计算客户与我司的位置距离，方便客户导航到我司。"
			}else if(e.api_name == 'wx.chooseLocation'){
				my_value="打开地图选择位置：因涉及消费者填写收货地址，需要申请打开地图选择位置方便用户选择位置；商家把线下把货送给消费者。"
			}else if(e.api_name == 'wx.chooseAddress'){
				my_value="因涉及商家把货送给用户，需要申请获取用户收货地址。"
			}
			
			this.my_value =my_value
		},
		methods: {
			save(e){
				let params = e.detail.value;
				let data = Object.assign({
					admin_id:uni.getStorageSync("admin_id"),
					images:this.img_arr.join(","),
					video:this.video_url,
					api_name:this.api_name
				}, params);
				this.request({
					url: "Smdcshop/apply_privacy_interface",
					data,
					hide:true
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						console.log(res)
						
						uni.showToast({
							title: "提交成功",
							icon: 'none',
							duration: 1000
						})
						
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
						
					}
				}).catch((err) => {
					console.log(err)
					uni.showModal({
						title:"提示",
						content: err.message,
						showCancel:true,
						confirmText:"复制错误",
						success:(res)=>{
							res.confirm && uni.setClipboardData({
							data: err.message,
							success: function(r) {
								console.log('赋能成功', r);
							}
						  });
						}
					})
					// uni.showToast({
					// 	title: err.message,
					// 	icon: 'none',
					// 	duration: 2000
					// })
					
				})
			},
			uploadFile(e) {
				uni.chooseImage({
					success: (res) => {
						res.tempFilePaths.forEach((v, i) => {
							console.log(v)
							this.Upload({
								url: "setting/upload",
								data: {
									url: v,
									admin_id: uni.getStorageSync("admin_id"),
								}
							}).then(res => {
								console.log(res, "res")
								this.img_arr.push(res.src);
							}).catch({});
						})
					}
				});
			},
			chooseVideo(e) {
				// 上传视频
				uni.chooseVideo({
					maxDuration: 60,
					sourceType: ['album', 'camera'],
					success: (responent) => {
						let videoFile = responent.tempFilePath;
						this.Upload({
							url: "videofuneng/video_upload",
							data: {
								url: videoFile,
								type: 0,
								// token: uni.getStorageSync("token"),
							}
						}).then(res => {
							console.log(res, "res")
							this.video_url = res.file_name;
						}).catch({

						});
					}
				})
			},
			bindDel(index) {
				this.img_arr.splice(index, 1)
			},
		}
	}
</script>

<style>
	page {
		background: #F1F1F1;
	}

	.Address {
		padding: 20rpx;
	}

	.Address_haeder {
		font-size: 24rpx;
		color: #999
	}

	.Address_haeder_title {
		font-size: 34rpx;
		color: #000;
	}

	.Address_main {
		background: #FFFFFF;
		border-radius: 6rpx;
		margin-top: 20rpx;
	}

	.Address_item {
		padding: 20rpx;
		margin-bottom: 10rpx;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.Address_item_title {
		padding-bottom: 20rpx;
	}

	.Address_item_placeholder {
		font-size: 24rpx;
	}

	.add_icon {
		display: inline-block;
		width: 200rpx;
		height: 200rpx;
		border: 1rpx solid #F1F1F1;
		margin: 20rpx 10rpx 20rpx 0;
		position: relative;
	}

	.add_icon .img {
		width: 100%;
		height: 100%;
	}

	.tip {
		font-size: 24rpx;
		color: #999
	}

	.add_icon .del {
		position: absolute;
		right: 0;
		top: 0;
		width: 40rpx;
		height: 40rpx;
	}
</style>
