<template>
	<view class="content">
		<view class="card-up">
			<view class="mode-up">
				<view>
					<text>模具编号</text>
					<input disabled="true" v-model="modeNo" />
				</view>
			</view>
			<view class="mode-up">
				<view>
					<text>模具名称</text>
					<input disabled="true" v-model="modeName" />
				</view>
			</view>
			<view class="mode-up">
				<view>
					<text>保养人员</text>
					<view>{{userInfo.name}}</view>
				</view>
			</view>
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="mode-up">
					<view>
						<text>保养时间</text>
						<input disabled="true" v-model="date" />
					</view>
				</view>
			</picker>
		</view>
		<view class="card-down" v-for="(item,index) in forms.item" :key="index">
			<view class="list">
				<view class="title">检测部位</view>
				<text>{{item.mode_check_item}}</text>
			</view>
			<view class="list">
				<view class="title">检测目的</view>
				<text>{{item.mode_check_aim}}</text>
			</view>
			<view class="list">
				<view class="title">检测结果</view>
				<view class="check-ul">
					<view class="xx-list" @tap="item.mode_check_result=value" v-for="(value,idx) in result" :key="idx">
						<image :src="item.mode_check_result==value?'../../static/xz.png':'../../static/wxz.png'"
							mode=""></image>
						<text>{{value}}</text>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="title">问题位置</view>
				<input placeholder="请输入" v-model="item.question_position" />
			</view>
			<picker :range="stepList" @change="bindStep($event,index)">
				<view class="list">
					<view class="title">措施</view>
					<view class="step-list">
						<text>{{stepList[item.step]}}</text>
						<image src="../../static/next.png"></image>
					</view>
				</view>
			</picker>
			<view class="add-lingjian" @tap="addRecord(index)">新增零件记录</view>
			<view class="components-ul" v-for="(value,idx) in item.components" :key="idx">
				<view class="components-list">
					<view>零件编号</view>
					<input placeholder="请输入" v-model="value.number" />
				</view>
				<view class="components-list">
					<view>零件名字</view>
					<input placeholder="请输入" v-model="value.name" />
				</view>
				<view class="components-list">
					<view>零件数量</view>
					<input type="number" placeholder="请输入" v-model="value.amount" />
				</view>
				<view class="btn-jian" @tap="item.components.splice(idx,1)" v-if="idx>0">
					<image src="../../static/jian.png"></image>
					<text>删除</text>
				</view>
			</view>
		</view>
		<view class="cyxj-content" style="margin-top: 24upx;">
			<view class="submit-btn">
				<button type="primary" :disabled="buttonState==false?true:false" @tap="submits">提交</button>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		staff,
		dictionary,
		modeMaintain
	} from "../../api/user.js"
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				modeId: '',
				modeNo: '',
				modeName: '',
				staffList: [],
				staffId: 0,
				date: currentDate,
				result: ["OK", "NG"],
				resId: 0,
				stepList: ["无", "抛光研磨", "更换零件", "修割/补镶件"],
				stepIds: 0,
				forms: {
					no: '',
					mode_id: 0,
					remake: '',
					remake_step: '',
					item: []
				},
				buttonState: true
			};
		},
		onLoad(e) {
			this.modeId = e.id;
			this.modeNo = e.no;
			this.modeName = e.name
			this.getStaff();
			this.getDictionary();
			this.forms.no = e.no;
			this.forms.mode_id = e.id;
		},
		computed: {
			...mapGetters(['userInfo', 'roleType']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getDictionary() {
				dictionary().then(res => {
					let mode_check_item = res.mode_check_item;
					let mode_check_position = res.mode_check_position;
					for (let b in mode_check_item) {
						this.forms.item.push({
							mode_check_item: mode_check_position[b].name,
							mode_check_aim: mode_check_item[b].name,
							mode_check_result: 'OK',
							question_position: '',
							step: 0,
							components: [{
								number: '',
								name: '',
								amount: ''
							}]
						});
					}
				})
			},
			bindStep(e, index) {
				this.forms.item[index].step = e.detail.value;
			},
			addRecord(index) {
				this.forms.item[index].components.push({
					number: '',
					name: '',
					amount: ''
				});
			},
			getStaff() {
				staff().then(res => {
					this.staffList = res;

					console.log("员工", res)
				})
			},
			modeStaff(e, item) {
				this.staffId = e.detail.value
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			checkResult(e) {
				this.resId = e
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			submits() {
				this.$functions.confirm("是否进行此操作").then(()=>{
					modeMaintain(this.forms).then(res => {
						this.$functions.success('提交成功').then(() => {
							uni.navigateBack();
						})
					}).catch(res => {
							this.buttonState = true;
						});
				}).catch(res => {
						this.buttonState = true;
					});
				// modeMaintain(this.forms).then(res => {
				// 	this.$functions.success("提交成功").then(() => {
				// 		uni.navigateBack({

				// 		})
				// 	});
				// })
			}
		}
	}
</script>

<style lang="scss">
	@import "./index.scss"
</style>
