<template>
<view>
	<view class="section">
		<u-field
			v-model="form.config"
			label="商品型号"
			placeholder="请输入商品型号"
		>
		</u-field>
		<u-field
			v-model="form.shopNum"
			label="商品数量"
			placeholder="请输入商品数量"
		>
		</u-field>
	</view>
	<view class="section">
		<u-input class="realAddr" placeholder="请粘贴或输入文本，点击“识别”自动识别姓名、电话和地址" v-model="form.auto"></u-input>
		<view class="btnContent">
			<view class="btn">
				识别
			</view>
		</view>
	</view>
	<view class="section">
		<u-field
			v-model="form.getPeopleName"
			label="收货人"
			placeholder="请输入收货人姓名"
		>
		</u-field>
		<u-field
			v-model="form.getPeoplePhone"
			label="手机号"
			placeholder="请输入收货人手机号"
		>
		</u-field>
		<u-field @click="cityShow=true" v-model="form.city"
		:disabled="true" label="所属城市" placeholder="请选择"
		right-icon="arrow-right"
		>
		</u-field>
		<u-picker mode="region" v-model="cityShow"></u-picker>
		<view class="addrDetail">
			<view class="addrTitle">
				详细地址
			</view>
			<u-input type="textarea" v-model="form.address" placeholder="请输入详细地址"></u-input>
		</view>
	</view>
	<view class="section">
		<u-field @click="modeShow=true" v-model="form.setGoodsMode"
		:disabled="true" label="发货模式" placeholder="待选择"
		right-icon="arrow-right"
		>
		</u-field>
		<u-action-sheet  :list="modeList" v-model="modeShow"></u-action-sheet>
		<u-field
			v-model="form.setGoodsCompany"
			label="发货公司"
			placeholder="请输入上游公司名字"
		>
		</u-field>
		<u-field
			v-model="form.setGoodsName"
			label="发货人"
			placeholder="请输入上游渠道商名字"
		>
		</u-field>
		<u-field
			v-model="form.setGoodsPhone"
			label="发货人电话"
			placeholder="请输入上游渠道商电话"
		>
		</u-field>
		<u-field @click="goodsShow=true" v-model="form.wuliuCompany"
		:disabled="true" label="物流公司" placeholder="请选择物流公司"
		right-icon="arrow-right"
		>
		</u-field>
		<u-action-sheet  :list="kuaidiList" v-model="goodsShow"></u-action-sheet>
		<u-field
			v-model="form.orderNum"
			label="物流单号"
			placeholder="请输入物流单号"
		>
		</u-field>
	</view>
	<view class="recordList">
		<view class="recordItem">
			<view class="recordTitle">
				转账记录<text class="intro">最多上传5张</text>
			</view>
			<u-upload
				:fileList="finishImageList"
				:previewFullImage="true" 
				@afterRead="afterRead"
				:maxCount="5" 
				@delete="deletePic"
				name="1"
				multiple
			></u-upload>
		</view>
		<view class="recordItem">
			<view class="recordTitle">
				聊天记录<text class="intro">最多上传5张</text>
			</view>
			<u-upload
				:fileList="chatList"
				:previewFullImage="true" 
				@afterRead="afterRead"
				:maxCount="5"
				@delete="deletePic"
				name="1"
				multiple
			></u-upload>
		</view>
	</view>
	<view class="footerBtn">
		提交
	</view>
	
	
</view>
</template>

<script>
export default{
	data(){
		return{
			form:{
				config:'',
				shopNum:null,
				auto:'',
				getPeopleName:'',
				getPeoplePhone:'',
				city:null,
				address:'',
				setGoodsMode:null,
				setGoodsCompany:'',
				setGoodsName:'',
				setGoodsPhone:'',
				wuliuCompany:'',
				orderNum:'',
			},
			modeList:[
				{
					text: '店内现货',
				}
			],
			kuaidiList:[
				{
					text: '顺丰快递',
				}
			],
			cityShow:false,
			modeShow:false,
			goodsShow:false,
			finishImageList:[],
			chatList:[]
			
		}
	},
	methods:{
		showAction(){
			this.modeShow = true;
		},
		showgoodsAction(){
			this.goodsShow = true;
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				
				if(JSON.parse(result).code==1){
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}else{
					this[`fileList${event.name}`].splice(fileListLen, 1)
				}
				
			}
			
		},
		//上传照片
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test',
						token:getToken()
					},
					success: (res) => {
						if(JSON.parse(res.data).code==1){
							setTimeout(() => {
								this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
								resolve(res.data)
							}, 1000)
						}else{
							uni.$u.toast(JSON.parse(res.data).msg)
							
							resolve(res.data)
						}
					},
					fail: (res) => {
						console.log(res,"rrr")
					}
				});
			})
		},
		//删除图片
		deletePic(event) {
			console.log(event)
			// this[`fileList${event.name}`].splice(event.index, 1)
			this.finishImageList.splice(event.index, 1)
		},
	}
}
</script>

<style lang="scss" scoped>
page{
	min-height: 100%;
	background-color: #F7F8FA;
	padding-bottom: 96upx;
}
.section{
	background-color: #fff;
	padding:0 26upx;
	margin-top:16upx;
	.realAddr{
		padding:40upx 0 !important;
		::v-deep .uni-input-wrapper{
			text-align: left !important;
		}
		::v-deep .uni-input-placeholder{
			white-space: pre-wrap;
		}
	}
	.btnContent{
		display: flex;
		justify-content: flex-end;
		padding-bottom: 30upx;
	}
	.btn{
		width: 120upx;
		height: 50upx;
		background: #FFB8B3;
		border-radius: 19px 19px 19px 19px;
		opacity: 1;
		line-height: 50upx;
		text-align: center;
	
		font-size: 24upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		
	}
	.addrDetail{
		padding:0 10upx;
		.addrTitle{
		
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #303030;
			margin-top:32upx;
		}
	}
}
.selectContent{
	border-top:1px solid transparent;
	margin-top:6upx;
	padding-bottom: 100upx;
}

::v-deep .u-field{
	padding:30upx 10upx;
}
::v-deep .uni-input-wrapper{
	text-align: right;
}
.recordList{
	padding:30upx;
	background-color: #fff;
	margin-top:14upx;
	.recordItem{
		.recordTitle{
		
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #353535;
			margin-bottom: 20upx;
			.intro{
				
				font-size: 24upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #9F9F9F;
				margin-left:28upx;
			}
			
		}
		.picList{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			margin:12upx 0;
			text-align: center;
			image{
				width: 200upx;
				height: 160upx;
				
			}
		}
	}
}
.footerBtn{
	width: 80%;
	height: 88upx;
	background: #FFAAA4;
	border-radius: 36px 36px 36px 36px;
	opacity: 1;

	font-size: 28upx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 88upx;
	text-align: center;
	margin:96upx auto 0 auto;
	
}

</style>