<template>
	<view>
		<view class="barBox">
			<headers :themeType="'white'" :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">
					<radio-group @change="isShowContent" v-model="isDis">
						<radio value="dis" checked="true">已处置</radio>
						<radio value="ign">误报忽略</radio>
					</radio-group>
				</view>
			</view>
			<view class="row-line" v-show="isDis === 'dis'">
				<view class="row-label">
					<text>描述</text>
				</view>
				<view class="row-content">
					<textarea :value="desc" @blur="bindTextAreaBlur" />
				</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">
					<!-- <select v-model="workerId" class="row-select">
						<option style="margin-left: 13px;" v-for="(item,i) in workerList" :key="i" :value="item.id">
							{{item.workerName}}
						</option>
					</select> -->
					<view class="row-input">
						<picker mode="selector" :range="workerList" range-key="workerName" @change="onChange" filterable>
							<view class="picker" style="margin-left: 12px;">
								<view class="" style="color: #e1e1e1;" v-if="!selectedItem.workerName">
									请选择违章人员
								</view>
								<view class="" v-else>
									{{selectedItem.workerName}}
								</view>
							</view>
						</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">
						<!-- <input style="margin-left: 13px;" :disabled="true" v-model="deductScore" class="uni-input" type="number" placeholder="" /> -->
						<view class="row-input" style="background-color: #e1e1e1;width: 100%;">
							<!-- <input disabled="true" style="margin-left: 13px;" v-model="alarmItem.deductScore" class="uni-input" type="number" placeholder=""/> -->
							<text style="margin-left: 13px;">{{deductScore}}</text>
						</view>
					</view>
					<text style="display: flex;align-items: center;margin-left: 10px;">分</text>
				</view>
			</view>
			
			
			
			
		</view>
		<view class="confirm-btn" @click="confirm">
			<view class="inner-btn">确认</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
				    { name: '苹果' },
				    { name: '香蕉' },
				    { name: '橙子' },
				    { name: '葡萄' },
				        // ... 更多选项
				],
				selectedItem: {},
				
				
				
				isDis: 'dis',
				workerId: '',
				desc: '',
				deductScore: '',
				workerList: [],
				workerInfoList: [],
				handleResult: '',
				alarmItem: {},
			}
		},
		onLoad(option) {
			this.alarmItem = JSON.parse(decodeURIComponent(option.item));
			console.log('alarmItem',this.alarmItem)
			this.deductScore = this.alarmItem.aiDeductRule.deductScore
		},
		mounted() {
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.getWorkerList()
		},
		methods: {
			onChange(e) {
				const index = e.detail.value;
				this.selectedItem = this.workerList[index];
				this.workerId = this.selectedItem.id
				console.log("change!!!!!!!!!")
			},
			
			confirm(){
				console.log(">>>>>>>>>>>>>>>>>>>>>>>");
				console.log(this.selectedItem);
				console.log(this.alarmItem);
				if(this.workerId === '' || this.workerId === null || this.workerId === undefined){
					uni.showToast({
					  title: '请选择违章人员',
					  icon: "none"
					})
					return
				}
				if(!this.deductScore){
					uni.showToast({
					  title: '请输入分数',
					  icon: "none"
					})
					return
				}
				// if(this.isDis === 'dis') {
				// 	if(this.workerId === '' || this.workerId === null || this.workerId === undefined){
				// 		uni.showToast({
				// 		  title: '请选择违章人员',
				// 		  icon: "none"
				// 		})
				// 		return
				// 	}
				// 	if(!this.deductScore){
				// 		uni.showToast({
				// 		  title: '请输入分数',
				// 		  icon: "none"
				// 		})
				// 		return
				// 	}
				// 	if(this.deductScore <= 0 || this.deductScore > 100){
				// 		uni.showToast({
				// 		  title: '请输入1-100内的分数',
				// 		  icon: "none"
				// 		})
				// 		return
				// 	}
						
				// 	this.handleResult = 1
				// 	this.alarmItem.desc = this.desc
				// 	this.alarmItem.workerInfoList = [{id: this.workerId}]
				// 	this.alarmItem.deductScore = this.deductScore
				// 	this.alarmItem.handleResult = this.handleResult
				// }
				// if(this.isDis === 'ign'){
				// 	this.handleResult = 2
				// 	this.alarmItem.handleResult = this.handleResult
				// }
				// this.handleResult = 1
				let requestData = {
					...this.alarmItem,
					handleResult: 1,
					handleDone: true,
					projectSn: this.projectSn,
					workerInfoList: [{id: this.workerId}]
				}
				this.sendRequest({
					url: 'xmgl/aiAnalyseHardWareAlarmRecord/edit',
					method: "post",
					data: requestData,
					success: res => {
						if (res.code == 200) {
							console.log('res', res)
							uni.navigateBack({delta: 1})
						}
					}
				})
			},
			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.desc = ''
				this.deductScore = ''
			},
			bindTextAreaBlur(e) {
				this.desc = e.detail.value
				console.log(e.detail.value)
			},
			change(e) {
				console.log("e:", e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.confirm-btn{
		width: 100%;
		height: 45px;
		// background-color: darkred;
		position: absolute;
		bottom: 5%;
		display: flex;
		justify-content: center;
		.inner-btn{
			width: 65%;
			height: 45px;
			color: #fff;
			background-color: #5181f6;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
		}
	}
	.content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.row-line{
			margin-top: 10px;
			display: flex;
			align-items: center;
			width: 100%;
			.row-label{
				display: flex;
				justify-content: flex-end;
				width: 30%;
			}
			.row-content{
				width: 70%;
				margin-left: 20px;
				display: flex;
				radio{
					// font-size: 18px;
					margin-right: 30px;
					// 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: 3px;
					.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: 3px;
					background-color: #fff;
				}
				.row-input{
					width: 70%;
					height: 78rpx;
					border: 1px solid #d8d8d8;
					display: flex;
					align-items: center;
					border-radius: 3px;
				}
				.select-container{
					// height: 80px;
					// overflow: auto;
				}
			}
		}
	}
	
	.barBox {
		background-color: #5181F6;
	}

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


	.backBtn {
		// display: flex;
		// justify-content: flex-start;
		font-size: 16px;
		position: absolute;
		left: 20%;
	}

	.back {
		font-size: 12px;
	}

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