<template>
	<view class="park" :style="{backgroundImage:`url(${indexBackgroundImage})`}">
		<!-- <view class="park-navbar">
			<u-navbar title="供应商入驻" :border-bottom="false" :background="background"></u-navbar>
		</view> -->
		<view class="park-but">
			<view class="but">
				公司
			</view>
			<view class="but">
				个体户
			</view>
		</view>
		<view class="forms">
			<view class="form-title">
				法人姓名<text style="color: red;">*</text>
			</view>
			<view class="form-input">
				<input type="text" placeholder="请输入法人姓名">
			</view>
			<view class="form-title">
				法人手机号码<text style="color: red;">*</text>
			</view>
			<view class="form-input">
				<input type="text" placeholder="请输入法人手机号码">
			</view>
			<view class="form-title">
				法人身份证正面<text style="color: red;">*</text>
			</view>
			<view class="card">
				<u-upload :action="action" :header="header" @on-uploaded="cardJustSuccess" @on-remove="cardJustRemove"
					:file-list="proveList" :custom-btn="true" max-count="1">
					<template v-slot:addBtn>
						<view class="card-box">
							<image :src="$picUrl+'/static/news/icon-upload.png'" style="height: 96rpx;" mode="">
							</image>
						</view>
					</template>
				</u-upload>
			</view>
			<view style="font-size: 22rpx;color: #999;margin-bottom: 30rpx;">
				仅支持jpg、png、gif、50M以内/个
			</view>
			<view class="form-title">
				法人身份证反面<text style="color: red;">*</text>
			</view>
			<view class="card">
				<u-upload :action="action" :header="header" @on-uploaded="cardBackSuccessve" @on-remove="cardBackRemove"
					:file-list="proveList" :custom-btn="true" max-count="1">
					<template v-slot:addBtn>
						<view class="card-box">
							<image :src="$picUrl+'/static/news/icon-upload.png'" style="height: 96rpx;" mode="">
							</image>
						</view>
					</template>
				</u-upload>
			</view>
			<view style="font-size: 22rpx;color: #999;margin-bottom: 30rpx;">
				仅支持jpg、png、gif、50M以内/个
			</view>
			<view class="form-title">
				营业执照<text style="color: red;">*</text>
			</view>
			<view class="card">
				<u-upload :action="action" :header="header" @on-uploaded="proveSuccess" @on-remove="proveRemove"
					:file-list="proveList" :custom-btn="true" max-count="1">
					<template v-slot:addBtn>
						<view class="card-box">
							<image :src="$picUrl+'/static/news/icon-upload.png'" style="height: 96rpx;" mode="">
							</image>
						</view>
					</template>
				</u-upload>
			</view>
			<view style="font-size: 22rpx;color: #999;margin-bottom: 30rpx;">
				仅支持jpg、png、gif、50M以内/个
			</view>
			<view class="form-title">
				法人手持营业执照<text style="color: red;">*</text>
			</view>
			<view class="card">
				<u-upload :action="action" :header="header" @on-uploaded="proveHoldSuccess" @on-remove="proveholdRemove"
					:file-list="proveList" :custom-btn="true" max-count="1">
					<template v-slot:addBtn>
						<view class="card-box">
							<image :src="$picUrl+'/static/news/icon-upload.png'" style="height: 96rpx;" mode="">
							</image>
						</view>
					</template>
				</u-upload>
			</view>
			<view style="font-size: 22rpx;color: #999;margin-bottom: 30rpx;">
				仅支持jpg、png、gif、50M以内/个
			</view>
			<view class="form-title">
				对公开户名称<text style="color: red;">*</text>
			</view>
			<view class="form-input">
				<input type="text" placeholder="请输入对公开户名称">
			</view>
			<view class="form-title">
				对公账号<text style="color: red;">*</text>
			</view>
			<view class="form-input">
				<input type="text" placeholder="请输入对公账号">
			</view>
			<view class="form-title">
				对公开户行<text style="color: red;">*</text>
			</view>
			<view class="form-input">
				<input type="text" placeholder="请输入对公开户行">
			</view>
			<view class="form-title">
				小程序名称
			</view>
			<view class="form-input">
				<input type="text" placeholder="请输入小程序名称">
			</view>
			<view class="form-title">
				小程序AppId
			</view>
			<view class="form-input">
				<input type="text" placeholder="请输入AppId">
			</view>
			<view class="form-title">
				小程序AppSecret
			</view>
			<view class="form-input">
				<input type="text" placeholder="请输入AppSecret">
			</view>
			<view class="form-title">
				法人电子邮箱
			</view>
			<view class="form-input">
				<input type="text" placeholder="请输入法人电子邮箱">
			</view>
		</view>
		<view class="park-button" @click="nextStep">
			提交
		</view>
	</view>
</template>
<script>
	import * as help from '@/api/help'
	import Config from '@/core/config'
	export default {
		data() {
			return {
				background: {
					background: 'none'
				},
				indexBackgroundImage: 'https://www.amiami.com.cn/static/openShopping.png?t='+1,
				action: '',
				header: '',
				justList: [],
				backList: [],
				holdList: [],
				proveList: [],
				formData:{
					card_just_imgage_ids: [],
					card_back_imgage_ids: [],
					prove_hold_imgage_ids: [],
					prove_imgage_ids: [],
				},
				
			}
		},
		onLoad(options) {
			this.storeInfo = JSON.parse(uni.getStorageSync("storeInfo"));
			console.log(this.storeInfo)
		},
		onShow() {

		},
		onReady() {
			this.action = (Config.get('apiUrl') + 'upload/image').replace("index.php?s=/", "")
			this.header = {
				'Storeid': uni.getStorageSync('Store').storeInfo.store_id,
				'Access-Token': uni.getStorageSync('AccessToken'),
				'platform': "MP-WEIXIN",
			}
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			// 构建页面参数
			// const params = this.$getShareUrlParams()
			// return {
			// 	title: '诚挚邀请，欢迎开通！',
			// 	path: `/pages/news1/MerchantSupplier`
			// }
		},
		methods: {
			toTextPage() {
				uni.navigateTo({
					url: '/pages/news1/text?pageFlag=' + 3
				})
			},
			nextStep() {
				let that = this
				if (that.formData.card_just_imgage_ids.length == 0) {
					uni.showToast({
						title: "请上传身份证正面",
						icon: 'none'
					})
					return
				}
				if (that.formData.card_back_imgage_ids.length == 0) {
					uni.showToast({
						title: "请上传身份证反面",
						icon: 'none'
					})
					return
				}
				if (that.formData.prove_imgage_ids.length == 0) {
					uni.showToast({
						title: "请上传营业执照",
						icon: 'none'
					})
					return
				}
				if (that.formData.prove_hold_imgage_ids.length == 0) {
					uni.showToast({
						title: "请上传手持营业执照",
						icon: 'none'
					})
					return
				}
				let cardId = [that.formData.card_just_imgage_ids, that.formData.card_back_imgage_ids, that
					.formData.prove_hold_imgage_ids
				]
				console.log(cardId)
			},
			// 正面
			cardJustSuccess(list) {
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						let idList = []
						list.forEach(item => {
							idList.push(item.response.data.fileInfo.file_id)
						});
						this.formData.card_just_imgage_ids = idList.join(',');
					}
				}
			},
			cardJustRemove(file, fileList) {
				this.formData.card_just_imgage_ids = this.handleRemove(file, fileList);
			},
			// 反面
			cardBackSuccessve(list) {
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						let idList = []
						list.forEach(item => {
							idList.push(item.response.data.fileInfo.file_id)
						});
						this.formData.card_back_imgage_ids = idList.join(',');
					}
				}
			},
			cardBackRemove(file, fileList) {
				this.formData.card_back_imgage_ids = this.handleRemove(file, fileList);
			},
			// 手持营业执照
			proveHoldSuccess(list) {
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						let idList = []
						list.forEach(item => {
							idList.push(item.response.data.fileInfo.file_id)
						});
						this.formData.prove_hold_imgage_ids = idList.join(',');
					}
				}
			},
			proveholdRemove(file, fileList) {
				this.formData.prove_hold_imgage_ids = this.handleRemove(file, fileList);
			},
			// 营业证
			proveSuccess(list) {
				if (list.length > 0) {
					const {
						response
					} = list[0];
					if (response.status == 200) {
						uni.showToast({
							title: "上传成功"
						})
						let idList = []
						list.forEach(item => {
							idList.push(item.response.data.fileInfo.file_id)
						});
						this.formData.prove_imgage_ids = idList.join(',');
					}
				}
			},
			proveRemove(file, fileList) {
				this.formData.prove_imgage_ids = this.handleRemove(file, fileList);
			},
			handleRemove: function(file, fileList) {
				let idList = []
				fileList.forEach(item => {
					idList.push(item.response.data.fileInfo.file_id)
				});
				return idList.join(',')
			},
		}
	}
</script>
<style>
	page {
		background: #fff;
		width: 100%;
	}
</style>
<style lang="scss" scoped>
	.park {
		overflow: hidden;
		width: 100%;
		background-size: 100% auto;
		min-height: 100vh;
		padding-bottom: 68rpx;
		background-size: cover;

		.park-but {
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			margin: 330rpx 60rpx 110rpx 60rpx;

			.but {
				width: 200rpx;
				background: orange;
				border-radius: 45rpx;
				height: 70rpx;
				text-align: center;
				font-weight: 700;
				font-size: 32rpx;
				color: #fff;
				line-height: 70rpx;
			}
		}

		.park-button {
			width: 630rpx;
			height: 88rpx;
			border-radius: 8rpx;
			margin: 30rpx auto 0 auto;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #fff;
			background: orange;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.forms {
			margin: 0 60rpx;
			overflow: hidden;

			.form-title {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #333;
			}

			.form-input {
				background: #fff;
				border: 1rpx solid mediumpurple;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 24rpx;
				margin: 30rpx 0;
				border-radius: 8rpx;

				input {
					width: 100%;
					height: 100%;
				}
			}

			.card {
				overflow: hidden;
				display: flex;
				justify-content: space-between;
				margin: 30rpx 0 20rpx 0;

				.card-box {
					width: 150rpx;
					height: 150rpx;
					background: #fff;
					border-radius: 16rpx;
					border: 1rpx solid mediumpurple;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 60rpx !important;
						height: 60rpx !important;
					}

					.card-tips {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}
	}
</style>
