<script setup>
	/**
	 * 商家入驻
	 */
	import {
		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
	})

	/**
	 * 上传图片
	 * @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>
	<view class="appbw plr30">
		<!-- 头像 -->
		<view class="avatarBox ver mt50">
			<view class="avatar oh pr wh220 cir" @click="uploadImg('shopHeader')">
				<image class="cir" :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="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="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="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: 120rpx;"></view>
	</view>

	<view class="footer plr60 bfff shadow">
		<view class="btn lg colourful bar" @click="handleSubmit">提交</view>
	</view>
</template>

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

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

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