<template>
	<div class="app-container">
	  <el-form :model="queryParams" ref="queryRef"  v-show="showSearch" label-width="90">
		<el-row >
		  <el-col :span="7">
			<el-form-item label="入库时间" prop="rkTime">
			  <!-- <el-date-picker
				v-model="rkTime"
				type="daterange"
				start-placeholder="开始时间"
				end-placeholder="结束时间"
				format="YYYY-MM-DD"
			  /> -->
			  <el-date-picker
              v-model="rkTime"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
			</el-form-item>
		  </el-col>
		  <el-col :span="4">
			<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="4">
			<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="4">
			<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 label="库存状态" prop="isChuku">
			  <el-select  placeholder="请选择" clearable disabled>
				  <el-option v-for="dict in storeStatusList" :key="dict.id" :label="dict.statusName" :value="dict.id" />
			  </el-select>
			</el-form-item>
		  </el-col> -->
		  
		  <el-col :span="4">
			<el-form-item label="物资类型" prop="wlType">
			  <el-select v-model="queryParams.wlType" placeholder="请选择物资类型" clearable >
				  <el-option v-for="dict in wzTypeList" :key="dict.id" :label="dict.typeName" :value="dict.typeCode" />
			  </el-select>
			</el-form-item>
		  </el-col>
		</el-row>
		<el-row >
		  <el-col :span="7">
			<el-form-item label="项目描述" prop="xmMs">
			  <el-input
				v-model="queryParams.xmMs"
				placeholder="请输入项目描述"
				clearable
				@keyup.enter="handleQuery"
			  />
			</el-form-item>
		  </el-col>
		  <el-col :span="4">
			<el-form-item label="物料号" prop="wlNo">
			  <el-input
				v-model="queryParams.wlNo"
				placeholder="请输入物料号"
				clearable
				@keyup.enter="handleQuery"
			  />
			</el-form-item>
		  </el-col>
		  <el-col :span="4">
			<el-form-item label="供应商编码" prop="gysNo">
			  <el-input
				v-model="queryParams.gysNo"
				placeholder="请输入供应商编码"
				clearable
				@keyup.enter="handleQuery"
			  />
			</el-form-item>
		  </el-col>
		  <el-col :span="4">
			<el-form-item label="库位码" prop="pcode">
			  <el-input
				v-model="queryParams.pcode"
				placeholder="请输入库位码"
				clearable
				@keyup.enter="handleQuery"
			  />
			  
			</el-form-item>
		  </el-col>
		  <el-col :span="4">
			<el-form-item label="入库类型" prop="rkType">
			  <el-select v-model="queryParams.rkType" placeholder="请选择入库类型" clearable >
				  <el-option v-for="dict in storeTypeList" :key="dict.id" :label="dict.typeName" :value="dict.typeCode" />
			  </el-select>
			</el-form-item>
		  </el-col>
		</el-row>
		<el-row>
		  <el-col :span="7">
			<el-form-item label="供应商名称" prop="gysMc">
			  <el-input
				v-model="queryParams.gysMc"
				placeholder="请输入供应商名称"
				clearable
				@keyup.enter="handleQuery"
			  />
			</el-form-item>
		  </el-col>
		  <!-- <el-col :span="4">
			<el-form-item label="所属仓库" prop="cangku">
				<el-select v-model="queryParams.cangku" placeholder="请选择仓库" clearable >
				  <el-option v-for="dict in warehouseList" :key="dict.id" :label="dict.warehouseName" :value="dict.warehouseCode" />
				</el-select>
			</el-form-item>
		  </el-col> -->
		  <el-col :span="4">
			<el-form-item label="物料描述" prop="wlMs">
			  <el-input
				v-model="queryParams.wlMs"
				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="danger"
			plain
			icon="Delete"
			@click="handleDel"
			>删除</el-button>
		</el-col>
		<el-col :span="1.5">
			<el-button
			type="primary"
			plain
			icon="Plus"
			@click="handleStore"
			>一键入库</el-button>
		</el-col>
	  </el-row>
  
	  <el-table v-loading="loading"  :data="stockList"  @selection-change="selectionChange" border show-overflow-tooltip>
		<el-table-column type="selection" width="55" align="center" />
  <!--      <el-table-column label="主键ID" align="center" prop="id" />-->
		<el-table-column label="单据号" align="center" prop="billNo" width="180"/>
		<el-table-column label="库存状态" align="center" width="100">
		  <!-- scope.row.isChuku==0?"已入库":(scope.row.isChuku==1?"已出库":"审批中") -->
		  <template #default="scope">
			<span>{{ isChukuFun(scope.row.isChuku)  }}</span>
		  </template>
		</el-table-column>
		<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="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="sapNo" width="150"/>
		<!-- <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="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="rkTypeName" width="150"/>
		<el-table-column label="物资类型" align="center" prop="wlTypeName" />
		<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="rkTime" width="100">
		  <template #default="scope">
			<span>{{ parseTime(scope.row.rkTime, '{y}-{m}-{d}') }}</span>
		  </template>
		</el-table-column>
		<el-table-column label="库龄" align="center" prop="stockAge" />
		<el-table-column label="理货员" align="center" prop="lihuoYName" />
		<!-- <el-table-column label="审核状态" align="center" prop="lihuoY" >
		  <template #default="scope">
			<span>{{ scope.row.auditResult==0?"已入库":"已出库" }}</span>
		  </template>
		</el-table-column> -->
		<el-table-column label="现场图片" align="center"  v-if="isExamine==1">
		  <template #default="scope">
			<el-image  :src="scope.row.scenePhotoUrl" style="width:50px;height: 50px;" 
			:zoom-rate="1.2"
			:max-scale="7"
			:min-scale="0.2"
			:preview-src-list="srcList"
			show-progress
			:initial-index="4"
			:preview-teleported="true"
			@click="preview(scope.row.scenePhotoUrl)"/>
		  </template>
		</el-table-column>
		<el-table-column label="备注" align="center" prop="remark" width="150"/>
		<!-- <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="130">
		  <template #default="scope">
			<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">一键入库</el-button>
			<el-button
			link
			type="primary"
			icon="Delete"
			@click="handleStockDelete(scope.row)"
		  >删除</el-button> 
		  </template>
		</el-table-column> -->
	  </el-table>
	  
	  <pagination
		v-show="total>0"
		:total="total"
		v-model:page="queryParams.pageNum"
		v-model:limit="queryParams.pageSize"
		@pagination="getList"
	  />

	  <!-- 图片预览 -->
	  <el-dialog v-model="dialogVisible">
		<img w-full :src="dialogImageUrl" alt="Preview Image" />
	  </el-dialog>
  
	</div>
  </template>
  
  <script setup name="inrevoke">
  // wisdomDelStock
  import { listInrevoke,delStore,storeFun} from "@/api/wisdom/inrevoke";
  import { getAudit} from "@/api/wisdom/stock";
  import {warehousingDict} from "@/api/information/warehousingtype";  //入库类型
  import {materialtypeDict} from "@/api/information/materialtype";    //物资类型
  import {warehouseDict} from "@/api/information/warehouseinfo";    //所属仓库
  import {personListDict} from "@/api/system/user";    //理货员
  import {getKwList} from "@/api/information/pcdedetail";    //库位下拉数据
  import { Plus } from '@element-plus/icons-vue'
  

  const { proxy } = getCurrentInstance();
  
  const stockList = ref([]);
  const open = ref(false);
  const openSwitch = ref(false);  //移库
  const loading = ref(true);
  const showSearch = ref(true);
  const idEdit = ref(0);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const title = ref("");
  const planLoading = ref(true);
  const planList = ref([]); //从供应计划中添加列表
  const checkPlanList = ref([]);  //已选中的要入库的数据
  const storeTypeList = ref([]);  //入库类型下拉数据
  const wzTypeList = ref([]);   //物资类型下拉数据
  const warehouseList = ref([]);  //所属仓库下拉数据
  const personList = ref([]);   //理货员下拉数据
  const orderNum = ref("")    //搜索条件：订单号
  const kwOptions = ref([]);  //库位下拉
  const showContent = ref(false); // 控制打印内容是否显示
  const dateStr = ref("")   //打印单据生成的日期
  const printList = ref([]) //要打印的数据列表
  const storeStatusList = ref([
	{id:0,statusName:"已入库"},
	{id:1,statusName:"已出库"}
  ])
  const moveReason = ref("")  //移库原因
  const rkTime = ref([])
  const isExamine = ref(0) //是否需要开启审核 1开启；0不开启
  const actionUrl = import.meta.env.VITE_APP_BASE_API+"/wisdom/signature/upload"
  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)
  const srcList = ref([])
  const autoFill = ref(false) //是否自动填充备注
  const kzms = ref("")
  const ids = ref([])
  
  const data = reactive({
	form: {},
	storeData:{},   //入库数据
	switchData:[],  //移库数据
	queryParams: {
	  pageNum: 1,
	  pageSize: 10,
	  isChuku:4,
	  billNo:null,
	  // rkTime: [],
	  startTime:null,
	  endTime:null,
	  xmNo: null,
	  sapNo: null,
	  xmMs:"",
	  wlNo:"",
	  gysNo:"",
	  pcode:"",
	  rkType:"",
	  gysMc:"",
	  wlType:"",  //物资类型
	  cangku:"",
	  wlMs:"",
	  ids:[]
	},



  });
  
  const { queryParams, storeData,form,switchData} = toRefs(data);
  function isChukuFun(isChuku){
	// scope.row.isChuku==0?"已入库":(scope.row.isChuku==1?"已出库":"审批中")

	if(isChuku == 0){
		return "已入库"
	} else if(isChuku == 1){
		return "已出库"
	}else if(isChuku == 3){
		return "借料出库"
	}else if(isChuku == 2){
		return "审批中"
	}else if(isChuku == 4){
		return "入库撤销"
	}else if(isChuku == 5){
		return "出库撤销"
	}
  }

  function preview(url){
	srcList.value = [url]
  }
  //多选
  function selectionChange(selection){
	ids.value = selection.map(item => item.id)
  }
  //删除
  function handleDel(){
	if(ids.value.length==0){
		proxy.$modal.msgError("请勾选数据");
		return
	}
	// console.log(ids.value)
	// return
	delStore(ids.value).then(response=>{
		getList();
		proxy.$modal.msgSuccess("操作成功");
	})
	// console.log(ids.value)
  }
  //一键入库
  function handleStore(){
	if(ids.value.length==0){
		proxy.$modal.msgError("请勾选数据");
		return
	}
	storeFun(ids.value).then(response=>{
		getList();
		proxy.$modal.msgSuccess("操作成功");
	})
  }


  //预览图片
  function handlePreview(uploadFile){
	// console.log(222222)
	// console.log(res)
	dialogImageUrl.value = uploadFile.response.url
	dialogVisible.value = true
  }
  function tableRowClassName({row, rowIndex}) {
	// console.log(row)
	  // 根据每行的数据，判断isError来增加class属性
	  if (row.isAdd) {
		return 'warning-row'
	  } 
	  // else {
	  //   return 'success-row'
	  // }
	  return '';
  }
  /** 查询库存单据主列表 */
  function getList() {
	loading.value = true;
	listInrevoke(queryParams.value).then(response => {
	  stockList.value = response.rows;
	  total.value = response.total;
	  loading.value = false;
	});
  }
  //判断是否需要开启审核功能
  function isAudit(){
	// {configKey:"stock.audit.enabled"}
	getAudit().then(response=>{
	  // console.log(2222222)
	  // console.log(response.msg)
	  isExamine.value = response.msg
	})
  }
  //库位字典
  function pcodeList(){
	getKwList().then(response=>{
	  kwOptions.value = response.data
	})
  }
  //所属仓库
  function warehouseFun(){
	//所属仓库下拉数据
	warehouseDict().then(response=>{
	  warehouseList.value = response.data
	})
  }
  //物资类型
  function materialFun(){
	//获取物资类型下拉数据
	materialtypeDict().then(response=>{
	  wzTypeList.value = response.data
	})
  }
  


  // 表单重置
  function reset() {
	planList.value = []
	storeData.value = {}
	proxy.resetForm("stockRef");
  }
  
  /** 搜索按钮操作 */
  function handleQuery() {
	
	if(rkTime.value && rkTime.value.length>0){
	  queryParams.value.startTime = rkTime.value[0]
	  queryParams.value.endTime = rkTime.value[1]
	}else{
	  queryParams.value.startTime = ""
	  queryParams.value.endTime = ""
	}
	queryParams.value.pageNum = 1;
	if(printList.value.length>0){
	  queryParams.value.ids = printList.value.map( item => item.id )	
	}
	// console.log(queryParams.value)
	getList();
  }
  
  /** 重置按钮操作 */
  function resetQuery() {
	proxy.resetForm("queryRef");
	rkTime.value = []
	// queryParams.value.startTime = ""
	// queryParams.value.endTime = ""
	handleQuery();
  }
  

  

  
  /** 新增按钮操作 */
  function handleAdd() {
	reset();
	open.value = true;
	title.value = "添加库存单据";
	//获取入库类型下拉数据
	warehousingDict().then(response=>{
	  storeTypeList.value = response.data
	})
	//理货员下拉数据
	personListDict().then(response=>{
	  personList.value = response.data
	})
  }
  function lhyList(){
	//理货员下拉数据
	personListDict().then(response=>{
	  personList.value = response.data
	})
  }
  function rklxList(){
	//获取入库类型下拉数据
	warehousingDict().then(response=>{
	  storeTypeList.value = response.data
	})
  }


  // function selectKw(row){
  //   console.log(row)
  // }
  /** 修改按钮操作 */
  function handleUpdate(row) {
	reset();
	idEdit.value = row.id
	getStock(row.id).then(response => {
	  let dataInfo = response.data
	  dataInfo.isnew = true
	  storeData.value.rkType = dataInfo.rkType
	  storeData.value.wlType = dataInfo.wlType
	  storeData.value.cangku = dataInfo.cangku
	  storeData.value.lihuoY = parseInt(dataInfo.lihuoY) 
	  planList.value = [dataInfo]
	  // form.value = response.data;
	  open.value = true;
	  title.value = "修改库存单据";
	});
  }
  function closeDialog(){
	idEdit.value = 0
  }
  





  
  // 撤销入库
  const handleStockDelete = (row) => {
	// dialogDelStock.value = true
	proxy.$modal.confirm('确定撤销吗？').then(function() {
	  if(row.isChuku==0){
		let data = {
		  id:row.id,
		  realQty:row.realQty,
		  gysJhId:row.gysJhId
		}
		return wisdomDelStock(data);
	  }else if(row.isChuku==1){
		return ckDelStock(row.id)
	  }
	  
	}).then(() => {
	  getList();
	  proxy.$modal.msgSuccess("操作成功");
	}).catch(() => {});
  }
  
  const dialogDelStock = ref(false)
  const delStockFormRef = ref(null)
  const delStockForm = ref({
	billNo:''
  })
  const delStockRules = ref({
	billNo: [{ required: true, message: '请输入单据号', trigger: ['blur'] }],
  })
  const submitDelStock = () => {
	proxy.$refs["delStockFormRef"].validate(valid => {
	  if (valid){
		wisdomDelStock(delStockForm.value.billNo).then(response=>{
		  if(response.code==200){
			proxy.$modal.msgSuccess("操作成功");
			//数据列表
			getList();
			dialogDelStock.value = false
		  }else{
			proxy.$modal.msgError("操作失败");
		  }
		})
	  }
	})
  }
  const cancelDelStock = () => {
	dialogDelStock.value = false
  }
  /** 导出按钮操作 */
  function handleExport() {
	proxy.download('wisdom/stock/export', {
	  ...queryParams.value
	}, `stock_${new Date().getTime()}.xlsx`)
  }

  //数据列表
  getList();
  //库位下拉数据
  pcodeList()
  //所属仓库
  warehouseFun()
  //物资类型
  materialFun()
  //是否开启审核
  isAudit()
  //入库类型下拉数据
  rklxList()
  //理货员下拉数据
  lhyList()
  </script>
  <style scoped>
  .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;
  }
  .topBox{
	margin-bottom: 10px;
	display: flex;
  }
  .bottomBox{
	margin-top: 20px;
  }
  .oneLineBox{
	display: flex;
  }
  .everyBox{
	width: 30%;
  }
  .examine{
	margin-top: 20px;
	height: 100px;
	background-color: #ededed;
	padding: 20px 0 0 20px;
	border-radius: 10px;
  }
  </style>
  