<template>
	<view class="content">
		<view class="step_num">
			<view class="step step1">完善保养项目</view>
			<view class="step step2">确认备件使用情况</view>
			<view class="step step3">保养总结</view>
		</view>
		<view class="item ">
			<view class="itemname">计划开始时间</view>
			<view class="itemtext">
				<view >
					<input class="iteminput InputRightMargin" disabled placeholder="请选择时间" :value='startTime'/>
					<img src="../../static/img/dateIcon.png" class="dateIcon" />
				</view>
			</view>
		</view>
		<view class="item" >
			<view class="itemname">计划结束时间</view>
			<view class="itemtext">
				<view >
					<input class="iteminput InputRightMargin" disabled placeholder="请选择时间" :value='endTime'/>
					<img src="../../static/img/dateIcon.png" class="dateIcon" />
				</view>
			</view>
		</view>
		<view class="item item_line">
			<view class="itemname redMi">保养总用时</view>
			<view class="itemtext">
				<input class="iteminput timeRightMargin"  type="number" placeholder="请输入工时" v-model="manHour"/>
				<view class="itemunit">小时</view>
			</view>
		</view>
		
		<view class="item item_line">
			<view class="itemname redMi">停机时间</view>
			<view class="itemtext">
				<input class="iteminput timeRightMargin"  type="number"  placeholder="请输入工时" v-model="offHour"/>
				<view class="itemunit">小时</view>
			</view>
		</view>
		<view class="item item_line">
			<view class="itemname redMi">使用状况</view>
			<view class="itemtext">
				<input class="iteminput InputRightMargin" disabled @click="showSinglePicker" :value="result.level_label" />
					<uni-icons type="arrowright" class="myarrowright"></uni-icons> 
			</view>
		</view>
		<view class="item item_line item_textarea">
			<view class="itemname">保养总结</view>
			<textarea class="textarea" placeholder="请输入保养总结" v-model="cause"></textarea>
		</view>
		<view class="fixMargin"></view>
		<view class="fixBottom">
			<view class="uni-flex uni-row">
				<view style="-webkit-flex:1;flex: 1;">
					<button type="primary" plain="true"  style="width: 90%; background: #fff;" @click="toPrevious()">上一步</button>
				</view>
				<view style="-webkit-flex:1;flex: 1;">
					<button type="primary" style="width: 90%;" @click="toNext()">完成</button>
				</view>
			</view>
		</view>
		<mx-datepicker type="datetime" :value="value_time" :show="showPicker" @confirm="onSelected" @cancel="onSelected"></mx-datepicker>
		<mpvue-picker ref="mpvuePicker" mode="selector" :deepLength="deepLength"
		 @onConfirm="pickerConfirm" :pickerValueArray="resultArray"></mpvue-picker>
		 <view class="goHome" @click='goMain()'>
		 	<img src="../../static/img/gohome.png">
		 </view>
	</view>
</template>
<script>
	import {mapState,mapMutations} from 'vuex'
	import devBlock from '@/components/xinsoft-dev-block/xinsoft-dev-block.vue'
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import mxDatepicker from '@/components/mx-datepicker/mx-datepicker.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			devBlock,mxDatepicker,mpvuePicker,
			uniIcons
		},
		data() {
			return {
				id: '',
				record: {},
				value_time:'',
				showPicker: false,
				startTime:'',
				endTime:'',
				nextTime:'',
				manHour:'',
				cause:'',
				offHour:'',
				deepLength:1,
				resultArray:[],
				result:{
					level_value:'',
					level_label:''
				},
				pickerValueDefault:[0]
			}
		},
		computed: {
		...mapState(['keepDetails']),
		...mapState(['keepPartList'])
		},
		onLoad(option) {
			this.id = option.id;
			if(this.id==undefined){
				uni.reLaunch({
				    url: 'eqUpkeep'
				});
				return false;
			}
			var _this = this;
			this.$http.request({
				url: '/apis/upkeepPlan/oneRecordDetail',
				params: {
					recordId: option.id
				},
			}).then(res => {
				if (res.data.code == 0) {
					if(res.data.data && res.data.data.record.length>0){
						this.record = res.data.data.record[0];
						this.startTime = this.record.planStarttime; 
						this.endTime = this.record.planendtime;
					}
				}
			}).catch(err => {
				console.log(err)
			});
			
			//初始化使用状态
			this.$http.request({
				 url: '/apis/dict/getDictsByType',
				 params: {
				   type: 'device_status'
				 },
			}).then(res=>{
				if(res.statusCode == '200'){
					var useType = res.data.datas;
					for (let i = 0; i < useType.length; i++) {
					    var myVal=
					    	{
					    		'label': useType[i].name,
					    		'value': useType[i].id
					    	}
					    _this.resultArray.push(myVal);
					}
					if(!_this.result.level_value){
						_this.result.level_value = useType[0].id;
						_this.result.level_label = useType[0].name;
					}
				}
			}).catch(err=>{
				console.log(err);
			});
		},
	
		methods:{
			...mapMutations(['setkeepPartList']),
			...mapMutations(['setkeepDetails']),
			toPrevious() {
				uni.navigateTo({
					url: "keepStep2?id="+this.id
				});
			},
			pickerConfirm(e){
				this.result.level_label = e.label;
				this.result.level_value = e.value[0]; 
			},
			showSinglePicker() {
				this.pickerValueDefault = [0];
				this.$refs.mpvuePicker.show();
			},
			onShowDatePicker(n) { //显示
				this.time_index=n;
				if(n==1){
					this.value_time=this.startTime;
				}else if(n==2){
					this.value_time=this.endTime;
				}else if(n==3){
					this.value_time=this.nextTime;
				}
				this.showPicker = true;
			},
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					if(this.time_index==1){
						this.startTime = e.value+":00";
					}else if(this.time_index==2){
						this.endTime = e.value+":00";
					}else if(this.time_index==3){
						this.nextTime = e.value+":00";
					}
				}
			},
			
			toNext:function(){
				var _this = this;
				//处理数据 提交 。并且跳转到detail界面。
				var myData = {
					"record_id":this.id,
					"man_hour":parseFloat(this.manHour),
					"content":this.cause,
					"down_hour":parseFloat(this.offHour),
					"status":parseInt(this.result.level_value)
				}
				var keepDetails = [];
				var manHourCost = 0;
				if(this.keepDetails && this.keepDetails.keepDetails){
					this.keepDetails.keepDetails.forEach((vals,index)=>{
						var json = {
							"projectId":vals.proId,
							"manhour":parseInt(vals.manhour)||0,
							"result":vals.result||0,
							"remark":vals.remark||'',
							"manHourCost":parseFloat(vals.manHourCost)||0
						}
						keepDetails.push(json);
						manHourCost += parseFloat(vals.manHourCost||0);
					});
				}
				var keepPartList = [];
				var cost = 0;
				if(this.keepPartList&& this.keepPartList.keepPartList){
					this.keepPartList.keepPartList.forEach((vals,index)=>{
						var json = {
							"partId":vals.id,
							"spart_amount":parseInt(vals.amount),
							"spart_sum":parseInt(vals.amount)*parseFloat(vals.price),
							"remark":'',
							"spartPrice":parseFloat(vals.price)
						}
						keepPartList.push(json);
						cost += parseFloat(vals.spart_sum||0);
					});
				}
				
				myData.projectArray = encodeURIComponent(JSON.stringify({
					"dataList":keepDetails
				}));
				myData.partArray = encodeURIComponent(JSON.stringify({
					"dataList":keepPartList
				}));
				myData.manHourCost = manHourCost;
				myData.cost = cost;
				if (myData.man_hour== '') {
					uni.showToast({
						title: '请填写保养工时',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				this.$http.request({
					url: '/apis/upkeepPlan/sbumitRecordDetail',
					params: myData,
				}).then(res => {
					_this.setkeepDetails({});
					_this.setkeepPartList({});
					// console.log(res)
					if (res.data.code == 0) {
						uni.showToast({
							title: '提交成功',
							icon: 'none',
							duration: 1000
						});
						setTimeout(function(){
							uni.navigateTo({
								url: "upkeepDetail?id="+_this.id
							});
						},1000)
						
					}else{
						uni.showToast({
							title: res.data.msg||'提交失败，请稍后重试',
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '提交失败，请稍后重试',
						icon: 'none',
						duration: 2000
					});
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f7f5;
	}
</style>
<style scoped>
	.content {
		position: relative;
		min-height: 100%;
		overflow: auto;
		padding-bottom: 140upx;
		box-sizing: border-box;
	}

	.step_num {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		height: 80upx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.step {
		position: relative;
		font-size: 28upx;
		line-height: 80upx;
		padding-left: 30upx;
		float: left;
	}

	.step:before {
		position: absolute;
		left: 0px;
		content: '1';
		border: 1px solid #000;
		width: 28upx;
		height: 28upx;
		box-sizing: border-box;
		line-height: 28upx;
		border-radius: 200upx;
		font-size: 20upx;
		text-align: center;
		top: 26upx;
	}

	.step:after {
		position: absolute;
		content: '';
		width: 30upx;
		height: 2upx;
		background-color: #000;
		top: 40upx;
		left: 200upx;
	}

	.step2 {
		margin-left: 34upx;
		color: #000;
	}

	.step2:before {
		content: '2';
		border: 2upx solid #828282;
	}

	.step2:after,
	.step3:after {
		left: 250upx;
	}
	
	.step3:after {
		background-color: #000;
	}
	.step3 {
		margin-left: 34upx;
		color: #000;
	}

	.step3:before {
		content: '3';
		border: 2upx solid #000;
	}
	.step3:after {
		background-color: transparent;
	}
	.itemunit{
		position: absolute;
		right: 0;
		top: 0;
		height: 92upx;
		line-height: 92upx;
		color: #999;
		font-size: 26upx;
	}
	
</style>
