<template>
	<view class="order-up-container">
		<view class="order-tips">
			<span class="order-imp">*</span>
			合作者信息填写
		</view>
		<scroll-view class="content" scroll-y="true" scroll-top=0 enable-back-to-top>
			<u-form :model="form" ref="uform" :rules="rules" label-align='left' label-width="170">
				<u-form-item label="*合作者名称" prop="name">
					<u-input type="text" placeholder="请输入合作者名称" v-model="form.name" />
				</u-form-item>
				<u-form-item label="*联系人" prop="contactName">
					<u-input type="text" placeholder="请输入联系人" v-model="form.contactName" />
				</u-form-item>
				<u-form-item label="*联系方式" prop="contactPhone">
					<u-input type="text" placeholder="请输入联系方式" v-model="form.contactPhone" />
				</u-form-item>
				<u-form-item label="*合作者地址" prop="address">
					<u-input type="text" placeholder="请输入合作者地址" v-model="form.address" />
				</u-form-item>
				<u-form-item label="合作范围" prop="radius" :label-position="'top'">
					<u-input type="textarea" placeholder="请输入合作范围 不超过200个字" :maxlength="200" v-model="form.radius" />
				</u-form-item>
				<u-form-item label="附件(不超过5张,20M以内)" prop="attachment" :label-position="'top'">
					<u-upload action="#" multiple :fileList="fileList" @on-choose-complete="onChooseComplete"
						:auto-upload="false" @on-remove="deletePic" name="1" :maxCount="5"></u-upload>
				</u-form-item>
			</u-form>
		</scroll-view>
		<u-button type="primary" class="commit-button" @click="submiHandle" :disabled="isClick">保存</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//表单对象
				form: {
					id: null,
					stationName: null,
					stationCode: null,
					name: null,
					contactName: null,
					contactPhone: null,
					address: null,
					radius: null,
					attachment: '',
					img: [],
				},
				//图片上传url
				action: '',
				//图片上传列表
				fileList: [],
				//是否禁用
				isClick: false,
				//验证规则对象
				rules: {
					name: [{
						required: true,
						message: '请输入供货商名称',
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'blur',
					}],
					contactName: [{
						// min: 5, 
						// message: '简介不能少于5个字', 
						trigger: 'blur',
						message: '请输入联系人',
						required: true,
					}],
					contactPhone: [{
						// min: 11, 
						// message: '简介不能少于5个字', 
						trigger: 'blur',
						message: '请输入联系方式',
						required: true,
					}],
					address: [{
						required: true,
						message: '请输入供货商地址',
						trigger: 'blur',
					}],
				},

				fileList1: [],
			}
		},
		computed: {

		},
		mounted() {},
		// 获取系统默认时间
		onLoad(options) {
			if(options.stationCode){
				this.form={
					id: null,
					stationName: null,
					stationCode: null,
					name: null,
					contactName: null,
					contactPhone: null,
					address: null,
					radius: null,
					attachment: '',
					img: [],
				}
				this.form.stationCode=options.stationCode
				this.form.stationName=options.stationName
			}else{
				let obj=JSON.parse(decodeURIComponent(options.item))
				if (obj.attachment) {
					let fileList = obj.attachment.split(',')
					fileList.forEach(item => {
						this.fileList.push({url: item})
					})
				}
				this.form={...obj}
			}
		},
		onReady() {
			this.$refs.uform.setRules(this.rules);
		},
		mounted() {
			
		},
		methods: {
		//提交
		submiHandle() {
			let _that = this;
			_that.isClick = true;
			let form = _that.form;
			if (form.img && form.img.length > 0) {
				form.attachment = form.img.join(',')
			}
			_that.$refs.uform.validate(valid => {
				if (!valid) {
					_that.isClick = false;
					return
				}
				if(this.form.id){
					_that.$http.supplierEdit(form).then(res => {
						_that.isClick = false;
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'success',
								duration: 1000
							})
							setTimeout(() => {
								uni.redirectTo({
									url: `/pages/index/supplier?stationCode=${this.form.stationCode}&stationName=${this.form.stationName}`
								})
							}, 1000);
						} else {
							_that.$utils.msg(res.msg);
						}
					})
				}else{
					_that.$http.supplierAdd(form).then(res => {
						_that.isClick = false;
						if (res.code == 200) {
							uni.showToast({
								title: '新增成功',
								icon: 'success',
								duration: 1000
							})
							setTimeout(() => {
								uni.redirectTo({
									url: `/pages/index/supplier?stationCode=${this.form.stationCode}&stationName=${this.form.stationName}`
								})
							}, 1000);
						} else {
							_that.$utils.msg(res.msg);
						}
					})
				}
			});
		},
		// 删除图片
		deletePic(index, lists) {
			
			this.form.img=[]
			lists.forEach(item=>{
				this.form.img.push(item.url)
			})
		},
		//图片上传
		onChooseComplete(lists, name) {
			const _that = this;
			lists.forEach(item => {
				uni.uploadFile({
					// 这里是你上传图片的地址
					url: 'https://tess.fast-fun.cn/zl/mini/file/upload',
					filePath: item.url,
					name: 'file',
					header: {
						"Authorization": `${uni.getStorageSync("token")}`
					},
					//	这个res是后端返回给你上传成功的数据里边一般会有上传之后图片的在线路径
					success: (res) => {
						let data = JSON.parse(res.data)
						_that.form.img.push(data.msg)
					},
				})
			})
		},
	}
	}
</script>

<style lang="scss" scoped>
	.order-up-container {
		height: 100vh;
		position: relative;
		box-sizing: border-box;
		padding-bottom: calc(80rpx + env(safe-area-inset-bottom));
		background-color: #FFFFFF;
		padding: 0 30rpx;

		.content {
			height: calc(100vh - 200rpx - env(safe-area-inset-bottom));
			margin-bottom: 30rpx;
			background-color: #FFFFFF;
		}

		.order-tips {
			height: 80rpx;
			line-height: 80rpx;
			background: #EEEEEE;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #BFBDBD;
			padding-left: 30rpx;
			margin: 0 -30rpx;

			.order-imp {
				margin-right: 5rpx;
			}
		}

		.commit-button {
			position: fixed;
			width: calc(100% - 60rpx);
			bottom: calc(20rpx + env(safe-area-inset-bottom));
			z-index: 999;
		}

		.uploadv {
			width: 208rpx;
			height: 208rpx;
			flex-direction: column;
			color: #606266;
			font-size: 26rpx;
			overflow: hidden;
			margin: 10rpx;
			background: #f4f5f6;
			position: relative;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.u-add-tips {
				margin-top: 20rpx;
				line-height: 20rpx;
			}

			.u-add-img {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 10rpx;
				right: 15rpx;
			}

			.img {
				width: 60%;
				height: 60%;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.u-delete-icon {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				z-index: 10;
				background-color: #FFAD26 !important;
				border-radius: 108rpx;
				width: 44rpx;
				height: 44rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>