<template>
	<view>
		<view class="white-card">
			<view class="list-list">
				<view class="list-title">物料编号</view>
				<view class="list-right">
					<text>{{ planInfo.product_number }}</text>
				</view>
			</view>
			<view class="list-list">
				<view class="list-title">填报日期</view>
				<view class="list-right">
					<text>{{ planInfo.production }}</text>
				</view>
			</view>
			<view class="list-list">
				<view class="list-title">线别</view>
				<view class="list-right">
					<text>{{ planInfo.line_title }}</text>
					<!-- <image class="next" src="../../static/next.png"></image> -->
				</view>
			</view>
		</view>
		<view v-for="(item, index) in froms" :key="index" class="white-card"
			style="margin-top: 24upx;padding-top: 30upx;padding-bottom: 30upx;">
			<view class="mid-card">
				<view class="list-reson">
					<view class="left">班次</view>
					<view class="right">
						<text>{{ planInfo.frequency==0?'夜班':'白班' }}</text>
					</view>
				</view>
				<picker @change="reasonChange($event, index)" data-id="item.reason_no_id" mode="selector"
					:value="item.reason_no_id" range-key="title" :range="reason">
					<view class="list-reson">
						<view class="left">不良原因</view>
						<view class="right">
							<text>{{ reason[item.reasonIndex]?reason[item.reasonIndex].title:'' }}</text>
							<image src="../../static/next.png"></image>
						</view>
					</view>
				</picker>
				<view class="list-reson">
					<view class="left">数量</view>
					<view class="right"><input v-model="item.math" type="number" placeholder="请输入" /></view>
				</view>
				<picker  mode="selector"
				    @change="changeMothod($event, index)"
					:value="item.remake" :range="methodList" >
					<view class="list-reson">
						<view class="left">不良品处置</view>
						<view class="right">
							<text>{{ methodList[item.remake]?methodList[item.remake]:'请选择' }}</text>
							<image src="../../static/next.png"></image>
						</view>
					</view>
					</picker>				
				<view class="btn-jian" @tap="froms.splice(index, 1)" v-if="index > 0&&type==1&&isMenu(53)">
					<image src="../../static/jian.png"></image>
					<text>删除</text>
				</view>
			</view>
		</view>
		<view class="btn-jia" @tap="add" v-if="type==1&&isMenu(53)">
			<image src="../../static/jia.png"></image>
			<text>添加</text>
		</view>
		<view class="submit-btn"><button v-if="type==1&&isMenu(53)" :disabled="buttonState==false?true:false" type="primary"
				@tap="submit">提交</button></view>
		<view class="submit-btn" v-if="type==2&&isMenu(55)"><button :disabled="buttonState==false?true:false"
				type="primary" @tap="examine">
				审核</button></view>
	</view>
</template>

<script>
	import {
		reasonNo,
		badReasons
	} from '../../api/index.js';
	import {
		noDetail,
		noExamine
	} from "../../api/user.js";
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	export default {
		onLoad(e) {
			this.type=e.type;
			this.planInfo = JSON.parse(decodeURIComponent(e.badProduct));
			this.froms[0].plan_id = this.planInfo.plan_id;
			reasonNo({
				status: 1
			}).then(res => {
				this.reason = res;

			});
			const index = this.reason.findIndex((role) => role.id === id)
			console.log("是三手", this.reason[index])
			this.getInfo();
			this.power = this.userInfo.power;
			this.getArr();
			this.isMenu();

		},
		data() {
			return {
				methodList:["返修","报装"],
				methodIds:0,
				type:0,
				planInfo: {},
				ifEdit: 0,
				frequency: ['白班', '夜班'],
				reason: [],
				froms: [{
					plan_id: 0,
					reason_no_id: 0,
					math: "",
					remake: '',
					status: 1,
					frequency: 0,
					reasonIndex: 0
				}],
				buttonState: true,
				power: [],
				jurisdiction: [],
				examId:[]
			};
		},
		computed: {
			...mapGetters(['userInfo', 'roleType'])

		},
		methods: {
			changeMothod(e, index){
				this.froms[index].remake = e.detail.value;
			},
			getReasonIndex(item) {
				return this.reason.findIndex(value => {
					return value.id == item.reason_no_id;
				});
			},
			getArr() {
				if (this.power.length > 0) {
					let newArr = this.power.map(item => {
						this.jurisdiction.push(item.id)

					})

				}
				console.log("xinshuzu", this.jurisdiction)

			},
			isMenu(id) {
				console.log("id", id)
				return this.jurisdiction.includes(id);
			},
			frequencyChange(e, index) {
				this.froms[index].frequency = e.detail.value;
			},
			getReasonContent(id) {
				let info = this.reason.find(item => {
					return (item.id = id);
				});
				if (info) {
					return info.title;
				}
				return '请选择';
			},
			reasonChange(e, index) {
				this.froms[index].reasonIndex = e.detail.value;
			},
			add() {
				this.froms.push({
					plan_id: this.planInfo.plan_id,
					reason_no_id: 0,
					math: '',
					remake: '',
					status: 1,
					frequency: 0,
					reasonIndex: 0
				});
			},
			examine() {
				let params = JSON.parse(JSON.stringify(this.froms));
				params = params.map(item => {
					item.reason_no_id = this.reason[item.reasonIndex].id;
					return item;
				});
				this.$functions.confirm("是否进行此操作?").then(() => {
					noExamine({
						id: this.examId,
						status: 1,
						remark: '',
						data:params
					}).then(res => {

					}).then(res => {
						this.$functions.success('审核成功').then(() => {
							uni.navigateBack();
						})
					}).catch(res => {
						this.buttonState = true;
					});
				})

			},
			getInfo() {
				noDetail({
					plan_id: this.planInfo.plan_id
				}).then(res => {
					if (res) {
						res.map(items => {
							
							this.examId.push(items.id)
							this.froms.map(its => {
								its.id = items.id
							})
						})
						this.froms = res.map(item => {
							item.reasonIndex = this.getReasonIndex(item);
							return item;
						})
						this.ifEdit = 1
						console.log("不良品详情", this.examId)
					}

				})
			},
			submit() {
				let params = JSON.parse(JSON.stringify(this.froms));
				params = params.map(item => {
					item.reason_no_id = this.reason[item.reasonIndex].id;
					return item;
				});

				this.buttonState = false;
				this.$functions.confirm("是否进行此操作?").then(() => {
					badReasons({
						data: params
					}).then(res => {
						this.$functions.success('提交成功').then(() => {
							uni.navigateBack();
						})
					}).catch(res => {
						this.buttonState = true;
					});
				}).catch(res => {
						this.buttonState = true;
					});

			}
		}
	};
</script>

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