<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-title">
			诚招优质正品货源商家 入驻 <text style="color: #222;">{{storeInfo.store_name}}</text>
		</view>
		<view class="park-tips">
			<view class="park-dui">
				<image :src="$picUrl+'/static/shangjia/march.png'" mode=""></image>
				<text>商品极速推广</text>
			</view>
			<view class="park-dui">
				<image :src="$picUrl+'/static/shangjia/march.png'" mode=""></image>
				<text>商品极速推广</text>
			</view>
			<view class="park-dui">
				<image :src="$picUrl+'/static/shangjia/march.png'" mode=""></image>
				<text>商品极速推广</text>
			</view>
		</view>
		<view class="park-explain">
			<view class="title">
				入驻说明
			</view>
			<view class="content">
				<view class="box">
					<view class="box-img">
						<image :src="$picUrl+'/static/shangjia/describe_1.png'" style="width: 66rpx;height: 55rpx;" mode="">
						</image>
					</view>
					<view class="name">
						诚招对象
					</view>
					<view class="describe">
						具有稳定商品库存，能全国或者
						区域一件代发，快速出单号
					</view>
				</view>
				<view class="box">
					<view class="box-img">
						<image :src="$picUrl+'/static/shangjia/describe_2.png'" style="width: 77rpx;height: 68rpx;" mode="">
						</image>
					</view>
					<view class="name">
						入驻要求
					</view>
					<view class="describe">
						品牌工厂、授权代理、电商平台
						（有货或有优质上游资源皆可）的复位
					</view>
				</view>
				<view class="box">
					<view class="box-img">
						<image :src="$picUrl+'/static/shangjia/describe_3.png'" style="width: 94rpx;height: 90rpx;" mode="">
						</image>
					</view>
					<view class="name">
						合作品类
					</view>
					<view class="describe">
						大小家电、建材家具、智能家居
						灯饰卫浴、家纺布艺、电子教育
						网红礼品、电脑办公、收集表环
						个护清洁、美妆护肤、运动户外
					</view>
				</view>
				<view class="box">
					<view class="box-img">
						<image :src="$picUrl+'/static/shangjia/describe_4.png'" style="width:84rpx;height: 58rpx;" mode="">
						</image>
					</view>
					<view class="name">
						入驻要求
					</view>
					<view class="describe">
						平台拥有注册用户超10万，合作的私域电商平台超1000家，流量裂变能力强
					</view>
				</view>
			</view>
		</view>
		<view class="park-explain">
			<view class="title">
				新商专享
			</view>
			<view class="park-new">
				<view class="new">
					<image style="height: 64rpx;" :src="$picUrl+'/static/shangjia/describe_one.png'" mode=""></image>
					<view class="name">
						流量加权扶持
					</view>
					<view class="describe">
						0门槛报名营销 活动推广
					</view>
				</view>
				<view class="new">
					<image style="height: 64rpx;" :src="$picUrl+'/static/shangjia/describe_two.png'" mode=""></image>
					<view class="name">
						流量加权扶持
					</view>
					<view class="describe">
						0门槛报名营销 活动推广
					</view>
				</view>
				<view class="new">
					<image style="height: 64rpx;" :src="$picUrl+'/static/shangjia/describe_there.png'" mode=""></image>
					<view class="name">
						流量加权扶持
					</view>
					<view class="describe">
						0门槛报名营销 活动推广
					</view>
				</view>
			</view>
		</view>
		<view class="park-card">
			<view class="title">
				<text style="color: #FF1F1F;font-size: 28rpx;">*</text>身份证照
			</view>
			<view class="tips">
				请上传真实有效、清晰无遮挡身份证照片！
			</view>
			<view class="card">
				<u-upload :action="action" :header="header" @on-uploaded="cardJustSuccess" @on-remove="cardJustRemove"
					:file-list="justList" :custom-btn="true" max-count="1">
					<template v-slot:addBtn>
						<view class="card-box">
							<image :src="$picUrl+'/static/shangjia/describe_photo.png'" style="height: 96rpx;" mode="">
							</image>
							<view class="card-tips">
								身份证正面
							</view>
						</view>
					</template>
				</u-upload>
				<u-upload :action="action" :header="header" @on-uploaded="cardBackSuccessve" @on-remove="cardBackRemove"
					:file-list="backList" :custom-btn="true" max-count="1">
					<template v-slot:addBtn>
						<view class="card-box">
							<image :src="$picUrl+'/static/shangjia/describe_photo.png'" style="height: 96rpx;" mode="">
							</image>
							<view class="card-tips">
								身份证反面
							</view>
						</view>
					</template>
				</u-upload>
				<u-upload :action="action" :header="header" @on-uploaded="cardHoldSuccess" @on-remove="cardholdRemove"
					:file-list="holdList" :custom-btn="true" max-count="1">
					<template v-slot:addBtn>
						<view class="card-box">
							<image :src="$picUrl+'/static/shangjia/describe_photo.png'" style="height: 96rpx;" mode="">
							</image>
							<view class="card-tips">
								手持身份证
							</view>
						</view>
					</template>
				</u-upload>
			</view>
		</view>
		<view class="park-card">
			<view class="title">
				<text style="color: #FF1F1F;font-size: 28rpx;">*</text>营业执照
			</view>
			<view class="tips">
				请上传真实有效、清晰无遮挡营业执照！
			</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/shangjia/describe_photo.png'" style="height: 96rpx;" mode="">
							</image>
							<view class="card-tips">
								营业执照
							</view>
						</view>
					</template>
				</u-upload>

			</view>
		</view>
		<view class="agreement">
			<u-checkbox active-color="#08CC57" v-model="isCheckout" style="margin-right: -20rpx"></u-checkbox>
			已阅读并同意<text @click="toTextPage(1)">《商家入驻协议》</text>
		</view>
		<view class="park-button" @click="nextStep">
			下一步
		</view>
		<addShuiyin />
	</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/shangjia/supplier_bg.png',
				action: '',
				header: '',
				justList: [],
				backList: [],
				holdList: [],
				proveList: [],
				card_just_imgage_ids: [],
				card_back_imgage_ids: [],
				card_hold_imgage_ids: [],
				prove_imgage_ids: [],
				isCheckout: false,
				storeInfo:''
			}
		},
		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",
			}
		},
		methods: {
			toTextPage() {
				uni.navigateTo({
					url: '/pages/news1/text?pageFlag=' + 3
				})
			},
			nextStep() {
				let that = this
				if (that.card_just_imgage_ids.length == 0) {
					uni.showToast({
						title: "请上传身份证正面",
						icon: 'none'
					})
					return
				}
				if (that.card_back_imgage_ids.length == 0) {
					uni.showToast({
						title: "请上传身份证反面",
						icon: 'none'
					})
					return
				}
				if (that.card_hold_imgage_ids.length == 0) {
					uni.showToast({
						title: "请上传手持身份证照片",
						icon: 'none'
					})
					return
				}
				if (that.prove_imgage_ids.length == 0) {
					uni.showToast({
						title: "请上传营业执照",
						icon: 'none'
					})
					return
				}
				if (!this.isCheckout) {
					uni.showToast({
						title: "请阅读商家入驻协议",
						icon: 'none'
					})
					return
				}
				let cardId = [that.card_just_imgage_ids, that.card_back_imgage_ids,that
					.card_hold_imgage_ids
				]
				console.log(cardId)
				uni.navigateTo({
					url: '/pages/news1/MerchantSettlement?cardId=' + encodeURIComponent(cardId) + '&business=' + encodeURIComponent(that.prove_imgage_ids)
				})
			},
			// 正面
			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.card_just_imgage_ids = idList.join(',');
					}
				}
			},
			cardJustRemove(file, fileList) {
				this.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.card_back_imgage_ids = idList.join(',');
					}
				}
			},
			cardBackRemove(file, fileList) {
				this.card_back_imgage_ids = this.handleRemove(file, fileList);
			},
			// 手持
			cardHoldSuccess(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.card_hold_imgage_ids = idList.join(',');
					}
				}
			},
			cardholdRemove(file, fileList) {
				this.card_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.prove_imgage_ids = idList.join(',');
					}
				}
			},
			proveRemove(file, fileList) {
				this.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-title {
			padding: 40rpx 98rpx 24rpx 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 56rpx;
			color: #002280;
			line-height: 80rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.park-tips {
			display: flex;
			justify-content: space-between;
			padding: 0 50rpx 40rpx 48rpx;

			.park-dui {
				display: flex;
				overflow: hidden;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #002280;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}

		.park-button {
			width: 686rpx;
			height: 88rpx;
			background: #D9E8FF;
			border-radius: 44rpx;
			margin: 32rpx auto 0 auto;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #002280;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.agreement {
			font-size: 24rpx;
			font-weight: 400;
			color: #222222;
			margin-left: 48rpx;

			text {
				color: #999;
			}

			::v-deep .u-checkbox__icon-wrap--square {
				border-radius: 50% !important;
				width: 17px !important;
				height: 17px !important;
			}
		}

		.park-card {
			overflow: hidden;
			background: #fff;
			border-radius: 16rpx;
			margin: 24rpx 32rpx 24rpx 32rpx;
			padding: 24rpx 16rpx;

			.card {
				overflow: hidden;
				display: flex;
				justify-content: space-between;

				.card-box {
					width: 202rpx;
					height: 192rpx;
					padding-top: 24rpx;
					background: #EEEEEE;
					border-radius: 16rpx;

					image {
						display: block;
						width: 96rpx !important;
						width: 96rpx !important;
						margin: 0rpx auto 16rpx auto;
					}

					.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;
					}
				}
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.tips {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FF1F1F;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin: 8rpx 0 40rpx 0;
			}
		}

		.park-explain {
			overflow: hidden;
			background: #fff;
			border-radius: 16rpx;
			margin: 0 32rpx 24rpx 32rpx;

			.title {
				text-align: center;
				height: 104rpx;
				width: 100%;
				line-height: 104rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #222222;
				font-style: normal;
				text-transform: none;
			}

			.park-new {
				overflow: hidden;
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0 40rpx 0;

				.new {
					overflow: hidden;

					image {
						display: block;
						margin: 0 auto;
						width: 64rpx !important;
						width: 64rpx !important;
					}

					.name {
						padding: 0 30rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #002280;
						text-align: center;
						font-style: normal;
						text-transform: none;
						margin: 16rpx 0;
						overflow: hidden;
						/* 确保内容超出容器时会被隐藏 */
						display: -webkit-box;
						/* 作为弹性伸缩盒子模型显示 */
						-webkit-line-clamp: 1;
						/* 限制在两行 */
						-webkit-box-orient: vertical;
						/* 垂直排列盒子 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						white-space: normal;
						/* 使用正常的白空格处理方式，允许换行 */
					}

					.describe {
						padding: 0 30rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
						line-height: 32rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}
			}

			.content {
				overflow: hidden;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.box {
					overflow: hidden;
					width: calc(50% - 64rpx);
					padding: 0 32rpx 40rpx 32rpx;

					.box-img {
						width: 100%;
						height: 90rpx;

						image {
							display: block;
							margin: 0 auto;
						}
					}

					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #222222;
						text-align: center;
						font-style: normal;
						text-transform: none;
						margin: 20rpx 0 16rpx 0;
						overflow: hidden;
						/* 确保内容超出容器时会被隐藏 */
						display: -webkit-box;
						/* 作为弹性伸缩盒子模型显示 */
						-webkit-line-clamp: 1;
						/* 限制在两行 */
						-webkit-box-orient: vertical;
						/* 垂直排列盒子 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						white-space: normal;
						/* 使用正常的白空格处理方式，允许换行 */
					}

					.describe {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #222222;
						line-height: 32rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}
	}
</style>
