<template>
	<view class="page">
		<view class="item">
			<view class="itemname">设备编号</view>
			<view class="itemtext">{{serialNo_}}</view>
		</view>
		<view class="item item_line">
			<view class="itemname">设备名称</view>
			<view class="itemtext">{{deviceName_}}</view>
		</view>
		<!-- <view class="item item_line" @click="onShowDatePicker()">
			<view class="itemname">停机时间</view>
			<view class="itemtext">
				<view >
					<input class="iteminput InputRightMargin" disabled placeholder="请选择时间" :value='value'/>
					<img src="../../static/img/dateIcon.png" class="dateIcon" />
				</view>
			</view>
		</view> -->
		<view class="item">
			<view class="itemname">巡检项目</view>
			<view class="itemtext">{{projectName_}}</view>
		</view>
		<view class="item item_line">
			<view class="itemname">巡检标准</view>
			<view class="itemtext">{{function_}}</view>
		</view>
		<view class="item item_line">
			<view class="itemname">巡检结果</view>
			<view class="zc" :class="[result_btn==1?'btn_':'']" @click="result_btn=1">正常</view>
			<view class="yc" :class="[result_btn==2?'btn_':'']" @click="result_btn=2">异常</view>
		</view>
		<view class="item item_line item_textarea">
			<view class="itemname">巡检记录</view>
			<textarea class="textarea" placeholder="请输入详细巡检记录" v-model="content_"></textarea>
		</view>
		<view class="submit_btn" @click="submit()">提交</view>
		<!-- <mx-datepicker type="datetime" :value="value" :show="showPicker" @confirm="onSelected" @cancel="onSelected"></mx-datepicker> -->
		<view class="goHome" @click='goMain()'>
			<img src="../../static/img/gohome.png">
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mxDatepicker from '@/components/mx-datepicker/mx-datepicker.vue'
	export default {
		components: {
			mxDatepicker
		},
		computed: {
			...mapState(['patrolDetails'])
		},
		data() {
			return {
				result_btn: 0,
				showPicker: false,
				value: '',
				id: '',
				detailId: '',
				data_result: [],
				content: '',
				serialNo_: '', //设备编号
				deviceName_: '', //设备名称
				projectName_: '', //巡检项目
				function_: '', //巡检标准
				content_: '', //巡检记录

			}
		},
		onLoad(option) {
			
			this.id = option.id;
			if(this.id==undefined){
				uni.reLaunch({
				    url: 'eqPatrol'
				});
				return false;
			}
			this.detailId = option.detailId;
			this.index = option.index;
			var _this = this;
			this.$http.request({
				url: '/apis/patrolRecord/recordDetail',
				params: {
					id: option.id
				},
			}).then(res => {
				if (res.statusCode == '200') {
					this.data_result_index = res.data.details[this.index];
					this.result_btn = this.data_result_index.result; //巡检结果
					this.value = res.data.record.offTime||''; //停机时间
					this.serialNo_ = this.data_result_index.serialNo; //设备编号
					this.deviceName_ = this.data_result_index.deviceName; //设备名称
					this.projectName_ = this.data_result_index.projectName; //巡检项目
					this.function_ = this.data_result_index.function; //巡检标准
					this.content_ = this.data_result_index.content || ''; //巡检记录
					
					if(this.patrolDetails.id==this.id&&this.patrolDetails.patrolDetails[this.index].id==this.detailId){
						this.value=this.patrolDetails.patrolDetails[this.index].offTime||'';
						this.result_btn=this.patrolDetails.patrolDetails[this.index].result;
						this.content_=this.patrolDetails.patrolDetails[this.index].content||'';
					}
				}
			}).catch(err => {});
		},
		onBackPress(options) {//取消默认的返回事件
			if (options.from === 'backButton'||options.from === 'backbutton' || options.from === 'navigateBack') {
				uni.redirectTo({
					url: "patrolStep2?id=" + this.id
				});
				return true;

			}

		},
		methods: {
			...mapMutations(['setpatrolDetails']),
			// onShowDatePicker() { //显示
			// 	this.showPicker = true;
			// },
			// onSelected(e) { //选择
			// 	this.showPicker = false;
			// 	if (e) {
			// 		this.value = e.value+":00";
			// 		//选择的值
			// 		console.log('value => ' + e.value);
			// 		//原始的Date对象
			// 		console.log('date => ' + e.date);
			// 	}
			// },
			submit() {
				var j = {
					id: this.detailId,
					offTime: this.value,
					result: this.result_btn,
					content: this.content_
				}
				for (var i = 0; i < this.patrolDetails.patrolDetails.length; i++) {
					if (this.patrolDetails.patrolDetails[i].id == this.detailId) {
						this.patrolDetails.patrolDetails[i] = j;
					}
				}
				this.setpatrolDetails({id:this.id,patrolDetails:this.patrolDetails.patrolDetails});
				uni.redirectTo({
					url: "patrolStep2?id=" + this.id
				});
			}
		}
	}
</script>

<style scoped>
	.zc,
	.yc {
		position: absolute;
		width: 138upx;
		height: 58upx;
		border-radius: 8upx;
		top: 17upx;
		line-height: 58upx;
		text-align: center;
		background-color: #D7E6FF;
		border: 1px solid #3382FF;
		box-sizing: border-box;
		color: #3382FF;
		font-size: 26upx;
		right: 200upx;
	}

	.yc {
		right: 30upx;
	}

	.btn_ {
		background-color: #3382FF;
		color: #fff;
		border: none;
	}

	.textarea {
		position: absolute;
		left: 30upx;
		right: 30upx;
		bottom: 30upx;
		top: 92upx;
		height: auto;
		width: auto;
	}

	.submit_btn {
		/* position: absolute; */
		width: 90%;
		margin:15px auto;
		/* left: 5%; */
		/* bottom: 30upx; */
		text-align: center;
		height: 90upx;
		line-height: 90upx;
		border-radius: 10upx;
		color: #fff;
		background-color: #3382FF;
		font-size: 32upx;
	}
</style>
