<template>
	<div class="app-container">
	  <el-form :model="queryParams" ref="queryRef"  v-show="showSearch" >
		<el-row :gutter="40">
		  <el-col :span="5">
			<el-form-item label="还料时间" prop="returnTime">
				<el-date-picker
					v-model="returnTime"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					clearable
					placeholder="请选择出库时间"
					format="YYYY/MM/DD"
					value-format="YYYY-MM-DD"
				>
				</el-date-picker>
			</el-form-item>
		  </el-col>
		  <el-col :span="5">
			<el-form-item label="项目号" prop="xmNo">
			  <el-input
				v-model="queryParams.xmNo"
				placeholder="请输入项目号"
				clearable
				@keyup.enter="handleQuery"
			  />
			</el-form-item>
		  </el-col>
		  <el-col :span="5">
			<el-form-item label="订单编号" prop="sapNo">
			  <el-input
				v-model="queryParams.sapNo"
				placeholder="请输入订单编号"
				clearable
				@keyup.enter="handleQuery"
			  />
			</el-form-item>
		  </el-col>
		  <el-col :span="5">
			<el-form-item label="单据号" prop="billNo">
			  <el-input
				v-model="queryParams.billNo"
				placeholder="请输入订单编号"
				clearable
				@keyup.enter="handleQuery"
			  />
			</el-form-item>
		  </el-col>
		  <el-col :span="4">
			<el-form-item>
			  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
			  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		  </el-col>
		</el-row>
	  </el-form>
  
	  <el-row :gutter="10" class="mb8">
		


		<el-col :span="1.5">
		  <el-button
			type="success"
			plain
			icon="Printer"
			@click="handlePrint"
			v-print="printViewInfo"
			v-hasPermi="['wisdom:return:print']"
		  >打印单据</el-button>
		</el-col>
		<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
	  </el-row>
  
	  <el-table v-loading="loading"  :data="outboundList" ref="infoTableRef" highlight-current-row @row-click="(row) => tableInfoRowClick(row, infoTableRef)" @selection-change="printSelectionChange" border show-overflow-tooltip>
		<el-table-column type="selection" width="55" align="center" />
		<el-table-column label="序号" align="center" type="index" width="70" />
		<el-table-column label="单据号" align="center" prop="billNo" width="180"/>
		<el-table-column label="订单编号" align="center" prop="sapNo" width="150"/>
		<el-table-column label="项目号" align="center" prop="xmNo" width="150"/>
		<el-table-column label="项目描述" align="center" prop="xmMs" width="150"/>
		<el-table-column label="（借用方）项目号" align="center" prop="xmNoCk" width="150"/>
		<el-table-column label="（借用方）项目描述" align="center" prop="xmMsCk" width="150"/>
		<el-table-column label="物料号" align="center" prop="wlNo" width="100"/>
		<el-table-column label="物料描述" align="center" prop="wlMs" width="150"/>
		<el-table-column label="供应商编码" align="center" prop="gysNo" width="150"/>
		<el-table-column label="供应商名称" align="center" prop="gysMc" width="150"/>
		<el-table-column label="计划交货金额" align="center" prop="jhAmt" width="120"/>
		<el-table-column label="合同单价" align="center" prop="htDj" />
		
		<!-- <el-table-column label="行号" align="center" prop="xh" /> -->
		<el-table-column label="计划交货数量" align="center" prop="jhQty" width="120"/>
		<!-- <el-table-column label="合同数量" align="center" prop="htQty" /> -->
		<el-table-column label="计量单位" align="center" prop="dw" />
		<el-table-column label="还料数量" align="center" prop="realQty" width="120"/>
		<el-table-column label="所属大库" align="center" prop="parentWarehouseName" width="150"/>
		<el-table-column label="所属小库" align="center" prop="warehouseName" width="150"/>
		<el-table-column label="库位码" align="center" prop="pcode" width="120"/>
		<el-table-column label="托盘码" align="center" prop="trayCode" />
		<el-table-column label="身份码" align="center" prop="entityId" width="150"/>
		<el-table-column label="类型" align="center" prop="operationTypeName" width="150"/>
		<!-- <el-table-column label="物资类型" align="center" prop="wlTypeName" />-->
		<el-table-column label="借料时间" align="center"  width="100">
		  <template #default="scope">
			<span>{{ parseTime(scope.row.borrowTime, '{y}-{m}-{d}') }}</span>
		  </template>
		</el-table-column>
		<el-table-column label="还料时间" align="center"  width="100">
		  <template #default="scope">
			<span>{{ parseTime(scope.row.returnTime, '{y}-{m}-{d}') }}</span>
		  </template>
		</el-table-column>
		<!-- <el-table-column label="理货员" align="center" prop="ckLihuoY" />
		<el-table-column label="备注" align="center" prop="ckRemark" width="200"/> -->
	  </el-table>
	  
	  <pagination
		v-show="total>0"
		:total="total"
		v-model:page="queryParams.pageNum"
		v-model:limit="queryParams.pageSize"
		@pagination="getList"
	  />
	  <!-- 打印 -->
	  <div  id="printMe" class="printMeBox" v-show="showContent">
		<printBill :billAllObj="printList" />
	  </div>
	</div>
  </template>
  
  <script setup name="outbound">
  import { listStock } from "@/api/wisdom/record";
  import printBill from "@/components/printBill/bill.vue";
  
  const { proxy } = getCurrentInstance();
  
  const showSearch = ref(true);
  
  const showContent = ref(false); // 控制打印内容是否显示
  const dateStr = ref("")   //打印单据生成的日期
  const printList = ref([]) //要打印的数据列表
  const returnTime = ref([]);
  const data = reactive({
	queryParams: {
	  pageNum: 1,
	  pageSize: 10,
	  returnTime:"",     //还料时间
	  isBorrowed: "2",
	  xmNo:"",
	  sapNo:"",
	  billNo:"",
	},
	printViewInfo: {
	  id: "printMe", //打印区域的唯一的id属性
	  popTitle: '入库信息打印', // 页眉文字 （不设置时显示undifined）（页眉页脚可以在打印页面的更多设置的选项中取消勾选）
	  beforeOpenCallback () { 
		showContent.value = false;
		}, // 开始打印之前的callback
	  openCallback () {  }, // 调用打印时的callback
	  closeCallback () {  }, // 关闭打印的callback(无法区分确认or取消)
	  clickMounted () {  },
  	  pageOrientation: 'portrait', // 打印方向，portrait-纵向，landscape-横向
	  standard: '',
	  extarCss: ''
	}
  });
  
  const { queryParams, printViewInfo } = toRefs(data);
  
  
  const loading = ref(true);
  const outboundList = ref([]);
  const infoTableRef = ref(null);
  const total = ref(0);
  /** 查询库存单据主列表 */
  function getList() {
	loading.value = true;
	queryParams.value.bizType = 3
	listStock(queryParams.value).then(response => {
	  outboundList.value = response.rows;
	  total.value = response.total;
	  loading.value = false;
	});
  }
  
  
  /** 搜索按钮操作 */
  function handleQuery() {
	if(returnTime.value && returnTime.value.length>0){
	  queryParams.value.startDate = returnTime.value[0]
	  queryParams.value.endDate = returnTime.value[1]
	}else{
	  queryParams.value.startDate = ""
	  queryParams.value.endDate = ""
	}
	queryParams.value.pageNum = 1;
	getList();
  }
  
  /** 重置按钮操作 */
  function resetQuery() {
	proxy.resetForm("queryRef");
	returnTime.value = []
	handleQuery();
  }
  
  //打印单据  多选框选中数据
  function printSelectionChange(selection){
	printList.value = selection
	console.log(queryParams.value.ids)
  }
  //打印单据
  function handlePrint(){
	if(printList.value.length==0){
	  proxy.$modal.msgError("请勾选数据");
	  return
	}
	const date = new Date();
	const year = date.getFullYear();
	const month = date.getMonth() + 1; // 月份从0开始，需要加1
	const day = date.getDate();
	const hour = date.getHours();
	const minute = date.getMinutes();
	const second = date.getSeconds();
	dateStr.value = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second
	showContent.value = true
  }
  
  
  /** 导出按钮操作 */
  function handleExport() {
	proxy.download('wisdom/stock/export', {
	  ...queryParams.value
	}, `stock_${new Date().getTime()}.xlsx`)
  }
  
  getList();
  </script>
  <style scoped lang="scss">
  .el-table .warning-row {
	--el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
  .el-table .success-row {
	--el-table-tr-bg-color: var(--el-color-success-light-9);
  }
  .titleBox{
	text-align: center;
	margin-bottom: 20px;
  }
  .printMeBox{
	div{
		line-height: 30px;
	}
  }
  .topBox{
	display: flex;
	flex-wrap: wrap;
  }
  .topEveryBox{
	width: 50%;
  }
  .tableBox{
	margin-top: 10px;
  }
  .oneLineBox{
	display: flex;
  }
  .everyBox{
	width: 25%;
  }
  .bottomBox{
	margin-top: 10px;
  }
  </style>
  