<template>
	<view>
		<view class="barBox fixedheader">
			<!-- <headers :showBack="true">
				<view class="title">
					<view class="backBtn">
						<view>
							<span class="back" @click="goBack()">返回</span>
							<span class="tip">违章处置</span>
						</view>
					</view>
				</view>
			</headers> -->
			<headers class="" :showBack="true">
				<view class="headerName">
					违章处置
				</view>
			</headers>
		</view>
		<view class="content">
			<!-- <view class="row-line" v-show="alarmItem.handleResult === 1">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>违规原因</text>
				</view>
				<view class="row-content">
					<view style="background-color: #e1e1e1;" class="row-select">
						<text style="margin-left: 26rpx;">{{alarmTypeName(alarmItem.alarmType)}}</text>
					</view>
				</view>
			</view> -->
			<!-- <view class="row-line" v-show="alarmItem.handleResult === 1">
				<view class="row-label">
					<text>违规地点</text>
				</view>
				<view class="row-content">
					<view style="background-color: #e1e1e1;" class="row-select">
						<text style="margin-left: 26rpx;">{{alarmItem.alarmDesc}}</text>
					</view>
				</view>
			</view> -->
			<view class="row-line">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>处置结果</text>
				</view>
				<view class="row-content">
					<!-- <text style="color: #d8d8d8;">已处置</text> -->
					<!-- <radio-group @change="isShowContent" :value="alarmItem.handleResult"> -->
					<radio-group :value="alarmItem.handleResult">
						<!-- <radio :value="1" checked="true">已处置</radio>
						<radio :value="2" disabled="true" style="">误报忽略</radio> -->
						<radio :disabled="true" :checked="alarmItem.handleResult == 1">已处置</radio>
						<radio :disabled="true" :checked="alarmItem.handleResult == 2">误报忽略</radio>
					</radio-group>
				</view>
			</view>
			<view class="row-line" v-show="alarmItem.handleResult === 1">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>违章人员</text>
				</view>
				<view class="row-content">
					<view style="background-color: #F3F5F7;" class="row-select">
						<text style="margin-left: 26rpx;">{{alarmItem.workerInfoStr}}</text>
					</view>
					<!-- <select :value="alarmItem.workerInfoStr" class="row-select">
						<option :value="alarmItem.workerInfoStr" checked="true" disabled>{{alarmItem.workerInfoStr}}</option>
					</select> -->
				</view>
			</view>
			<view class="row-line" v-show="alarmItem.handleResult === 1">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>处置方式</text>
				</view>
				<view class="row-content">
					<!-- <text style="color: #d8d8d8;">已处置</text> -->
					<!-- <radio-group @change="isShowContent" :value="alarmItem.handleResult"> -->
					<radio-group :value="alarmItem.handleType">
						<!-- <radio :value="1" checked="true">已处置</radio>
						<radio :value="2" disabled="true" style="">误报忽略</radio> -->
						<radio :disabled="true" :checked="alarmItem.handleType == 1">违章再教育</radio>
						<radio :disabled="true" :checked="alarmItem.handleType == 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">
					<view class="uni-form-input imgBox_wrap">
						<view class="imgBox" >
							<image :src="alarmItem.imageUrl" class="img"
								@click="previewImage(alarmItem.imageUrl)">
							</image>
						</view>
					</view>
				</view>
			</view> -->
			<!-- <view class="row-line" v-show="alarmItem.handleResult === 1">
				<view class="row-label">
					<text>描述</text>
				</view>
				<view class="row-content">
					<textarea style="background-color: #e1e1e1;" disabled :value="alarmItem.desc" @blur="bindTextAreaBlur" />
				</view>
			</view> -->
		</view>
		<!-- <view class="confirm-btn" @click="confirm">
			<view class="inner-btn">确认</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				handleResult: '',
				dispositionForm: {
					workerId: '',
					desc: '',
					deductScore: '',
				},
				workerList: [],
				workerInfoList: [],
				handleResult: '',
				alarmItem: {},
				alarmTypeArrList: [],
			}
		},
		computed: {
			alarmTypeName() {
				return (alarmType) => {
					return this.alarmTypeArrList.filter(item => item.data == alarmType).map(item => item.name).join("、");
				}
			}
		},
		onLoad(option) {
			this.alarmItem = JSON.parse(decodeURIComponent(option.item));
			// this.alarmItem.deductScore = this.alarmItem.aiDeductRule.deductScore;
			// this.handleResult = this.alarmItem.handleResult
			console.log('alarmItem',this.alarmItem)
		},
		mounted() {
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			// this.getWorkerList()
			this.getDictionaryList();
		},
		methods: {
			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			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
						}
					}
				})
			},
			getDictionaryList(){
				this.sendRequest({
					url: 'xmgl/dictionaryItem/list',
					method: "get",
					data: {
						projectSn: this.projectSn,
						dictionaryEncoding: "ai_analyse_hard_ware_alarm_record_type",
					},
					success: res => {
						if (res.code == 200) {
							console.log('alarmTypeArrList', res)
							this.alarmTypeArrList = res.result
						}
					}
				})
			},
			// isShowContent(e){
			// 	this.handleResult = e.detail.value
			// 	if(this.handleResult === 2){
			// 		this.cleanForm()
			// 	}
			// 	console.log(this.dispositionForm);
			// },
			cleanForm(){
				this.dispositionForm.workerId = ''
				this.dispositionForm.desc = ''
				this.dispositionForm.deductScore = ''
			},
			bindTextAreaBlur(e) {
				this.dispositionForm.desc = e.detail.value
				console.log(e.detail.value)
			},
			change(e) {
				console.log("e:", e);
			},
			bindPickerChange: function(e) {
			    console.log('picker发送选择改变，携带值为', e.detail.value)
			    this.index = e.detail.value
			},
		}
	}
</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: 120rpx;
			height: 120rpx;
			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: 30rpx;
				color: #fff;
			}
	
		}
	
		.addImgBox {
			border: 1px solid rgba(42, 43, 91, 0.1);
			background-color: #f6f5f8;
			width: 120rpx;
			height: 120rpx;
			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: 90rpx;
		position: absolute;
		bottom: 5%;
		display: flex;
		justify-content: center;
		.inner-btn{
			width: 65%;
			height: 90rpx;
			color: #fff;
			background-color: #5181f6;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
		}
	}
	.content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.row-line{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			width: 100%;
			.row-label{
				display: flex;
				justify-content: flex-end;
				width: 22%;
			}
			.row-content{
				width: 70%;
				margin-left: 40rpx;
				display: flex;
				radio{
					margin-right: 20rpx;
				}
				:deep(uni-textarea ){
					width: 70%;
					height: 200rpx;
					padding: 26rpx 28rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					border: 1px solid #e1e1e1;
					border-radius: 6rpx;
					.uni-textarea-compute {
						width: 100%;
						height: 100%;
						overflow: auto;
					}
				}
				.row-select{
					width: 70%;
					height: 68rpx;
					border: 1px solid #e1e1e1;
					display: flex;
					align-items: center;
					border-radius: 6rpx;
				}
				.row-input{
					width: 60%;
					height: 68rpx;
					border: 1px solid #e1e1e1;
					display: flex;
					align-items: center;
					border-radius: 6rpx;
				}
				
				:deep( .uni-radio-input.uni-radio-input-disabled ){
					border: 2rpx solid #707070;
					background-color: white !important;
					width: 28rpx;
					height: 28rpx;
				}
				
				:deep( .uni-radio-input.uni-radio-input-checked:before ){
					content: '';
					background-color: #9F9F9F;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
				}
			}
		}
	}
	
	.barBox {
		background-color: #5181F6;
	}

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


	.backBtn {
		font-size: 30rpx;
		position: absolute;
		left: 20%;
	}

	.back {
		font-size: 24rpx;
	}

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