<template>
	<view class="page">
		<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
		<view class="listBox" :style="{'padding-top':(pageTop+'px')}">
			<view class="content">
				<view class="top-box" @click="gopath('/pages/mapdoorplate/mapdoorplatelist')">
					<view>上报历史</view>
					<view class="top-box-img">
						<image src="../../static/right2.png"></image>
					</view>
				</view>
				<view class="titleall-left">
					<view class="titleall-left-line"></view>我要上报
				</view>
				<view class="message-list">
					<view class="info-box">
						<view class="info-box-list">
							<view class="serve">
								<view class="serve-title">路门牌情况</view>
								<view class="serve-right">
									<text>*</text>
									<picker @change="bindPickerChange" :value="index" :range="array">
										<view class="uni-input">{{from.road_status?array[from.road_status]:'请选择'}}
										</view>
									</picker>
									<image src="../../static/down3.png"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="info-box">
						<view class="info-box-list">
							<view class="serve">
								<view class="serve-title">名称</view>
								<view>
									<input v-model="from.name" placeholder="请输入" style="text-align: right;" />
								</view>
							</view>
						</view>
					</view>
					<view class="info-box">
						<view class="info-box-list">
							<view class="serve">
								<view class="serve-title">联系电话</view>
								<view>
									<input v-module="from.phone" placeholder="请输入" style="text-align: right;" />
								</view>
							</view>
						</view>
					</view>
					<view class="info-box">
						<view class="info-box-list">
							<view class="serve">
								<view class="serve-title">详细地址</view>
								<view @tap="open">
									<input v-module="from.address" placeholder="请输入" style="text-align: right;" />
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="message-list">
					<view class="info-box">
						<view class="info-box-list">
							<view class="info-box-width" style="width: 100%;">
								<view class="info-box-small">现场照片上传</view>
								<view style="margin-top: 20rpx;width: 100%;">
									<u-upload name="1" multiple :fileList="fileList" @delete="deletePic"
										@afterRead="afterRead" :previewFullImage="true" :maxCount="10"></u-upload>
								</view>
								<!-- <view class="info-box-list-img"><image src="../../static/img.png"></image></view> -->
							</view>
						</view>
						<view class="info-box-list">
							<view class="info-box-width width100">
								<view class="info-box-small">备注</view>
								<view>
									<textarea maxlength="-1" auto-height
										placeholder="这里有相关备注这里有相关备注这里有相关备注，这里有相关备注这里有相关备注，这里有相关备注这里有相关备注。"
										class="textarea"></textarea>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="page-footer">
					<view class="footer-buy">
						<view class="cart-add" @click="mapdoorplatesuccess">
							<image src="../../static/btn5.png"></image>
							<text>立即上报</text>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import service from '@/service/service.js'
	import BASE_URL from "@/common/config.js"
	export default {
		data() {
			return {
				BASE_URL,
				fileList: [],
				OrderType: 0,
				nvConfig: {
					title: "路门牌上报",
					bgColor: "#ffffff",
					color: "#000000",
					fixedAssist: {
						hide: true,
					},
				},
				from: {
					createdUser: uni.getStorageSync('USERS_KEY').userId,
					status: '待处理',
					name: '',
					road_status: '',
					latitude: '',
					longitude: '',
					address: '',
					phone: '',
					inspectionImage: ''
				},
				array: ['正常', '需维修', '需更换'],
			};
		},
		onPageScroll(e) {
			this.$refs.nv.pageScroll(e)
		},
		computed: {
			pageTop() {
				return parseInt(88 * uni.getSystemInfoSync().windowWidth / 750) + uni.getSystemInfoSync().statusBarHeight
			}
		},
		onLoad(params) {
			this.OrderType = params.type;
		},
		methods: {
			gopath(e) {
				uni.navigateTo({
					url: e
				})
			},
			async afterRead(event) {
				for (let i = 0; i < event.file.length; i++) {
					var res = await this.uploadImg(event.file[i].url)
					// console.log(res)
					res = JSON.parse(res.data)
					this.fileList.push({
						name: res.fileName,
						fileId: res.newFileName,
						url: this.BASE_URL + res.fileName
					})
				}
			},
			uploadImg(url) {
				return new Promise((r, e) => {
					uni.uploadFile({
						url: this.BASE_URL + "/common/upload",
						filePath: url,
						name: "file",
						success: (d) => r(d)
					})
				})
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e)
				this.from.road_status = e.detail.value
			},
			mapdoorplatesuccess() {
				this.from.road_status = this.array[this.from.road_status]
				for (let i = 0; i < this.fileList.length; i++) {
					if (i == 0) {
						this.from.inspectionImage = this.fileList[i].name
					} else {
						this.from.inspectionImage = this.from.inspectionImage + ',' + this.fileList[i].name
					}
				}
				console.log(this.from, this.fileList)
				this.API.addroadSign(this.from).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: "添加成功",
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/mapdoorplatesuccess/mapdoorplatesuccess',
							})
						}, 800)

					}
				})
			},
			open() {
				let that = this
				// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
				wx.chooseLocation({
					success: function(res) {
						console.log(res);
						that.from.latitude = res.latitude
						that.from.longitude = res.longitude
						that.from.address = res.address
						// that.arr1.plot=res.name
					},
					fail(err) {
						console.log(err)
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'mapdoorplate.scss';
</style>