<template>
	<view class="wrap">
		<view class="form">
			<u--form :model="form" ref="uForm" labelWidth="80">
				<!-- 企业名称 -->
				<u-form-item label="企业名称" prop="name" borderBottom>
					<u-input v-model="form.name" border="none" placeholder="请输入" />
				</u-form-item>
				<!-- 企业类型 -->
				<u-form-item label="企业类型" prop="type" borderBottom @tap="showType = true;">
					<u--input v-model="form.type" placeholder="请选择" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<!-- 企业地址 -->
				<u-form-item label="企业地址" prop="addr" borderBottom>
					<u-input v-model="form.addr" border="none" placeholder="请输入" />
				</u-form-item>
				<!-- 企业简介 -->
				<u-form-item label="企业简介" prop="info" borderBottom>
					<u--textarea v-model="form.info" placeholder="请输入" border="none" count="true"></u--textarea>
				</u-form-item>
				<!-- 企业照片 -->
				<u-form-item label="企业照片" borderBottom>
					<u-upload :fileList="form.photo" @afterRead="addPhoto" @delete="delPhoto" multiple
						:maxCount="6"></u-upload>
				</u-form-item>
				<!-- 环保负责人 -->
				<u-form-item label="环保负责人" prop="manager" borderBottom>
					<u-input v-model="form.manager" border="none" placeholder="请输入" />
				</u-form-item>
				<!-- 联系方式 -->
				<u-form-item label="联系方式" prop="phone" borderBottom>
					<u-input v-model="form.phone" border="none" placeholder="请输入" />
				</u-form-item>

				<!-- 成立时间 -->
				<u-form-item label="成立时间" prop="regtime" borderBottom @tap="showRegtime = true">
					<u-datetime-picker :show="showRegtime" v-model="defTime" mode="date" @confirm="regtime"
						@cancel="showRegtime = false"></u-datetime-picker>
					<u-input :value="form.regtime" border="none" placeholder="请输入" />
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>


				<u-form-item label="zzlx" prop="hblicense" borderBottom labelPosition="top">
					<u-input v-model="form.hblicense" border="none" placeholder="请输入" />
				</u-form-item>

				<u-form-item label="bh" prop="pwlicense" borderBottom labelPosition="top">
					<u-input v-model="form.pwlicense" border="none" placeholder="请输入" />
				</u-form-item>

				<u-form-item label="bh" prop="pwlicense" borderBottom labelPosition="top">
					<u-input v-model="form.pwlicense" border="none" placeholder="请输入" />
				</u-form-item>


			</u--form>

			<!-- <view v-if='isEdit'>
				<view class="" v-for="zz in zzlist" :key="zz.uid" @tap="edit(zz)">
					<view class="">
						<label for="">zzlx</label><text>{{zz.zzlx}}</text>
					</view>
				</view>
			</view> -->

			<!-- <u--form :model="zzform" v-else>
				
		
				<u-form-item label="zzlx" prop="hblicense" borderBottom labelPosition="top">
					<u-input v-model="form.hblicense" border="none" placeholder="请输入" />
				</u-form-item>
		
				<u-form-item label="bh" prop="pwlicense" borderBottom labelPosition="top">
					<u-input v-model="form.pwlicense" border="none" placeholder="请输入" />
				</u-form-item>
				<u-form-item label="sj" prop="pwlicense" borderBottom labelPosition="top">
					<u-input v-model="form.pwlicense" border="none" placeholder="请输入" />
				</u-form-item>
				<u-form-item>
					<button @tap='savazz'>save</button>
				</u-form-item>
			</u--form> -->

			<u-action-sheet :show="showType" :actions="types" title="请选择企业类型" @close="showType = false"
				@select="typeSelect">
			</u-action-sheet>

		</view>
		<u-button @tap="submit">提交</u-button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '', // 企业名称
					type: '', // 企业类型
					info: '', // 企业地址
					addr: '', // 企业简介
					photo: [], // 企业照片
					manager: '', // 环保负责人
					phone: '', // 联系方式
					regtime: '', // 成立时间
					hblicense: '', // 环保许可证
					pwlicense: '', // 排污许可证
				},
				defTime: Number(new Date()), // 初始化日期
				showType: false,
				showRegtime: false,
				types: [{
						name: '小型',
					},
					{
						name: '中型',
					},
					{
						name: '大型',
					},
				],

				rules: {
					name: {
						required: true,
						message: '请输入企业名称',
						trigger: ['blur']
					},
					type: {
						type: 'string',
						required: true,
						message: '请选择企业类型',
						trigger: ['blur']
					},
					info: {
						type: 'string',
						min: 3,
						required: true,
						message: '不低于3个字',
						trigger: ['change']
					},
					addr: {
						required: true,
						message: '请输入企业地址',
						trigger: ['blur']
					},
					manager: {
						required: true,
						message: '请输入环保负责人',
						trigger: ['blur']
					},
					phone: {
						required: true,
						message: '请输入联系方式',
						trigger: ['blur']
					},
				},
				zzform: {},
				zzList: [],
				isEdit: false
			}
		},
		methods: {
			// 提交数据
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					// 提交时上传照片
					this.uploadPhoto(this.form.photo)
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// 企业成立时间
			regtime(e) {
				this.form.regtime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.showRegtime = false
			},
			// 选择企业类型
			typeSelect(e) {
				this.form.type = e.name
				this.$refs.uForm.validateField('type')
			},
			// 新增图片
			addPhoto(e) {
				this.form.photo = e.file.map(item => {
					return {
						url: item.url
					}
				});
			},
			// 删除图片
			delPhoto(e) {
				this.form.photo.splice(e.index, 1);
			},
			// 提交时上传图片
			async uploadPhoto(photo) {
				// 遍历图片数组并上传每张图片
				for (let i = 0; i < photo.length; i++) {
					try {
						// 获取每张图片的 URL
						const url = photo[i].url;
						const res = await uni.$u.http.upload('http://192.168.2.101:8080/api/common_file/upload', {
							filePath: url,
							name: 'file',
						});
						console.log(`照片 ${i + 1} 上传结果`, res);
					} catch (err) {
						console.log(`上传照片 ${i + 1} 失败`, err);
					}
				}
			},
			savazz() {
				const data = this.zzform
				data.uid = ''
				this.zzList.push(data)
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style lang="scss">
	.wrap {
		background-color: #F9F9F9;
		min-height: 100vh;

		.form {
			padding: 48rpx;

			.u-textarea {
				background-color: inherit;
				padding: 0;
			}
		}
	}
</style>