<template>
	<view class="appbox">

		<view style="display: flex;" v-if="type == '1'">
			<view @click="changeonindex('事件上报')" :class="onindex == '事件上报'?'onclasst1':'classt1'">
				事件上报
				<view class="onindex"></view>
			</view>
			<view @click="changeonindex('我的上报')" :class="onindex == '我的上报'?'onclasst1':'classt1'">
				我的上报
				<view class="onindex"></view>
			</view>
		</view>
		<view style="display: flex;" v-if="type == '2'">
			<view :class="onindex == '事件上报编辑'?'onclasst1':'classt1'">
				事件上报编辑
				<view class="onindex"></view>
			</view>
		</view>
		<view style="flex: 1;overflow-y: scroll;">
			<view v-if="onindex == '事件上报'" style="overflow-y: scroll;height: 100%;">
				<view class="fromitem">
					<view class="t1 tit1">
						上报位置
					</view>
					<view class="item">
						<input v-model="form.reportLocation" placeholder-style="color:#c8c9cc" placeholder="请输入" />
					</view>
				</view>
				<view class="fromitem">
					<view class="t1 tit1">
						问题描述
					</view>
					<view class="item">
						<textarea v-model="form.problemDescribe" placeholder-style="color:#c8c9cc" placeholder="请输入" />
					</view>
				</view>
				<view class="fromitem">
					<view class="t1 tit1">
						事件类型
					</view>
					<view class="item" style="display: flex;justify-content: space-between;color: #c8c9cc;"
						@click="typeShow = true">
						<view>{{ontype?ontype:'请选择'}}</view>
						<u-icon color="#c8c9cc" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="fromitem">
					<u-upload :action="$upload" :auto-upload="false" ref="coverImage" :max-count="9" :file-list="fist" @on-remove="onremove1"
						@on-choose-complete="(response, file, fileList) => onsuccess1(response, file, fileList, 'coverImage')"></u-upload>
				</view>
				<view style="height: 100rpx;"></view>
				<view class="page-footer">
					<u-button style="width: 100%;" type="success" @click="submit">提交</u-button>
				</view>
			</view>
			<scroll-view style="height: 100%;" scroll-y v-if="onindex == '我的上报'" @scrolltolower="scrolltolower">
				<view v-if="mylist.length == 0" style="text-align: center;margin-top: 50rpx;" class="tit1">暂无数据</view>
				<view style="background: #fff;border-radius: 18rpx;padding: 30rpx;margin-top: 30rpx;"
					v-for="(item,index) in mylist">
					<view style="display: flex;line-height: 50rpx;">
						<view class="tit1">事件类型：</view>
						<view class="tit2">{{item.eventTypeName|| '-'}}</view>
					</view>
					<view style="display: flex;line-height: 50rpx;">
						<view class="tit1">上报位置：</view>
						<view class="tit2">{{item.reportLocation|| '-'}}</view>
					</view>
					<view style="display: flex;line-height: 50rpx;">
						<view class="tit1">问题描述：</view>
						<view class="tit2">{{item.problemDescribe || '-'}}</view>
					</view>
					<view style="display: flex;line-height: 50rpx;">
						<view class="tit1">提交时间：</view>
						<view class="tit2">{{item.createTime || '-'}}</view>
					</view>
					<view style="display: flex;flex-wrap: wrap;">
						<u-image @click="openimg1(item.eventPictures,index)" :showLoading="true"
							v-for="(item1,index1) in item.eventPictures" :src="item1" width="100px" height="100px"
							border-radius="20" style="margin-top:15rpx;margin-left: 15rpx;"></u-image>
					</view>
					<view style="display: flex;flex-direction: row-reverse;">
						<view
							style="background: rgb(63, 155, 106);padding: 10rpx 0;border-radius: 36rpx;color: #fff;font-size: 23rpx;width: 100rpx;text-align: center;font-weight: bold;"
							@click="remove(item)">编辑</view>
					</view>
				</view>
			</scroll-view>
			<view v-if="onindex == '事件上报编辑'">
				<view class="fromitem">
					<view class="t1 tit1">
						上报位置
					</view>
					<view class="item">
						<input v-model="removeinfo.reportLocation" placeholder-style="color:#c8c9cc"
							placeholder="请输入" />
					</view>
				</view>
				<view class="fromitem">
					<view class="t1 tit1">
						问题描述
					</view>
					<view class="item">
						<textarea v-model="removeinfo.problemDescribe" placeholder-style="color:#c8c9cc"
							placeholder="请输入" />
					</view>
				</view>
				<view class="fromitem">
					<view class="t1 tit1">
						事件类型
					</view>
					<view class="item" style="display: flex;justify-content: space-between;color: #c8c9cc;"
						@click="typeShow = true">
						<view>{{ontype?ontype:'请选择'}}</view>
						<u-icon color="#c8c9cc" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="fromitem">
					<u-upload :action="$upload" :auto-upload="false" ref="coverImage" :max-count="9" :file-list="fist" @on-remove="onremove2"
						@on-choose-complete="(response, file, fileList) => onsuccess2(response, file, fileList, 'coverImage')" ></u-upload>
				</view>
				<view style="height: 100rpx;"></view>
				<view class="page-footer">
					<u-button style="width: 48%;" @click="qux">取消</u-button>
					<u-button style="width: 48%;" type="success" @click="removeonfo()">提交</u-button>
				</view>
			</view>
		</view>


		<u-select v-model="typeShow" :list="typeList" @confirm="typeChange"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '1',
				mylist: [],
				fist: [],
				typeShow: false,
				typeList: [],
				ontype: null,
				onindex: '事件上报',
				form: {
					problemDescribe: '',
					reportLocation: '',
					eventType: '',
					eventPictures: [],
					userName: uni.getStorageSync('user').name,
					userPhone: uni.getStorageSync('user').phone,
				},
				removeinfo: {},
				page:0,
				total:0
			}
		},
		onLoad() {
			this.$http.sendRequest('/eventReporting/report', 'POST', {}, 1).then(res => {
				if (res.data.code == 200) {
					let list = res.data.data.map(item => {
						let c1 = {
							value: item.id,
							label: item.name
						}
						return c1
					})
					console.error(list)
					this.typeList = list
				}
			})
		},
		
		methods: {
			scrolltolower(e){
				console.error(e)
				if (this.mylist.length < this.total) {
					this.page++
					this.gain()
				}
			},
			onremove1(e) {
				this.form.eventPictures.splice(e,1)
				console.error(this.form.eventPictures)
			},
			onremove2(e) {
				this.removeinfo.eventPictures.splice(e,1)
				console.error(this.removeinfo.eventPictures)
			},
			qux() {
				this.type = '1'
				this.changeonindex('我的上报')
			},
			remove(e) {
				this.removeinfo = e
				this.fist = this.removeinfo.eventPictures.map(item => {
					let c1 = {
						url:item
					}
					return c1
				})
				this.ontype = this.removeinfo.eventTypeName;
				console.error(this.fist)
				this.onindex = '事件上报编辑'
				this.type = '2'
			},
			removeonfo() {
				console.error({
					...this.removeinfo
				})
				console.error(this.fist)
				this.$http.sendRequest('/eventReporting/update', 'POST', this.removeinfo, 1).then(res => {
					console.error(res)
					if(res.data.code == '200'){
						uni.showToast({
							icon:'none',
							title:res.data.message
						})
						setTimeout(() => {
							this.type = '1'
							this.changeonindex('我的上报')
						}, 1000);
					} else{
						uni.showToast({
							icon:'none',
							title:res.data.message
						})
					}
				})
			},
			openimg1(urls, index) {
				let list = urls.map(item => {
					return this.imgUrl + item
				})
				uni.previewImage({
					current: index,
					urls: list,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			changeonindex(e) {
				this.onindex = e
				this.fist = []
				this.mylist = []
				this.ontype = null
				this.page = 0
				if (this.onindex == '事件上报') {

				} else if (this.onindex == '我的上报') {
					this.gain()
				}
			},
			gain() {
				this.$http.sendRequest('/eventReporting/list', 'POST', {
					"page": this.page,
					"limit": 10,
					userPhone: uni.getStorageSync('user').phone
				}, 1).then(res => {
					console.error(res)
					this.mylist = [...this.mylist,...res.data.data.records]
					this.total = res.data.data.total
				})
			},
			submit() {
				console.error({
					...this.form
				})
				console.error(this.fist)
				this.$http.sendRequest('/eventReporting/save', 'POST', this.form, 1).then(res => {
					console.error(res)
					if(res.data.code == '200'){
						uni.showToast({
							icon:'none',
							title:res.data.message
						})
						this.form = {
							problemDescribe: '',
							reportLocation: '',
							eventType: '',
							eventPictures: [],
							userName: uni.getStorageSync('user').name,
							userPhone: uni.getStorageSync('user').phone,
						}
						setTimeout(() => {
							this.changeonindex('我的上报')
						}, 1000);
					} else{
						uni.showToast({
							icon:'none',
							title:res.data.message
						})
					}
				})
			},
			typeChange(val) {
				this.ontype = val[0].label;
				this.form.eventType = val[0].value;
			},
			async onsuccess2(e, file, fileList, ziduan) {
				console.error(e)
				for (let i = 0; i < e.length; i++) {
					if(e[i].progress == 0) {
						await uni.uploadFile({
							url: this.$upload, // 仅为示例，请替换为您的服务器上传接口
							filePath: e[i].url,
							name: 'file', // 后端接收的文件参数名
							formData: {
								filePath: 'xcx', // 其他表单数据
							},
							success: (uploadFileRes) => {
								console.error(uploadFileRes)
								let data = JSON.parse(uploadFileRes.data)
								this.removeinfo.eventPictures.push(this.$img + data.data)
							},
							fail: (err) => {
								console.error('上传失败', err);
								uni.showToast({
									title: '上传失败',
									icon: 'none',
								});
							},
						});
					}

				}
				// uni.showToast({
				// 	title: '上传成功',
				// 	icon: 'success',
				// });
			
			},
			async onsuccess1(e, file, fileList, ziduan) {
				console.error(e)
				for (let i = 0; i < e.length; i++) {
					await uni.uploadFile({
						url: this.$upload, // 仅为示例，请替换为您的服务器上传接口
						filePath: e[i].url,
						name: 'file', // 后端接收的文件参数名
						formData: {
							filePath: 'xcx', // 其他表单数据
						},
						success: (uploadFileRes) => {
							console.error(uploadFileRes)
							let data = JSON.parse(uploadFileRes.data)
							this.form.eventPictures.push(this.$img + data.data)
						},
						fail: (err) => {
							console.error('上传失败', err);
							uni.showToast({
								title: '上传失败',
								icon: 'none',
							});
						},
					});
				}
				// uni.showToast({
				// 	title: '上传成功',
				// 	icon: 'success',
				// });

			},
		}
	}
</script>

<style scoped lang="scss">
	.tit1 {
		color: #7a7a7a;
		font-size: 26rpx;
	}

	.tit2 {
		color: #000;
		font-size: 28rpx;
	}

	.appbox {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-image: url('https://zhgw-uat.028wlkj.com/cdwlMall/zsfwzxt/file/static/img/17183fb8b52c1ed22357d3c670d460c.png');
		background-size: 100% 100%;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.onclasst1 {
		font-size: 30rpx;
		margin-right: 40rpx;
		font-weight: bold;
		color: rgb(63, 155, 106);

		.onindex {
			border-radius: 36rpx;
			margin: 0 auto;
			width: 70rpx;
			height: 20rpx;
			margin-top: 20rpx;
			background: linear-gradient(90deg, #3f9b6a 0%, rgba(63, 155, 106, 0) 100%);
		}
	}

	.classt1 {
		font-size: 30rpx;
		margin-right: 40rpx;
		font-weight: bold;
		color: rgba(0, 0, 0, 0.9);
	}

	.fromitem {
		margin-top: 30rpx;

		.t1 {
			margin: 30rpx 0;
		}

		.item {
			padding: 20rpx;
			background: #fff;
			border-radius: 18rpx;
		}
	}

	/* 保存按钮 */
	.page-footer {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		padding: 20rpx 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9999;
		justify-content: space-between;
		.u-btn {
			flex: 1;
		}

		.footer-buy {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100%;

			.cart-add {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100rpx;
				background-color: #3f9b6a;

				text {
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>