<template>
	<view class="container">
		<view class="formlist">
			<u-form :model="form" ref="uFormRef" label-position="top" :rules="rules">
				<u-form-item label="用户身份" prop="member_tag_name">
					<u-input v-model="form.member_tag_name" placeholder="请选择" placeholderStyle="color: #D3D3D3;"
						disabled disabled-color="#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="form.identity===1?'会员代表姓名':(form.identity===2?'会员代表姓名':(form.identity===5?'姓名':'联系人'))"
					prop="contact">
					<u-input v-model="form.contact" placeholder="请输入" placeholder-style="color: #D3D3D3;" />
				</u-form-item>
				<u-form-item
					:label="form.identity===1?'会员代表电话':(form.identity===2?'会员代表电话':(form.identity===5?'电话':'联系电话'))"
					prop="tel">
					<u-input v-model="form.tel" placeholder="请输入" placeholder-style="color: #D3D3D3;" />
				</u-form-item>
				<u-form-item label="单位名称" prop="title" v-if="form.identity!==5">
					<u-input v-if="form.identity===3" v-model="form.title" placeholder="请选择"
						placeholderStyle="color: #D3D3D3;" disabled disabled-color="#ffffff" suffixIcon="arrow-down"
						@tap="dwshow = true" />
					<u-picker v-if="form.identity===3" :show="dwshow" :columns="dwcolumns" @confirm="dwconfirm"
						@cancel="dwshow = false"></u-picker>
					<u-input v-if="form.identity!==3" v-model="form.title" placeholder="请输入"
						placeholder-style="color: #D3D3D3;" />
				</u-form-item>
				<u-form-item label="行业" prop="industry" v-if="form.identity===1||form.identity===2">
					<u-input v-model="form.industry" placeholder="请输入" placeholder-style="color: #D3D3D3;" />
				</u-form-item>
				<u-form-item label="地址" prop="address" v-if="form.identity===4">
					<u-input v-model="form.address" placeholder="请选择" placeholderStyle="color: #D3D3D3;" disabled
						disabled-color="#ffffff" suffixIcon="arrow-down" @tap="dzshow = true" />
					<u-cascader :show="dzshow" v-model="dzvalue" :data="dzcolumns" @confirm="dzconfirm"
						@close="dzshow = false"></u-cascader>
				</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="business_license" v-if="form.identity===1||form.identity===2">
					<u-upload class="uploadbox" @afterRead="afterRead1" :maxCount="1" :imageMode="'heightFix'"
						:width="auto" :height="144">
						<view class="yyzz" v-if="form.business_license === ''">
							<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.business_license" 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,
		xhMemberImprove
	} from '@/api/memberCenter'
	import {
		onShow
	} from '@dcloudio/uni-app';
	import ssqdata from './slpace.json'

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

	const uPickerRef = ref(null)


	// 响应式表单数据  
	const form = ref({
		mobile: '',
		member_tag_name: '',
		contact: '',
		tel: '',
		title: '',
		identity: '',
		address: '',
		industry: '',
		business_license: ''
	});

	const identityname = ref('')

	const ishowcommany = ref(false)

	const show = ref(false);
	const columns = ref([{
			id: 1,
			title: '个体私营企业'
		},
		{
			id: 2,
			title: '个体工商户'
		},
		{
			id: 3,
			title: '理事单位'
		},
		{
			id: 4,
			title: '商协会'
		},
		{
			id: 5,
			title: '自然人'
		},
		{
			id: 6,
			title: '其他单位'
		}
	]);


	const dwshow = ref(false);
	const dwcolumns = ref([
		[{
				id: '内蒙古自治区党委统战部',
				text: '内蒙古自治区党委统战部'
			},
			{
				id: '内蒙古自治区民营经济发展服务局',
				text: '内蒙古自治区民营经济发展服务局'
			},
			{
				id: '内蒙古自治区工业和信息化厅',
				text: '内蒙古自治区工业和信息化厅'
			},
			{
				id: '内蒙古自治区司法厅',
				text: '内蒙古自治区司法厅'
			},
			{
				id: '内蒙古自治区人力资源和社会保障厅',
				text: '内蒙古自治区人力资源和社会保障厅'
			},
			{
				id: '内蒙古自治区退役军人事务厅',
				text: '内蒙古自治区退役军人事务厅'
			},
			{
				id: '内蒙古自治区药品监督管理局',
				text: '内蒙古自治区药品监督管理局'
			},
			{
				id: '国家税务总局内蒙古自治区税务局',
				text: '国家税务总局内蒙古自治区税务局'
			},
			{
				id: '内蒙古自治区工商业联合会',
				text: '内蒙古自治区工商业联合会'
			}
		]
	]);
	const dzshow = ref(false);
	const dzvalue = ref(['内蒙古自治区'])
	const dzcolumns = ref([ssqdata]);

	// 校验规则  
	const rules = {
		contact: [{
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change'],
		}, ],
		tel: [{
			required: true,
			message: '请输入电话',
			trigger: ['blur', 'change'],
		}, ],
		title: [{
			required: true,
			message: '请输入单位名称',
			trigger: ['blur', 'change'],
		}, ],
		industry: [{
			required: true,
			message: '请输入行业',
			trigger: ['blur', 'change'],
		}, ],
		member_tag_name: [{
			required: true,
			message: '请选择身份类别',
			trigger: ['blur', 'change'],
		}, ],
		address: [{
			required: true,
			message: '请选择地址',
			trigger: ['blur', 'change'],
		}, ],
		business_license: [{
			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.business_license = JSON.parse(val.data).data.url
				}
			},
			fail: (res) => {
				console.log('失败', res);
			}
		})
	}

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

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

	const dwconfirm = (val) => {
		form.value.title = val.value[0].id
		dwshow.value = false
	}

	const dzconfirm = (val) => {
		console.log(val);
		form.value.address = val[1] + '-' + val[2]
		dzshow.value = false
	}


	// 提交方法  
	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)
				// 	}
				// })
				uni.$u.toast('校验通过')
				delete form.value.member_tag_name
				console.log(form.value);
				xhMemberImprove(form.value).then((res) => {
					if (res.code === 1) {
						uni.switchTab({
							url: '/pages/memberCenter/index'
						})
						uni.showToast({
							title: '请等待审核',
							icon: 'success',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'fail',
							duration: 2000
						})
					}
				})
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('请填写完整')
		})
	}
	

	onLoad(async (e) => {
		form.value.mobile = e.number
	})
</script>

<style scoped lang="scss">
	.container {
		background-color: #e9ecf3;
		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: #007fff;
				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>