<template>
	<view class='video-box'>
		<view class="policeItem">
			<u-form labelWidth="150rpx" ref="uForm" labelAlign="left">
				<u-collapse accordion :value="0">
					<u-collapse-item  title="事件类型:" >
						<u-radio-group v-model="radiovalue" placement="column">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist"
								:key="index" size="40" labelSize="24" :label="item.name" :name="item.name"
								@change="radioChange">
							</u-radio>
						</u-radio-group>
					</u-collapse-item>
				</u-collapse>
				<u-form-item label="事件备注:">
					<u-input v-model="description" placeholder="请输入备注"></u-input>
				</u-form-item>
				<u-form-item label="拍照:" borderBottom>
					<view style="color: red;">一次只能上传六张</view>
				</u-form-item>
			</u-form>
			
			<view class="pictureList">
				<u-upload width="100px" height="100px" :fileList="fileList6" @afterRead="afterRead" @delete="deletePic"
				  	@clickPreview="clickPreview(event)" name="6" multiple :maxCount="6"></u-upload>
			</view>
			<view class="SignItem">
				<view class="Cancel">
					<u-button color="#4e87ff" @click="onClickpolice">一键报警</u-button>
				</view>
			</view>
			<view>
				<u-modal @cancel="policemessage = false" zoom @confirm="policeClick" :show="policemessage" :asyncClose="true"
					:showCancelButton="true" width="500rpx" content='是否确认报警?'></u-modal>
			</view>
		</view>
	</view>
</template>

<script>
	const QQMapWX = require('@/utils/qqmap-wx-jssdk.js')
	import {
		iotserveralarmadd
	} from '@/api/login';
	import {
		mapGetters
	} from 'vuex';
	import {timestampFormatTime} from '@/utils/index.js';
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				qqmapsdk: null,
				policeArr: {
					reporterAccount: '',
					reporterName: '',
					reporterPhone: '',
					address: '',
					latitude: '',
					longitude: '',
					province: '',
					city: '',
					district: '',
					street: '',
					adcode: '',
					city_code: '',
					phone_area_code: '',
				},
				radiovalue: '',
				radiolist: [{
						name: '打架斗殴',
					},
					{
						name: '非法侵害',
					},
					{
						name: '非法侵入',
					}, {
						name: '财物盗抢',
					}
				],
				fileList6: [],
				imageUrlsDate: [],
				baseURl: 'https://www.lonsungsh.com:8083',
				description:'',
				policemessage:false
			};
		},
		computed: {
			// 拿取vuex数据
			...mapGetters({
				userInfo: 'users/getLoginInfo'
			})
		},
		onLoad() {
			this.qqmapsdk = new QQMapWX({
				key: 'IBCBZ-W5C3W-X32R4-35XWR-SK5E2-BIFDO'
			})
		},
		created(){
			uni.authorize({
				scope: "scope.userLocation",
				success: (res) => {
					wx.getLocation({
						isHighAccuracy: true, // 开启地图精准定位
						altitude: true,
						type: 'gcj02', // 地图类型写这个
						success: (res) => {
							uni.showLoading({
								title: '定位中...',
								mask: true,
							})
							setTimeout(() => {
								this.latitude = Number(res.latitude.toFixed(6)),
									this.longitude = Number(res.longitude.toFixed(6))
								this.qqmapsdk.reverseGeocoder({
									location: {
										latitude: res.latitude,
										longitude: res.longitude
									},
									success: (data) => {
										this.policeArr.address = data.result
											.formatted_addresses
											.standard_address,
											this.policeArr.latitude = data
											.result.ad_info.location.lat,
											this.policeArr.longitude = data
											.result.ad_info.location.lng,
											this.policeArr.province = data
											.result.ad_info.province,
											this.policeArr.city = data.result
											.ad_info.city,
											this.policeArr.district = data
											.result.ad_info.district,
											this.policeArr.street = data.result
											.address_component.street,
											this.policeArr.adcode = data.result
											.ad_info.adcode,
											this.policeArr.city_code = data
											.result.ad_info.city_code,
											this.policeArr.phone_area_code =
											data.result.ad_info.phone_area_code
									}
								})
								uni.hideLoading()
							}, 1000)
						},
						fail() {
							console.log(1111);
						}
					});
				}
			})
		},
		onShow() {
			
		},
		methods: {
			
			deletePic(event) {
				const keyDelete = event.index
				let UrlsDateLIst = this.imageUrlsDate.filter((value, index, arr) => index !== keyDelete);
				this.imageUrlsDate = UrlsDateLIst;
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			clickPreview(event) {
				const {index} = event.currentTarget.dataset
				console.log(index);
				uni.previewImage({
					urls: this.imageUrlsDate,
					current: 0
				})
				
			},
			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)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				var that = this;
				const picUploadData = {
					creator: that.userInfo.name,
					business: 'school.revise',
					type: 'image',
					deviceid: that.userInfo.id,
					createtime: timestampFormatTime(),
					description: '',
					comment: ''
				};
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.baseURl + '/mdev/picture/upload',
						filePath: url,
						name: 'file',
						header: {
							'Content-Type': 'multipart/form-data;charset=utf-8'
						},
						formData: {
							jsondata: JSON.stringify(picUploadData),
						},
						success: (res) => {
							setTimeout(() => {
								const resImage = JSON.parse(res.data)?.data;
								if (!that.imageUrlsDate.includes(resImage.uri)) {
									that.imageUrlsDate.push(resImage.uri);
								}
								resolve(that.imageUrlsDate)
							}, 1000)
			
						}
					});
				})
			},
			onClickpolice(){
				 this.policemessage = true
			},
			// 一键报警
			async policeClick() {
				const policeList = {
					address: this.policeArr.address,
					latitude: this.policeArr.latitude,
					longitude: this.policeArr.longitude,
					province: this.policeArr.province,
					city: this.policeArr.city,
					district: this.policeArr.district,
					street: this.policeArr.street,
					adcode: this.policeArr.adcode,
					city_code: this.policeArr.city_code,
					phone_area_code: this.policeArr.phone_area_code,
					reporterAccount: this.userInfo.id,
					reporterName: this.userInfo.name,
					reporterPhone: this.userInfo.phone,
					alarmType:this.radiovalue,
					description:this.description,
					imageUrls:JSON.stringify(this.imageUrlsDate)
				}
				const resp = await iotserveralarmadd(policeList)
				uni.showLoading({
					title: '正在报警中..'
				});
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '报警成功',
						success: (res) => {
							setTimeout(() => {
								uni.switchTab({
									url: `/pages/securityCheck/securityCheck`
								});
							}, 1000);
						}
					});
				}, 1000);
			},
			radioChange(e) {
				this.radiovalue = e
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.policeItem {

		// margin: 30rpx 0 0 0;
		/deep/ .u-form-item__body__left {
			margin-left: 31rpx;
		}

		/deep/.u-form-item__body {
			padding: 5px 0;
		}
		.SignItem {
			transform: translateY(15%);
			display: flex;
			flex-direction: column;
			margin: 20rpx 48rpx;
			// background-color: #fff;
			border-radius: 20rpx;
		}
		
		.Cancel {
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			margin: 20rpx 40rpx;
		}
		.pictureList{
			padding: 10rpx 10rpx;
		}
	}
</style>