<template>
	<el-container>
	  <el-main>
		  <form method="POST" :model="workData" action="{:U('NewBarCodeNew/add_bach')}" style="margin-bottom:50px;" id="form">
		        <input name="userid" id="userid" value="{$session_config[uid]}" type="hidden">
		        <fieldset class="newlabel">
		            <legend style="width:auto;margin-left:20px;">标记参数</legend>
		            <table width="100%" border="1">
		                <caption>标签序列配置</caption>
		                <tr>
		                    <th style="width:40%;"><span>字段</span> </th>
		                    <th><span>值</span></th>
		                </tr>
		                <tr >
		                    <td><span>生产批次号</span></td>
		                    <td><input name="Gd_gdbh" type="text" v-model="workData.Gd_gdbh" @input="propertyChange" class="required" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                    <td><span>纸张名称</span></td>
		                    <td>
		                        <select name="maobao" v-model="workData.maobao" style="width: 380px;height: 30px;">
		        		  
		                        </select>
		                    </td>
		                </tr>
		                <tr >
		                    <td><span style="color: red">码包</span></td>
		                    <td><input name="mabao" type="text" v-model="workData.mabao" style="width: 380px;height: 30px;" placeholder="利群(新版)专用，不是利群(新版)不要填"></td>
		                </tr>
		                <tr style="display: none" class="peijian">
		                    <td><span style="color: red">配件名称</span></td>
		                    <td>
		                        <select name="peijian" v-model="workData.peijian" style="width: 380px;height: 30px; color: red" >
		        		  
		                        </select>
		                    </td>
		                </tr>
		                <tr>
		                    <td><span>单个流程包含的件数</span></td>
		                    <td><input name="tldx" type="text" v-model="workData.tldx" value="3000" class="required" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                    <td><span>总投纸数</span></td>
		                    <td>
		                        <input name="num"  v-model="workData.num" value="" style="width: 380px;height: 30px;">
		                    </td>
		                </tr>
		                <tr>
		                    <td><span>总流程</span></td>
		                    <td><input name="liucheng_total" type="number" v-model="workData.liucheng_total" value="" class="required" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                <td><span>版本号标识</span></td>
		                <td><input name="version" type="text" v-model="workData.version" class="required" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                <td><span>起始流程号</span></td>
		                <td><input name="start_liucheng" type="text" v-model="workData.start_liucheng" value="1" class="required" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                <td><span>本次打印流程数量</span></td>
		                <td><input name="liucheng_num" type="text" v-model="workData.liucheng_num" value="1" class="required" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                <td>
		                    <span>备注</span></td>
		                <td>
		                    <input name="remark" type="text" v-model="workData.remark" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                    <td>
		                        <span>左右偏移量</span></td>
		                    <td>
		                        <input name="x_offset" type="number" v-model="workData.x_offset" value="0" style="width: 380px;height: 30px;"></td>
		                </tr>
		                <tr>
		                    <td>
		                        <span>上下偏移量</span></td>
		                    <td>
		                        <input name="y_offset" type="number" v-model="workData.y_offset" value="0" style="width: 380px;height: 30px;"></td>
		                </tr>
		            </table>
		        </fieldset>
	             <div id="liucheng">
	                 <fieldset class="newlabel">
	                 <table width="100%" border="1" class="new_craft" id="new_craft">
	             	   <caption>工艺</caption>	  
	             		  <tr>
							  <td>上次<span style="color: red">{{department}}</span>工艺更新时间：<span style="color: red">{{update}}</span></td>
							  <td> 
							      <input type="button" style="margin-left: 1px;" value="增加工艺" @click="addInput"/>
							  </td>
						  </tr>
							  <tr v-for="(item,index) in gyData">
							      <td></td>
							      <td><input type="text" v-model="item.gy"></td>
							  </tr>
	                 </table>
	                 </fieldset>
	             </div>
		         <div style="position:fixed;bottom:0;width:100%;height:50px;line-height:50px;">
		         	 <button type='button' onsubmit='return false' class="submitbtn" @click="sendClick" id="send">打印</button>
		         </div>
		    </form>
	  </el-main>
	</el-container>
</template>

<script setup>
	import {
	  getDocumentData,
	  getDocumentHistory,
	  saveDocumentData,
	  getDocumentInfo
	} from '@/api/mes/job'
	import { getDictFunc, formatDate, formatBoolean, filterDict, ReturnArrImg, onDownloadFile } from '@/utils/format'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { ref, reactive } from 'vue'
	const workData = ref({
		Gd_gdbh:'',
		maobao:'',
		mabao:'',
		peijian:'',
		tldx:'',
		num:'',
		liucheng_total:'',
		version:'',
		start_liucheng:'',
		liucheng_num:'',
		remark:'',
		x_offset:'',
		y_offset:''
	})
	const department = ref()
	const update = ref()
	const data = ref()
	const gyData = ref([])
	const datas = ref([])
	const propertyChange = () => {
		if(workData.value.Gd_gdbh.length!==7){
			return false;
		}
		const getDocument = async() => {
		  const getDocumentDatas = await getDocumentData({order:workData.value.Gd_gdbh})
		  if (getDocumentDatas.code === 0) {
			  workData.value.version=getDocumentDatas.data.paper[0].产品版本号;
			  const getHistory = async() => {
			    const getDocumentHistorys = await getDocumentHistory({order:2109722,peijian:0})
			    if (getDocumentHistorys.code === 0) {
					department.value=getDocumentHistorys.data.department
					update.value=getDocumentHistorys.data.update
					gyData.value=getDocumentHistorys.data.data.map((item)=>({
						gy:item
					}))			  	  
			    }
			  }
			  getHistory()
		  }
		}
		getDocument()
		
	}
	const addInput = () => {
	 gyData.value.push({gy:''})
	}
	const sendClick = () => {
		// console.log(datas)
		// console.log(gyData.value)
		const saveDocument = async() => {
			datas.value = gyData.value.map((item)=>(item.gy))
			data.value= datas.value.join(",")
			// console.log(data.value)
		  const saveDocumentDatas = await saveDocumentData({order:2109722,data:data.value,peijian:0})
		  if (saveDocumentDatas.code === 0) {
		  	  console.log(saveDocumentDatas)
		  }
		}
		saveDocument()
	}
</script>

<style>
	.newlabel{
	    display: block;
	    -webkit-margin-start: 2px;
	    -webkit-margin-end: 2px;
	    -webkit-padding-before: 0.35em;
	    -webkit-padding-start: 0.75em;
	    -webkit-padding-end: 0.75em;
	    -webkit-padding-after: 0.625em;
	    min-width: -webkit-min-content;
	    border-width: 2px;
	    border-style: groove;
	    border-color: threedface;
	    border-image: initial;
	    width:870px;
	    padding:10px;
	    margin:10px;
	    float: left;
	}
	.legend{
	    display: block;
	    -webkit-padding-start: 2px;
	    -webkit-padding-end: 2px;
	    border-width: initial;
	    border-style: none;
	    border-color: initial;
	    border-image: initial;
	}
	#daima{
	    display: block;
	    border-width: 2px;
	    border-style: groove;
	    border-color: initial;
	    border-image: initial;
	    float: left;
	    margin-left: 950px;
	    margin-top: 18px;
	    width: 550px;
	    padding: 10px;
	    position: fixed;
	}
	#daima table{
	
	}
	.firm  ul,.product  ul,.tag ul{
	    width:100%;
	    padding:10px;
	    font-size:0;
	}
	.firm li,.product li,.tag li{
	    font-size:12px;
	}
	.firm li:first-child ul li,.product li:first-child ul li,.tag li:first-child ul li{
	    display:inline-block;
	    width:33.3333%;
	    height:20px;
	    line-height:20px;
	}
	.firm input,.product input,.tag input{
	    width:200px;
	    padding:5px;
	}
	.tag select{
	    width:198px;
	    padding:5px;
	}
	.firm li ul:last-child li{
	    width:580px;
	}
	.firm li ul:last-child li input{
	    width:476px;
	}
	.newlabel table{
	    margin-top:20px;
	    min-height: 25px; line-height: 25px;border-collapse: collapse;
	}
	.newlabel caption{
	    padding:5px 0;
	}
	.newlabel table,.newlabel table tr th,.newlabel table tr td { border:1px dashed #ddd;padding:5px;}
	#daima table,#daima table tr th,#daima table tr td { border:1px dashed #ddd;padding:5px;}
	#createcode{
	    display:inline-block;
	    width:100px;
	    height:30px;
	    line-height:30px;
	    margin-left:290px;
	    border-radius:10px;
	    background:#0fa2f1;
	    color:#fff;
	    text-align:center;
	    cursor: pointer;
	    opacity:0.8;
	    filter:80%;
	}
	.submitbtn{
	    width:100px;
	    height:30px;
	    line-height:30px;
	    background:#0fa2f1;
	    margin-left:30%;
	    text-align:center;
	    outline:none;
	    border:0;
	    color:#fff;
	    border-radius:10px;
	    opacity:0.8;
	    filter:80%;
	}
	.high{ color: red; }
	.msg{ font-size: 13px; }
	.onError{ color: red; }
	.onSuccess{ color: green; }
</style>