<template>
	<view class="page">
		<uni-section title='报工单信息' type='line' :strong="true" class="bg-white"/>
		<view class="bg-white mb-1">
			<list-input title="工艺流程卡编码" :highlight="false" :subTitle="GYLCKH" :span='8' />
			<list-input title="当前应报工序" :highlight="false" :span='8'>
			  <template v-if='detail.GX'>{{detail.GX}}</template>
				<template v-else>--</template>
			</list-input>	
			<list-input title="应报工数量" :highlight="false" :span='8'>
				<template v-if='detail.LZSL'>{{detail.LZSL}}</template>
				<template v-else>--</template>
			</list-input>
		</view>
		<view class="bg-white mb-1">
			<list-input title="报工工序说明" :span="8" class="rounded">
				 <textarea 
				 class='width-100 form-item-textarea px-2'
				 :class="isTextAreaFocus ? 'text-left' : 'text-right form-item-textarea-blur' "
					v-model='produceDesc' 
					placeholder="请输入" 
					auto-height
					@focus="onFocus('textarea')" 
					@blur="onBlur('textarea')"
					/>
			</list-input>
		</view>
		<template v-for='(item,index) in list'>
			<list-item-delete :index='index' :showClear="showClear" @delete='onDelete(index)'>
				<view class="bg-white">
					<list-input title="生产人员员工号">
					  <input type="text" v-model='item.workerno' placeholder="请输入" class='text-right  form-item-input' />
					</list-input>	
					<list-input title="生产数量">
						<input type="text" v-model='item.amount' placeholder="请输入" class='text-right  form-item-input' />
					</list-input>
				</view>
			</list-item-delete>
		</template>
		
		<view class="my-2 mb-5 text-center">
			<btn-add @click="onAddWoker">添加生产人员</btn-add>
		</view>
		<btn-save @save='onSave' :disabledOk="disabledSubmit"/>
	</view>
</template>

<script>
	import uniSection from "@/components/uni-ui/uni-section/uni-section.vue"
	import listInput from "@/components/common/list-input.vue"
	import btnSave from "@/components/common/btn-save.vue"
	import btnAdd from "@/components/common/btn-add.vue"
	import listItemDelete from "@/components/common/list-item-delete.vue"
	import {formateScanData,showBackToast} from "@/common/utils/common.js"
	import {MAX_SCAN_NUM,MSG_MAX_SCAN,ERROR_GYLCKH_NODATA} from "@/common/utils/tipMessage.js"
	import {mapGetters,mapState} from "vuex"
	import {CORRECT_CODE} from "@/api/config.js"
	import {queryWorkreport,workreportSave} from "@/api/api.js"
	
	export default {
		components:{
			uniSection,
			listInput,
			btnSave,
			listItemDelete,
			btnAdd
		},
		data () {
			return {
				list:[{
					workerno:null,
					amount:null,
				}], 
				detail:{}, // 明细
				GYLCKH:null, // 工艺流程卡编码
				isTextAreaFocus:false ,// 是否聚焦文本框
				produceDesc:"",// 报工工序说明
				defaultCkList:[], // 默认仓库列表
			}
		},
		computed:{
			...mapState(['loginResponse']),
			...mapGetters(['disabledSubmit']),
			//是否跳转到领料单
			goMaterial () {
				const detail=this.detail
				if (detail.XYCZ > 0  && Number(detail.xh)===1) {
					return true
				}else{
					return false
				}
				return false
			},
			// 是否显示清空按钮
			showClear () {
				const item=this.list[0]
				const x=(item.workerno || item.amount) ? true : false
			}
		},
		onLoad (e) {
			if (!e.barcode) {
				return uni.navigateBack({
					delta:1
				})
			}
	  	this.GYLCKH=e.barcode  // 条形码
		  this.initPage()
		},
		methods:{
			// 初始化页面
			async initPage () {
				await this._queryWorkreport()
				this.list[0].amount=this.detail.LZSL
			},
			// 获取默认仓库
			async _queryDefaultStorage () {
				let resdata=await queryDefaultStorage()
				this.defaultCkList=resdata
				return this.defaultCkList
			},
			// 获取明细
			async _queryWorkreport () {
				const reqdata={
					GYLCKH:this.GYLCKH,
          YGH:this.loginResponse.userid,
				}
				const res=await queryWorkreport(reqdata)
				if(res.code!=CORRECT_CODE){
					return showBackToast()
				}
				if (res.data.length===0) {
					return showBackToast(ERROR_GYLCKH_NODATA)
				}
				this.detail=res.data[0]
				return this.detail
			},
			// 聚焦
			onFocus (key) {
				switch (key) {
					case "textarea" :
					this.isTextAreaFocus=true
					break;
				}
			},
			// 失去焦点
			onBlur (key) {
				switch (key) {
					case "textarea" :
					this.isTextAreaFocus=false
					break;
				}
			},
			// 删除工作人员
			onDelete (index) {
				uni.showModal({
					title:'确认删除该条物品吗?',
					success:(res)=>{
						if (res.confirm) {
							this.list.splice(index,1)
						}
					}
				})
			},
			// 添加 工作人员
			onAddWoker () {
				if (this.list.length >=MAX_SCAN_NUM) {
					return uni.showToast({
						title:MSG_MAX_SCAN,
						icon:"none"
					})
				}
				this.$nextTick(()=>{
					this.list.push({
						workerno:null,
						amount:null,
					})
				})
			},
			onSave () {
				let ok=true
				let msg=''
				let _total=0
				let items=[]
				
				this.list.forEach(item=>{
					if (!item.workerno || !item.amount) {
						ok=false
						msg='生产人员员工号和生产数量为必填项'
						return
					}
					_total+=Number(item.amount)
					items.push({"YGH":item.workerno,"SL":item.amount})
				})
				if (!ok) {
					return uni.showToast({
						title:msg,
						icon:"none"
					})
				}
				
				if (_total!==this.detail.LZSL) {
					ok=false
					msg='生产数量总和不等于应报工数量，请检查录入的生产数量'
				}
				if (!ok) {
					return uni.showToast({
						title:msg,
						icon:"none",
						duration:2000
					})
				}
				uni.showModal({
					title:"确认保存吗?",
					success:async (res)=>{
						if (res.confirm) {
							this.detail.items=items
							this.detail.BGGXSM=this.produceDesc
							
							if (this.goMaterial) {
								this.detail.items=items
								this.detail.BGGXSM=this.produceDesc
								uni.navigateTo({
									url:`/pages/work-material-edit/work-material-edit?GYLCKH=${this.GYLCKH}&detail=${JSON.stringify(this.detail)}`
								})
							}else {
								await this._workreportSave(items)
								uni.showToast({
									title:"保存成功"
								})
								uni.reLaunch({
									url:"/pages/index/index"
								})
							}
						}
					}
				})
			},
			// 请求保存接口
			async _workreportSave (items) {
				const detail=this.detail
				const reqdata={
					"GYLCKH":this.GYLCKH,
					"DQYBGX":detail.GXH,
					"BGGXSM":this.produceDesc,  
					"XYCZ":detail.XYCZ,  
					"items":items
				}
				await workreportSave(reqdata).then(resdata=>{
				})
				return true
			}
		}
	}
	
</script>

<style>
</style>
