<!-- 打印摸版 -->
<template lang="">
	<div>
		<div v-for="(idsItem, num) in printData.ids" :key="num">
			<div>
				<!-- 表头 -->
				<div
					style="
						width: 100%;
						overflow-y: hidden;
						text-align: center;
						overflow: hidden;
					"
					:id="'companyTilte' + num"
				>
					<div style="width: 100%; text-align: center">
						<span
							style="font-size: 18px; margin-top: 30px"
							v-if="
								printData.orderName !== '送货单' &&
								printData.orderName !== '备料订单'
							"
							>{{
								userInfo.identity == 1 || userInfo.identity == 3
									? userInfo.orgName
									: userInfo.customerName
							}}</span
						>

						<h1
							style="
								font-size: 20px;
								margin-top: 10px;
								margin-bottom: 20px;
							"
						>
							{{ printData.orderName }}
						</h1>
						<hr style="border: 1px soild #000" />
					</div>
				</div>
				<div
					:id="'headhtml' + num"
					style="
						width: 100%;
						overflow-y: hidden;
						text-align: center;
						overflow: hidden;
					"
				>
					<!--生产用料清单-->
					<div
						style="
							margin: 20px 0px;
							display: flex;
							align-items: center;
							flex-direction: column;
						"
						v-if="printData.orderName === '生产用料清单'"
					>
						<div
							id="head1"
							style="margin-bottom: 3px; word-break: break-all"
						>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>销售订单号:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].salBillNo
								}}</span>
							</div>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>生产订单号:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].moBillNo
								}}</span>
							</div>
						</div>
						<div style="margin-bottom: 3px; word-break: break-all">
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>物料编码:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].pMaterialNumber
								}}</span>
							</div>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>物料名称:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].pMaterialName
								}}</span>
							</div>
						</div>
						<div
							id="head2"
							style="margin-bottom: 3px; word-break: break-all"
						>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>规格型号:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].pSpecification
								}}</span>
							</div>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>生产订单备注:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].orderRemark
								}}</span>
							</div>
						</div>
						<div style="margin-bottom: 3px; word-break: break-all">
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>生产部门:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].workShop
								}}</span>
							</div>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>条码:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].barCode
								}}</span>
							</div>
						</div>
						<div style="margin-bottom: 3px; word-break: break-all">
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>数量:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].number
								}}</span>
							</div>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>期望交期:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].expectDate
								}}</span>
							</div>
						</div>
					</div>
					<!--委外用料清单-->
					<div
						style="
							margin: 20px 0px;
							display: flex;
							align-items: center;
							flex-direction: column;
						"
						v-if="printData.orderName === '委外用料清单'"
					>
						<div
							id="head1"
							style="margin-bottom: 3px; word-break: break-all"
						>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>销售订单号:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].salBillNo
								}}</span>
							</div>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>委外订单号:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].outSourcOrderNo
								}}</span>
							</div>
						</div>
						<div style="margin-bottom: 3px; word-break: break-all">
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>物料编码:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].pMaterialNumber
								}}</span>
							</div>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>物料名称:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].pMaterialName
								}}</span>
							</div>
						</div>
						<div
							id="head2"
							style="margin-bottom: 3px; word-break: break-all"
						>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>规格型号:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].pSpecification
								}}</span>
							</div>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>委外订单备注:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].orderRemark
								}}</span>
							</div>
						</div>
						<div style="margin-bottom: 3px; word-break: break-all">
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>供应商:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].supplier
								}}</span>
							</div>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>条码:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].barCode
								}}</span>
							</div>
						</div>
						<div style="margin-bottom: 3px; word-break: break-all">
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>数量:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].number
								}}</span>
							</div>
							<div
								style="
									overflow: hidden;
									width: 350px;
									float: left;
									margin-left: 20px;
									text-align: left;
									max-height: 55px;
								"
							>
								<label
									style="
										width: 50px;
										font-size: 14px;
										font-weight: bold;
										margin-right: 3px;
										text-align: left;
									"
									>期望交期:</label
								>
								<span style="font-size: 14px">{{
									printData.tableData[num][0].expectDate
								}}</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 表体 -->
				<div :id="'div2' + num">
					<!-- v-for="(printDataItem, printDataIndex) in printData.tableData[num]" :key="printDataIndex" -->
					<table
						border="1"
						width="100%"
						style="
							border: solid 1px #999999;
							border-collapse: collapse;
							table-layout: fixed;
							word-wrap: break-all;
						"
					>
						<thead>
							<!--表头 -->
							<tr>
								<th
									style="
										padding: 6px 0;
										font-weight: bold;
										font-size: 13px;
										border: solid 1px #999999;
									"
									v-for="(itm, index) in theadDate"
									:key="itm.thName"
									:style="{ width: itm.width }"
								>
									{{ itm.thName }}
								</th>
							</tr>
						</thead>
						<tbody>
							<!-- <tr v-for="(it, ind) in printData.tableData" :key="ind"></tr> -->
							<!--表体 -->

							<tr
								v-for="(it, ind) in printData.tableData[num]"
								:key="ind"
							>
								<td
									style="
										font-size: 12px;
										color: #303133;
										padding: 3px 1px;
										word-wrap: break-word;
										word-break: break-all;
										border: solid 1px #999999;
									"
									v-for="(itm, index) in theadDate"
									:key="itm.field"
									:style="{ 'text-align': itm.textAlign }"
								>
									{{
										itm.field !== ''
											? it[itm.field]
											: ind + 1
									}}
								</td>
							</tr>
							<!--合计 -->
							<tr>
								<td
									colspan="7"
									style="
										font-size: 12px;
										color: #303133;
										padding: 6px 0;
										word-wrap: break-word;
										word-break: break-all;
										text-align: center;
										border: solid 1px #999999;
									"
								>
									合计
								</td>
								<td
									style="
										font-size: 10px;
										color: #303133;
										padding: 3px 0;
										word-wrap: break-word;
										word-break: break-all;
										text-align: right;
										border: solid 1px #999999;
									"
								>
									<span
										style="color: blue; text-align: right"
										tdata="AllSum"
										format="#,##0.00"
										tindex="8"
										>######</span
									>
								</td>
								<td
									style="
										font-size: 10px;
										color: #303133;
										padding: 3px 0;
										word-wrap: break-word;
										word-break: break-all;
										text-align: right;
										border: solid 1px #999999;
									"
								>
									<span
										style="color: blue; text-align: right"
										tdata="AllSum"
										format="#,##0.00"
										tindex="9"
										>######</span
									>
								</td>
								<td></td>
							</tr>
						</tbody>
					</table>
				</div>
				<!-- 表尾-->
				<div
					style="
						width: 784px;
						overflow-y: hidden;
						text-align: left;
						overflow: hidden;
					"
					:id="'foothtml' + num"
				>
					<!-- 'foothtml'+ -->
					<div
						style="
							font-size: 14px;
							color: #303133;
							margin-top: 20px;
						"
						v-if="printData.tableData.length > 0"
					>
						<div
							style="width 100%; font-weight: bold;text-align:center"
						>
							本订单执行过程中如遇到任何国家或地方政策变化或分歧、争议，依据双方签订的合作协议/合同充分友好沟通协商解决。
						</div>
						<div
							style="
								font-size: 14px;
								margin-top: 30px;
								margin-left: 70px;
							"
						>
							<div
								style="float: left;width:200pxmargin-left:40px;"
							>
								<div style="margin-bottom: 5px">
									<span
										style="
											width: 70px;
											text-align: right;
											font-weight: bold;
											margin-right: 3px;
											margin-bottom: 5px;
										"
									>
										打印时间：</span
									>
									<span>{{
										new Date().toLocaleString()
									}}</span>
								</div>
							</div>
							<div
								style="
									float: left;
									width: 120px;
									margin-left: 100px;
								"
							>
								<div style="margin-bottom: 5px">
									<span
										style="
											width: 70px;
											text-align: right;
											font-weight: bold;
										"
										>发料人：</span
									>
									<span>{{
										printData.tableData[num][0].approverName
									}}</span>
								</div>
							</div>
							<div
								style="
									float: left;
									width: 120px;
									margin-left: 80px;
								"
							>
								<div style="margin-bottom: 5px">
									<span
										style="
											width: 70px;
											text-align: right;
											font-weight: bold;
										"
										>领料人：</span
									>
									<span>{{
										printData.tableData[num][0].approverName
									}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {};
	},
	props: {
		//如果不要这个显示就传那个标识 如果不要保存显示  就 btnType=['save'] 'disabled, de-disabled' --存在再集合里面就是 显示
		printData: {
			type: Object,
			default: function () {
				return {
					orderName: '订单',
					tableData: [],
					ids: [],
				};
			},
		},
		//这个区分不同单据的要素
		theadDate: {
			type: Array,
			default: function () {
				return [];
			},
		},
		//这个区分不同单据的要素
		includeTage: {
			type: Array,
			default: function () {
				return [];
			},
		},
	},
	computed: {
		...mapState({
			// 取出页面标签
			userInfo: (state) =>
				state && state.user && state.user.userInfo
					? state.user.userInfo
					: {},
		}),
	},
	mounted() {},
};
</script>
