<template>
	<view class="container">
		<view class="formlist">
			<u-form :model="form" ref="uFormRef" labelPosition="top" :rules="rules">
				<u-form-item label="姓名" prop="name">
					<u-input v-model="form.name" placeholder="请输入真实姓名" placeholderStyle="color: #D3D3D3;" />
				</u-form-item>
				<u-form-item label="会员标签" prop="member_tag_id">
					<u-input v-model="member_tag_name" placeholder="请选择" placeholderStyle="color: #D3D3D3;" disabled disabledColor="#ffffff"
						suffixIcon="arrow-down" @tap="show=true"/>
					<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show=false"
						keyName="title"></u-picker>
				</u-form-item>
				<u-form-item label="身份类型" prop="identity">
					<u-input v-model="identityname" placeholder="请选择" placeholderStyle="color: #D3D3D3;" disabled disabledColor="#ffffff"
						suffixIcon="arrow-down" @tap="idshow=true" />
					<u-picker :show="idshow" :columns="idcolumns" @confirm="idconfirm"
						@cancel="idshow=false"></u-picker>
				</u-form-item>
				<view class="cardbox" v-if="ishowcommany">
					<view v-for="(group, index) in inputGroups" :key="index" class="input-group">
						<view class="inputs" @click="beforeRead(index)">
							公司性质
							<input class="inputclass" placeholder-class="inputplacla" disabled disabledColor="#ffffff"
								:value="group.type==1 ? '其他(自由职业者等)' : (group.type===2 ? '个体工商户' : (group.type===3 ? '民营企业' : '') )"
								placeholder="民营企业、个体工商户、其它（自由职业者等）" @tap="qyshow = true" />
							<u-action-sheet :actions="qylist" title="请选择关联企业类型" :show="qyshow" @select="qyClick"
								@close="qyshow = false"></u-action-sheet>
							公司名称
							<input class="inputclass" placeholder-class="inputplacla" v-model="group.title"
								placeholder="请输入真实公司名称" />
							营业执照
							<u-upload class="uploadbox" @afterRead="afterRead" :maxCount="1" :imageMode="'heightFix'"
								:width="auto" :height="144">
								<view class="yyzz" v-if="group.license === ''">
									<image style="width: 40rpx;height: 40rpx;" src="@/static/img/yyzz.png" mode="">
									</image>
									上传营业执照
								</view>
								<image v-else @click="beforeRead(index)"
									style="width: 100%;height: 288rpx;margin-top: 12rpx;"
									:src="baseurl+ '/' + group.license" mode="scaleToFill"></image>
							</u-upload>
						</view>
						<view v-if="index > 0" class="remove-btn" @click="removeGroup(index)">-</view>
					</view>
					<button @click="addGroup" class="add-btn">+ 添加一组</button>
				</view>
				<u-form-item label="个人介绍" prop="introduce">
					<u-textarea v-model="form.introduce" autoHeight placeholder="请输入个人介绍"
						placeholderStyle="color: #D3D3D3;"></u-textarea>
				</u-form-item>
				<u-form-item label="个人二维码" prop="wx_code">
					<u-upload class="uploadbox" @afterRead="afterRead1" :maxCount="1" :imageMode="'heightFix'"
						:width="auto" :height="144">
						<view class="yyzz" v-if="form.wx_code === ''">
							<image style="width: 40rpx;height: 40rpx;" src="@/static/img/yyzz.png" mode=""></image>
							请上传可以联系到自己的微信二维码
						</view>
						<image v-else style="width: 100%;height: 600rpx;margin-top: 12rpx;"
							:src="baseurl+ '/' + form.wx_code" mode="scaleToFill"></image>
					</u-upload>
				</u-form-item>
			</u-form>
		</view>
		<view class="sumitbotton">
			<view class="button" @click="submit">
				确认提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		memberTagList,
		memberApply
	} from '@/api/memberCenter'
	import {
		onShow
	} from '@dcloudio/uni-app';

	const baseurl = ref(import.meta.env.VITE_APP_BASE_URL)

	// 响应式表单数据  
	const form = ref({
		name: '',
		member_tag_id: '',
		identity: '',
		introduce: '',
		wx_code: '',
		enterprise: ''
	});

	const member_tag_name = ref('')
	const identityname = ref('')

	const ishowcommany = ref(false)


	const show = ref(false);
	const columns = ref([]);

	const idshow = ref(false);
	const idcolumns = ref([
		[{
				id: 1,
				text: '其他(自由职业者等)'
			},
			{
				id: 2,
				text: '个体工商户'
			},
			{
				id: 3,
				text: '民营企业'
			}
		]
	]);

	// 校验规则  
	const rules = {
		name: [{
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change'],
		}, ],
		// member_tag_id: [{
		// 	required: true,
		// 	message: '请输入标签',
		// 	trigger: ['blur', 'change'],
		// }, ],
		// identity: [{
		// 	required: true,
		// 	message: '请输入身份类型',
		// 	trigger: ['blur', 'change'],
		// }, ],
		introduce: [{
			required: true,
			message: '请输入个人介绍',
			trigger: ['blur', 'change'],
		}, ],
		wx_code: [{
			required: true,
			message: '请上传个人二维码',
			trigger: ['blur', 'change'],
		}, ],
	};

	const inputGroups = ref([{
		type: '',
		title: '',
		license: ''
	}])

	const addGroup = () => {
		inputGroups.value.push({
			type: '',
			title: '',
			license: ''
		})
	}

	const qyshow = ref(false)
	const qylist = ref([{
			id: 1,
			name: '其他(自由职业者等)',
		},
		{
			id: 2,
			name: '个体工商户',
		},
		{
			id: 3,
			name: '民营企业',
		}
	]);
	const qyClick = async (val) => {
		inputGroups.value[upclickindex.value].type = val.id
	}

	const removeGroup = (index) => {
		inputGroups.value.splice(index, 1)
	}

	const upclickindex = ref(0)
	const beforeRead = (index) => {
		upclickindex.value = index
	}

	const afterRead = async (e) => {
		uni.uploadFile({
			url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image',
			filePath: e.file.url,
			name: 'file',
			header: {
				'token': uni.getStorageSync('access_token')
			},
			success: async (val) => {
				if (JSON.parse(val.data).data.url) {
					inputGroups.value[upclickindex.value].license = JSON.parse(val.data).data.url
				}
			},
			fail: (res) => {
				console.log('失败', res);
			}
		})
	}

	const afterRead1 = async (e) => {
		uni.uploadFile({
			url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image',
			filePath: e.file.url,
			name: 'file',
			header: {
				'token': uni.getStorageSync('access_token')
			},
			success: async (val) => {
				if (JSON.parse(val.data).data.url) {
					form.value.wx_code = JSON.parse(val.data).data.url
				}
			},
			fail: (res) => {
				console.log('失败', res);
			}
		})
	}

	// 表单引用  
	const uFormRef = ref(null);

	const confirm = (val) => {
		console.log(val.value[0]);
		member_tag_name.value = val.value[0].title
		form.value.member_tag_id = val.value[0].id
		show.value = false
	}

	const idconfirm = (val) => {
		identityname.value = val.value[0].text
		form.value.identity = val.value[0].id
		idshow.value = false
		if (val.value[0].id === 1) {
			ishowcommany.value = false
		} else {
			ishowcommany.value = true
		}
	}

	// 提交方法  
	function submit() {
		uFormRef.value.validate().then(valid => {
			if (valid) {
				let data = []
				inputGroups.value.forEach((obj) => {
					if (obj.type == '' || obj.title == '' || obj.license == '') {
						uni.showToast({
							title: '请填写完整',
							icon: 'fail'
						})
					} else {
						data.push(obj)
					}
				})
				if (data.length !== 0) {
					form.value.enterprise = JSON.stringify(data)
				}
				if (form.value.member_tag_id === '') {
					uni.showToast({
						title: '请填写会员标签',
						icon: 'fail'
					})
				} else {
					if (form.value.identity === '') {
						uni.showToast({
							title: '请填写身份类型',
							icon: 'fail'
						})
					} else {
						uni.$u.toast('校验通过')
						console.log(form.value);
						memberApply(form.value).then((res) => {
							if(res.code === 1) {
								uni.switchTab({
									url: '/pages/memberCenter/index'
								})
								uni.showToast({
									title: '请等待审核',
									icon: 'success'
								})
							}
						})
					}
				}
			}

		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('请填写完整')
		});
	}

	onShow(async () => {
		await memberTagList().then((res) => {
			columns.value = []
			if (res.code === 1) {
				columns.value.push(res.data)
				console.log(columns.value);
			}
		})
	})
</script>

<style scoped lang="scss">
	.container {
		background-color: #FFFFFF;
		width: 100%;
		height: 100vh;
		overflow-y: hidden;

		.formlist {
			width: 100%;
			max-height: calc(100vh - 168rpx);
			background: #e9ecf3;
			padding: 40rpx;
			box-sizing: border-box;
			overflow-y: auto;

			.cardbox {
				box-sizing: border-box;
			}

			.input-group {
				padding: 40rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				background-color: #e2e2e2;
			}

			.inputs {
				flex: 9;
			}

			input {
				flex: 1;
				height: 80rpx;
				border: 2rpx solid #ddd;
				padding: 0 20rpx;
				margin-right: 10rpx;
			}

			.remove-btn,
			.add-btn {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #f0f0f0;
				border-radius: 8rpx;
			}

			.remove-btn {
				margin-left: 20rpx;
				border-radius: 50%;
				width: 40rpx;
				height: 40rpx;
				color: #ff0000;
				border: 2rpx solid #ff0000;
				display: flex;
				align-items: flex-end;
				justify-content: center;
			}

			.add-btn {
				width: auto;
				padding: 0 30rpx;
				background: #4CAF50;
				color: white;
				margin-bottom: 60rpx;
			}

			.inputclass {
				margin-top: 12rpx;
				margin-bottom: 36rpx;
				margin-right: 0 !important;
				height: 100rpx !important;
				border-radius: 10rpx;
				background: #FFFFFF;
			}

			:deep(.inputplacla) {
				font-family: Source Han Sans;
				font-size: 24rpx;
				font-weight: 350;
				line-height: 32.76rpx;
				letter-spacing: normal;
				color: #D3D3D3;
			}

			.yyzz {
				margin-top: 12rpx;
				width: 100%;
				height: 288rpx;
				border-radius: 16rpx;
				background: #FFFFFF;
				display: grid;
				align-content: center;
				justify-items: center;
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: 350;
				line-height: 70rpx;
				letter-spacing: normal;
				color: #CCCCCC;
			}

			:deep(.u-upload) {
				.u-upload__wrap {
					view {
						width: 100%;
					}
				}
			}
		}

		.sumitbotton {
			width: 100%;
			height: 168rpx;
			background: #FFFFFF;
			/* 标签栏投影 */
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;

			.button {
				width: 574rpx;
				height: 96rpx;
				border-radius: 248rpx;
				background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Source Han Sans;
				font-size: 36rpx;
				font-weight: 350;
				line-height: 32rpx;
				text-align: justify;
				/* 浏览器可能不支持 */
				display: flex;
				align-items: center;
				letter-spacing: normal;
				color: #FFFFFF;
			}
		}
	}

	.yyzz {
		margin-top: 12rpx;
		width: 100%;
		height: 288rpx;
		border-radius: 16rpx;
		background: #FFFFFF;
		display: grid;
		align-content: center;
		justify-items: center;
		font-family: Source Han Sans;
		font-size: 30rpx;
		font-weight: 350;
		line-height: 70rpx;
		letter-spacing: normal;
		color: #CCCCCC;
	}

	:deep(.u-upload) {
		.u-upload__wrap {
			view {
				width: 100%;
			}
		}
	}
</style>
<style>
	.u-input {
		background-color: #FFFFFF;
		height: 100rpx !important;
	}

	.u-form-item__body__left__content__label {
		white-space: nowrap;
	}
</style>