<template>
	<view style="padding-bottom: 80rpx;">
		<view class="barBox">
			<headers :showBack="true">
				<view class="title">
					<view class="backBtn">
						<view>
							<!-- <span class="back" @click="goBack()">返回</span> -->
							<span class="tip">违章处置</span>
						</view>
					</view>
				</view>
			</headers>
		</view>
		<view class="content">
			<view class="row-line">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>违章类型</text>
				</view>
				<view class="row-content">
					<!-- <select :value="workerId" class="row-select">
						<option style="margin-left: 26rpx;" v-for="(item,i) in workerList" :key="i" :value="item.id">
							{{item.workerName}}
						</option>
					</select> -->
					<view class="row-input">
						<picker mode="selector" :range="alarmTypeList" range-key="name" @change="onAlarmTypeChange"
							filterable>
							<view class="picker" style="margin-left: 24rpx;">
								<view class="" style="color: #e1e1e1;" v-if="!alarmTypeItem.name">
									请选择违章类型
								</view>
								<view class="" v-else>
									{{alarmTypeItem.name}}
								</view>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="row-line">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>来源</text>
				</view>
				<view class="row-content">
					<input class="uni-input" placeholder="请输入来源" :value="alarmDesc" @blur="bindTextAreaBlur" />
				</view>
			</view>
			<view class="row-line">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>车牌号</text>
				</view>
				<view class="row-content">
					<input class="uni-input" placeholder="请输入车牌号" :value="carNumber" @blur="bindTextAreaBlur" />
				</view>
			</view>
			<view class="row-line">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>当前车速(km/h)</text>
				</view>
				<view class="row-content">
					<input class="uni-input" placeholder="请输入当前车速" :value="currentSpeed" @blur="bindTextAreaBlur" />
				</view>
			</view>
			<view class="row-line">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>选择违章人员</text>
				</view>
				<view class="row-content">
					<view class="row-input">
						<!-- <picker mode="selector" :range="workerList" range-key="workerName" @change="onChange" filterable>
							<view class="picker" style="margin-left: 24rpx;">
								<view class="" style="color: #e1e1e1;" v-if="!selectedItem.workerName">
									请选择违章人员
								</view>
								<view class="" v-else>
									{{selectedItem.workerName}}
								</view>
							</view>
						</picker> -->
						<g-picker style="flex: 1" :searchFlag="true"  :value="selectedItem.workerName" :columns="workerList"
							:filter="{label: 'workerName', value: 'id'}" input-align="left"
							@confirm="handleChangeEnterprise"></g-picker>
					</view>
				</view>
			</view>
			<!-- <view class="row-line" v-show="isDis === 'dis'">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>违章区域</text>
				</view>
				<view class="row-content">
					<view class="row-input">
						<picker mode="selector" :range="areaList" range-key="regionName" @change="onAreaChange"
							filterable>
							<view class="picker" style="margin-left: 24rpx;">
								<view class="" style="color: #e1e1e1;" v-if="!selectedAreaItem.regionName">
									请选择违章区域
								</view>
								<view class="" v-else>
									{{selectedAreaItem.regionName}}
								</view>
							</view>
						</picker>
					</view>
				</view>
			</view> -->
			<view class="row-line">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>处置方式</text>
				</view>
				<view class="row-content">
					<radio-group @change="isShowContent" :value="isDis">
						<radio value="1" checked="true">违章再教育</radio>
						<radio value="2">加入黑名单</radio>
					</radio-group>
				</view>
			</view>
			<view class="row-line">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>抓拍时间</text>
				</view>
				<view class="row-content">
					{{addForm.inspectTime}}
				</view>
			</view>
			<view class="row-line">
				<view class="row-label">
					<!-- <text style="color: firebrick;">*</text> -->
					<text>上传图片</text>
				</view>
				<view class="row-content">
					<view class="uni-form-input imgBox_wrap">
						<view class="imgBox" v-show="imgFileList.length>0" v-for="(item,index) in imgFileList"
							:key="index">
							<image :src="item.url" class="img"
								@click="previewImage(item.url)">
							</image>
							<view @click="deleteImg(item,1)" style="margin: 10rpx;" class="deleteImg">×</view>
						</view>
						<view class="addImgBox" @click="uploadImg(1)" v-if="imgFileList.length<1">
							<image src="/static/icon-add.png" class="icon-add"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="confirm-btn" @click="confirm" v-show="btnAuth">
			<view class="inner-btn">处置推送</view>
		</view>
	</view>
</template>

<script>
	import {
		dateformat
	} from "@/utils/tool.js"
	export default {
		data() {
			return {
				imgFileList: [],
				list: [{
						name: '苹果'
					},
					{
						name: '香蕉'
					},
					{
						name: '橙子'
					},
					{
						name: '葡萄'
					},
					// ... 更多选项
				],
				selectedItem: {},
				alarmTypeItem: {},
				addForm: {
					inspectTime: dateformat(new Date())
				},
				isDis: '1',
				workerId: [],
				alarmDesc: '',
				carNumber: "",
				currentSpeed: "",
				deductScore: '',
				workerList: [],
				workerInfoList: [],
				handleResult: '',
				alarmItem: {},
				alarmTypeList: [],
				alrmTypeId: "",
				areaList: [],
				selectedAreaItem: {},
				areaId: "",
				btnAuth: true
			}
		},
		onLoad(option) {
			this.btnAuth = this.checkBtnPermission({key: 'dealPush_push', menuPath: '/project/carViolation/dealPushManage'})
			// this.alarmItem = JSON.parse(decodeURIComponent(option.item));
			console.log('alarmItem', this.alarmItem)
		},
		mounted() {
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.getWorkerList()
			this.getAlarmTypeList()
			this.getAreaList();
		},
		methods: {
			//上传附件
			uploadImg(type) {
				var that = this
				if (type == 1) {
					uni.chooseImage({
						count: 5 - that.imgFileList.length,
						success(res) {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'files',
								success: (uploadFileRes) => {
									let data = {
										name: JSON.parse(uploadFileRes.data).data[0].filename,
										url: that.url_config+'image/' +  JSON.parse(uploadFileRes.data).data[0].imageUrl
									};
									that.imgFileList.push(data)
									uni.getImageInfo({
										src: tempFilePaths[0],
										success: (resInfo) => {
											console.log('传过去啦 resInfo', resInfo)
											that.imgList = {
												imgUrl: tempFilePaths[0],
												imgWidth: resInfo.width,
												imgHeight: resInfo.height,
												// team:'班组人员',
												// name: '张三'
											}
											that.openImg = true
										}
									})
									that.openImg = false

								}
							});
						}
					})
				}
			},
			//删除附件
			deleteImg(val, type) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该附件吗?',
					success: function(res) {
						if (res.confirm) {
							if (type == 1) {
								let fileArr = JSON.parse(JSON.stringify(that.imgFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.imgFileList = fileArr;
							} else if (type == 2) {
								let fileArr = JSON.parse(JSON.stringify(that.videoFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.videoFileList = fileArr;
							}

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			onChange(e) {
				const index = e.detail.value;
				this.selectedItem = this.workerList[index];
				this.workerId = this.selectedItem.id
				console.log("change!!!!!!!!!")
			},
			onAreaChange(e) {
				const index = e.detail.value;
				this.selectedAreaItem = this.areaList[index];
				this.areaId = this.selectedAreaItem.id
				console.log("change!!!!!!!!!")
			},
			onAlarmTypeChange(e) {
				const index = e.detail.value;
				this.alarmTypeItem = this.alarmTypeList[index];
				this.alrmTypeId = this.alarmTypeItem.data
			},
			handleChangeEnterprise(e, values, labels) {
				// console.log(e, values, labels)
				// this.workerId = values.join(',');
				this.workerId = values;
				this.selectedItem.workerName = labels.join('、')
				// selectedItem.workerName
			},
			confirm() {
				if (!this.alrmTypeId) {
					uni.showToast({
						title: '请选择违章类型',
						icon: "none"
					})
					return
				}
				if (!this.alarmDesc) {
					uni.showToast({
						title: '请输入来源',
						icon: "none"
					})
					return
				}
				if (!this.carNumber) {
					uni.showToast({
						title: '请输入车牌号',
						icon: "none"
					})
					return
				}
				if (!this.currentSpeed) {
					uni.showToast({
						title: '请输入当前车速',
						icon: "none"
					})
					return
				}
				if (this.workerId.length == 0) {
					uni.showToast({
						title: '请选择违章人员',
						icon: "none"
					})
					return
				}
				let requestData = {
					projectSn: this.projectSn,
					alarmType: this.alrmTypeId,
					// qualityRegionId: this.areaId,
					createTime: this.addForm.inspectTime,
					isPushed: 1,
					handleResult: 1,
					handleDone: true,
					alarmDesc: this.alarmDesc,
					carNumber: this.carNumber,
					currentSpeed: this.currentSpeed,
					handleType: this.isDis,
					workerInfoList: this.workerId.map(item => {
						return {
							id: item
						}
					}),
					// alarmDesc: "手动抓拍"
				}
				let arr = [];
				if(this.imgFileList.length > 0){
					this.imgFileList.map(item =>{
						arr.push(item.url)
					})
				}
				requestData.imageUrl = arr.join(',');
				this.sendRequest({
					url: 'xmgl/carDangerDetectRecord/add',
					method: "post",
					data: requestData,
					success: res => {
						if (res.code == 200) {
							console.log('res', res)
							uni.showToast({
								title: '操作成功',
								icon: "none"
							})
							setTimeout(function(){
								uni.navigateBack({delta: 1})
							},1000)
						}
					}
				})
			},
			getAreaList() {
				let that = this;
				let data = {
					projectSn: uni.getStorageSync("dept"),
					ignoreDataScope: "ignoreDataScope"
				};
				this.sendRequest({
					url: 'xmgl/qualityRegion/notTreeList',
					method: 'post',
					data: data,
					success: (res) => {
						if (res.code === 200) {
							that.areaList = res.result
						}
					}
				})
			},
			getAlarmTypeList() {
				this.sendRequest({
					url: 'xmgl/dictionaryItem/list',
					data: {
						projectSn: this.projectSn,
						dictionaryEncoding: "car_danger_detect_record_alarm_type"
					},
					success: res => {
						if (res.code == 200) {
							console.log('alarmTypeList', res)
							this.alarmTypeList = res.result
						}
					}
				})
			},
			getWorkerList() {
				this.sendRequest({
					url: 'xmgl/workerInfo/selectWorkerInfoList',
					method: "post",
					data: {
						projectSn: this.projectSn,
					},
					success: res => {
						if (res.code == 200) {
							console.log('workerListRes', res)
							this.workerList = res.result.records
						}
					}
				})
			},
			isShowContent(e) {
				this.isDis = e.detail.value
				if (this.isDis === 'ign') {
					this.cleanForm()
				}
			},
			cleanForm() {
				this.workerId = '';
				this.alarmDesc = '';
				this.carNumber = '';
				this.currentSpeed = '';
				this.deductScore = '';
			},
			bindTextAreaBlur(e) {
				this.alarmDesc = e.detail.value
				console.log(e.detail.value)
			},
			change(e) {
				console.log("e:", e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-input {
		width: 70%;
		height: 78rpx;
		line-height: 78rpx;
		border: 2rpx solid rgba(42, 43, 91, 0.3);
		padding: 0px 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		font-size: 28rpx;
	}
	.uni-input-placeholder{
		color: rgb(225, 225, 225);
	}
	.imgBox_wrap {
		display: flex;
		flex-wrap: wrap;
		// margin-top: 20rpx;
		width: 75%;

		.imgBox {
			width: 180rpx;
			height: 180rpx;
			display: inline-flex;
			position: relative;
			margin-right: 30rpx;
			margin-bottom: 16rpx;

			.img {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}

			.deleteImg {
				position: absolute;
				right: -6rpx;
				top: -36rpx;
				font-size: 32rpx;
				color: #fff;
			}

		}

		.addImgBox {
			border: 1px solid rgba(42, 43, 91, 0.1);
			background-color: #F5F5F5;
			width: 180rpx;
			height: 180rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
			font-size: 24rpx;

			.icon-add {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.confirm-btn {
		width: 100%;
		height: 80rpx;
		// background-color: darkred;
		position: fixed;
		bottom: 0;

		.inner-btn {
			width: 100%;
			height: 100%;
			color: #fff;
			background-color: #2D8EF3;
			text-align: center;
			line-height: 80rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.row-line {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			width: 100%;
			min-height: 80rpx;

			.row-label {
				display: flex;
				justify-content: flex-end;
				width: 30%;
			}

			.row-content {
				width: 70%;
				margin-left: 40rpx;
				display: flex;

				radio {
					// font-size: 36rpx;
					margin-right: 20rpx;
					// transform:scale(0.7);
				}

				:deep(uni-textarea ){
					width: 70%;
					height: 200rpx;
					padding: 26rpx 28rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					// background-color: #efefef;
					border: 1px solid #d8d8d8;
					border-radius: 6rpx;

					.uni-textarea-compute {
						width: 100%;
						height: 100%;
						overflow: auto;
					}
				}

				.row-select {
					width: 70%;
					height: 68rpx;
					border: 1px solid #d8d8d8;
					display: flex;
					align-items: center;
					border-radius: 6rpx;
					background-color: #fff;
				}

				.row-input {
					width: 70%;
					height: 78rpx;
					border: 1px solid #d8d8d8;
					display: flex;
					align-items: center;
					border-radius: 6rpx;
					
					.g-picker {
						padding: 24rpx 32rpx;
					}
				}

				.select-container {
					// height: 80px;
					// overflow: auto;
				}
				:deep( .uni-radio-input ){
					border: 2rpx solid #171717;
					// background-color: white !important;
					width: 28rpx;
					height: 28rpx;
				}
				
				:deep( .uni-radio-input.uni-radio-input-checked:before ){
					content: '';
					background-color: #2F8FF3;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					transform: translate(-50% -50%) scale(.73) !important;
				}
			}
		}
		.row-line:last-child {
			align-items: flex-start;
		}
	}

	.barBox {
		background-color: #5181F6;
	}

	.title {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 40rpx;
		width: 100vw;
		// background-color: #5181F6;
		// color: #fff;
		text-align: center;
		position: relative;
	}


	.backBtn {
		// display: flex;
		// justify-content: flex-start;
		font-size: 30rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.back {
		font-size: 24rpx;
	}

	// .tip {
	// 	margin-left: 5rem;
	// }
</style>