<script setup>
	/**
	 * 商家入驻
	 * 进入页面获取最新的数据 如果发生变化 同步用户信息
	 * 1 待申请 显示入驻须知 是否缴纳押金
	 * 2 已申请/待审核 已缴纳押金并且提交表单
	 * 3 审核驳回 可选择取消押金 或 修改表单内容继续提交审核
	 * 4 审核成功 已成为商家 可选择取消商家身份 拿回押金 修改店铺信息重新提交审核
	 */
	import {
		ref,
		reactive
	} from 'vue';
	import durianapi from '@/api/durian.js';
	// 工具裤脚
	import util from '@/common/js/util.js'
	// 表单
	const form = reactive({
		shopHeader: '',
		shopName: '',
		contact: '',
		productLocation: '',
		productCategory: '',
		customer: '',
		idcard: '',
		idcard2: '',
		businessLicense: [],
		status: 3
	})
	// 当前模式 notice入驻须知 wait审核中 fail驳回 form表单 success成功
	const mode = ref('notice')
	// 测试文本
	const text = ref(
		`<p>会员可选择从九亿平台入驻申请成为商家</p><br><p>1. 押金，在成为商家前需要先缴纳押金才可以申请成为商家，如果不想成为商家，可以选择退回押金取消商家分身，如果作为商家并且有进行中的订单，则需要等待订单完成才可以进行退回押金。</p><br><p>2. 申请，填写商家身份信息，商家头像，名称，联系方式，发货地点，商品分类，负责人身份信息作为材料申请，需经过九亿平台审核，才可以选择成为商家。</p><br><p>3. 审核，为保护平台公平性竞争，创造美好合作共赢的平台，九亿有权对您提交的店铺信息，发布的商品信息做审核，驳回，下架等行为，并且会及时通知到会员。</p><p>会员通过审核成为商家后，仍可以对自己的店铺信息做修改，并且平台会重新审核您的店铺信息，不得允许虚假等不良行为出现。</p><br><p>4. 商品，成为商家后，会员可以选在在平台发布自己的商品，可以发布视频对自己的商品做链接并进行投流推广，别人浏览到您的视频，可以选择点赞，评论等行为，增加您的视频热度，也可以通过收藏您的视频，对您的视频进行投流推广，让您的商品和视频可以受到更多人的关注，请会员尽情发挥想法，让自己的视频内容更受欢迎</p><br><p>5. 钱包，商家的商品产生订单后，其他会员付款会产生待入账的资金和榴莲果到您的钱包，当订单取消或平台申诉退款等行为，您的待入账的资产会原路退回到该订单用户中，当您的订单结束，已完成且无售后问题，您订单对应的待入账的信息将会进入到进的钱包中</p><br><p>6. 客服，您可以选择联系九亿平台咨询您想了解的任何问题，也可以通过消息联系用户通过店铺发起的订单咨询，以便于您更好的了解平台以及和其他会员的联系。</p><br><p>7. 运营，为保证平台公平、公正、公开，平台会不定期的复查，审核您的商户信息，请会员完善正确的信息，不得出现虚假，欺骗，等不良行为对平台或其他会员造成损失，否则平台有权对您的行为做出对应的行为。</p><p>平台会不定期更新商户的规则，请会员及时阅读。</p><br><p>平台祝每一位会员生活美满~</p>`
		)

	/**
	 * 上传图片
	 * @param {String} key 键值
	 * @param {String} type 类型 1单 2多
	 */
	function uploadImg(key, type) {
		util.upload_image({
			value: form[key],
			type: type || 1,
			success: rs => {
				// 根据条件追加
				if (type != 2) form[key] = rs.value
			}
		})
	}

	/**
	 * 移除文件
	 * @param {Number} index 下标
	 * @param {String} key 键
	 */
	function removeMedia(index, key) {
		util.alert({
			content: '确认删除？',
		}).then(rs => {
			if (rs.confirm) form[key].splice(index, 1)
		})
	}

	// 提交
	function handleSubmit() {
		const data = {
			...form
		}

		// 验证必填项
		if (!data.shopHeader) {
			util.alert('商家头像不能为空')
			return
		}
		if (!data.shopName) {
			util.alert('商家名称不能为空')
			return
		}
		if (!data.contact) {
			util.alert('联系方式不能为空')
			return
		}
		if (!data.productLocation) {
			util.alert('产品所在地不能为空')
			return
		}
		if (!data.productCategory) {
			util.alert('产品类别不能为空')
			return
		}
		if (!data.customer) {
			util.alert('客服电话不能为空')
			return
		}
		if (!data.businessLicense[0]) {
			util.alert('营业执照不能为空')
			return
		}
		if (!data.idcard) {
			util.alert('身份证正面不能为空')
			return
		}
		if (!data.idcard2) {
			util.alert('身份证反面不能为空')
			return
		}

		// 格式化
		data.shopHeader = util.replace_url(data.shopHeader)
		data.businessLicense = data.businessLicense.map(node => {
			return util.replace_url(node)
		}).join(',')
		data.idcard = util.replace_url(data.idcard)
		data.idcard2 = util.replace_url(data.idcard2)

		durianapi.shopApply({
			data: {
				shopHeader: data.shopHeader,
				shopName: data.shopName,
				contact: data.contact,
				productLocation: data.productLocation,
				productCategory: data.productCategory,
				customer: data.customer,
				idcard: data.idcard,
				idcard2: data.idcard2,
				businessLicense: data.businessLicense,
				status: 3
			}
		}).then(rs => {
			if (rs.code === 200) {
				util.alert({
					content: '资料已申请，请等待后台审核',
					showCancel: false,
				}).then(rs => {
					uni.navigateBack()
				})
			} else {
				util.alert({
					content: rs.msg,
					showCancel: false,
				})
			}
		})
	}
</script>

<template>
	<!-- 须知 -->
	<template v-if="mode == 'notice'">
		<view class="app">
			<view class="notice oh mtb30 mlr30 plr30 ptb20 bfff br20">
				<view class="title tac f34 c333 b">商家入驻须知</view>
				<view class="content mtb50">
					<rich-text :nodes="text"></rich-text>
				</view>
			</view>

			<view class="tac c666 f28">继续即代表同意《商家入驻须知》</view>

			<view class="fill" style="height: 160rpx;"></view>

			<view class="footer plr30 bfff shadow">
				<!-- 未缴纳押金 -->
				<template v-if="0">
					<view class="btn black">缴纳押金</view>
				</template>
				<template v-else>
					<view class="rows">
						<view class="btn cancel plr30">退回押金</view>
						<view class="btn colourful f1" @click="mode = 'form'">申请入驻</view>
					</view>
				</template>
			</view>
		</view>
	</template>

	<!-- 审核中 -->
	<template v-else-if="mode == 'wait'">
		<view class="app">
			<view class="result ver">
				<uni-icons type="checkbox-filled" color="#20D200" size="160rpx" />
				<view class="title mtb30 f34">申请中</view>
				<view class="value f30">
					<text class="c333">提交成功，请等待后台审核</text>
				</view>
			</view>

			<view class="fill" style="height: 160rpx;"></view>

			<view class="footer rows plr30 bfff shadow">
				<view class="btn cancel f1">取消申请并退回押金</view>
			</view>
		</view>
	</template>

	<!-- 审核驳回 -->
	<template v-else-if="mode == 'fail'">
		<view class="app">
			<view class="result ver">
				<uni-icons type="clear" color="#ff0000" size="160rpx" />
				<view class="title mtb30 f34">审核驳回</view>
				<view class="value f30">
					<text class="c666">驳回原因：</text>
					<text class="c333">身份证照片不清晰</text>
				</view>
				<view class="reject mtb30 c666 f28">
					<view>驳回结果异议？ 可在个人中心-设置里面联系我们</view>
				</view>
			</view>

			<view class="fill" style="height: 160rpx;"></view>

			<view class="footer rows plr30 bfff shadow">
				<view class="btn cancel plr30">退回押金</view>
				<view class="btn colourful f1" @click="mode = 'form'">修改信息</view>
			</view>
		</view>
	</template>

	<!-- 申请成功 -->
	<template v-else-if="mode == 'success'">
		<view class="app">
			<view class="result ver">
				<uni-icons type="checkbox-filled" color="#20D200" size="160rpx" />
				<view class="title mtb30 f34">恭喜您，您已成为商家</view>
			</view>

			<!-- <view class="menu oh mtb30 mlr30 plr20 c333 f30 bfff br10">
				<view class="line rows">
					<view class="key">商家主页</view>
					<uni-icons type="right"></uni-icons>
				</view>

				<view class="line rows">
					<view class="key">发布产品</view>
					<uni-icons type="right"></uni-icons>
				</view>

				<view class="line rows">
					<view class="key">修改信息</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view> -->
		</view>
	</template>

	<!-- 表单申请 -->
	<template v-else-if="mode == 'form'">
		<view class="appbw plr30">
			<!-- 头像 -->
			<view class="avatarBox ver mt50">
				<view class="avatar oh pr wh220 br20" @click="uploadImg('shopHeader')">
					<image class="img br20" :src="form.shopHeader" mode="aspectFill" v-if="form.shopHeader" />
					<view class="pfull fmid" v-else>
						<uni-icons type="plusempty" color="#999" size="80rpx" />
					</view>
				</view>
				<view class="name mt20 c666 f24">店铺头像</view>
			</view>

			<!-- 表单 -->
			<view class="form mt60 c333 f32">
				<view class="title  f36">我的资料</view>

				<view class="item rows ptb20">
					<view class="key c666">店铺名称</view>
					<view class="value f1 ml20 tar">
						<input v-model="form.shopName" type="text" placeholder="请输入店铺名称" />
					</view>
				</view>

				<view class="item rows ptb20">
					<view class="key c666">联系方式</view>
					<view class="value f1 ml20 tar">
						<input v-model="form.contact" type="text" placeholder="请输入联系方式" />
					</view>
				</view>

				<view class="item rows ptb20">
					<view class="key c666">产品所在地</view>
					<view class="value f1 ml20 tar">
						<input v-model="form.productLocation" type="text" placeholder="请选择产品所在地" />
					</view>
				</view>

				<view class="item rows ptb20">
					<view class="key c666">产品类别</view>
					<view class="value f1 ml20 tar">
						<input v-model="form.productCategory" type="text" placeholder="请选择产品类别" />
					</view>
				</view>

				<view class="item rows ptb20">
					<view class="key c666">客服联系电话</view>
					<view class="value f1 ml20 tar">
						<input v-model="form.customer" type="text" placeholder="请输入客服联系电话" />
					</view>
				</view>

				<view class="item ptb20">
					<view class="key c666">营业执照</view>
					<view class="value imgList f1 mt20 tar">
						<view class="imgs wh200" v-for="(item, index) in form.businessLicense" :key="index">
							<image class="img br10" :src="item" mode="aspectFill" />
							<view class="close" @click="removeMedia(index,'businessLicense')">
								<uni-icons type="clear" size="50rpx" color="#f00" />
							</view>
						</view>
						<view class="upload imgs fmid wh200 br10" @click="uploadImg('businessLicense',2)">
							<uni-icons type="plusempty" color="#E8E8E8" size="80rpx" />
						</view>
					</view>
				</view>

				<view class="item ptb20">
					<view class="key c666">身份证正面</view>
					<view class="value imgList f1 mt20 tar">
						<view class="imgs wh200" v-if="form.idcard" @click="uploadImg('idcard',1)">
							<image class="img br10" :src="form.idcard" mode="aspectFill" />
						</view>
						<view class="upload imgs fmid wh200 br10" v-else @click="uploadImg('idcard',1)">
							<uni-icons type="plusempty" color="#E8E8E8" size="80rpx" />
						</view>
					</view>
				</view>

				<view class="item ptb20">
					<view class="key c666">身份证反面</view>
					<view class="value imgList f1 mt20 tar">
						<view class="imgs wh200" v-if="form.idcard2" @click="uploadImg('idcard2')">
							<image class="img br10" :src="form.idcard2" mode="aspectFill" />
						</view>
						<view class="upload imgs fmid wh200 br10" v-else @click="uploadImg('idcard2')">
							<uni-icons type="plusempty" color="#E8E8E8" size="80rpx" />
						</view>
					</view>
				</view>

			</view>
			<view class="fill" style="height: 150rpx;"></view>
		</view>

		<view class="footer plr30 bfff shadow">
			<view class="rows">
				<view class="btn cancel plr30">退回押金</view>
				<view class="btn colourful f1" @click="handleSubmit">申请入驻</view>
			</view>
		</view>

	</template>

</template>

<style lang="scss">
	.img {
		width: 100%;
		height: 100%;
	}

	// 头像
	.avatar {
		background-color: #F6F8FE;
	}

	// 上传
	.upload {
		background-color: #f4f4ff;
	}

	// 审核结果
	.result {
		margin-top: 30rpx;
		padding: 50rpx 0;
		background-color: #fff;
	}

	// 发布
	.menu {
		.line {
			padding: 20rpx 10rpx;

			&+.line {
				border-top: 2rpx solid #eee;
			}
		}
	}
</style>