<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="90">
      <el-row>
        <el-col :span="6">
          <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="6">
          <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="6">
          <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="6">
          <el-form-item label="项目描述" prop="xmMs">
            <el-input v-model="queryParams.xmMs" placeholder="请输入项目描述" clearable @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>

        <el-col :span="6">
          <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="6">
          <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="6">
          <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-col :span="6">
          <el-form-item label="入库类型" prop="operationType">
            <el-select v-model="queryParams.operationType" 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="6">
          <el-form-item label="所属仓库" prop="warehouseCode">
            <el-cascader v-model="warehouseCode" :options="warehouseOptions" placeholder="请选择所属仓库" style="width: 100%;"
              :props="{ children: 'children', label: 'warehouseName', value: 'warehouseCode' }" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="场景" prop="scene">
            <el-select v-model="queryParams.scene" placeholder="请选择场景" clearable>
              <el-option v-for="dict in sceneTypeList" :key="dict.sceneCode" :label="dict.sceneName" :value="dict.sceneCode" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <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="6">
          <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="6">
          <el-form-item label="入库时间" prop="optionTime">
            <el-date-picker v-model="optionTime" 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="6">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="queryParams.remark" placeholder="请输入备注" clearable @keyup.enter="handleQuery" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="searchBtn">
          <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="primary" plain icon="Download" @click="handleExport"
          v-hasPermi="['wisdom:stock:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button plain icon="Printer" @click="handlePrintTag">打印标签</el-button>
      </el-col>
      <el-col :span="4">
        <el-form-item label="打印机编号" prop="printNum">
          <el-select v-model="printNum" clearable>
            <el-option v-for="dict in printNumList" :key="dict.id" :label="dict.statusName" :value="dict.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="stockList" show-overflow-tooltip show-summary :summary-method="getSummaries"
      ref="infoTableRef" 
      highlight-current-row 
      @row-click="(row) => tableInfoRowClick(row, infoTableRef)"
      @selection-change="printSelectionChange"
      border>
      <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="operationTypeName" width="150" />
      <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="wlNo" width="100" />
      <el-table-column label="物料描述" align="center" prop="wlMs" width="150" />
      <el-table-column label="供应商名称" align="center" prop="gysMc" width="150" />
      <el-table-column label="合同单价" align="center" prop="htDj" />
      <el-table-column label="总计" align="center" prop="totalAmount" />
      <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="wlTypeName" />
      <el-table-column label="场景" align="center" prop="sceneName" width="150" />
      <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="operationTypeName" width="150" />
      <el-table-column label="入库时间" align="center" prop="operationTime" width="150" />
      <el-table-column label="还料时间" align="center" prop="returnTime" width="150">
        <template #default="scope">
          <span>{{ parseTime(scope.row.returnTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="库龄" align="center" prop="stockAge" />



      <el-table-column label="备注" align="center" prop="remark" width="150" />
      <el-table-column label="一次封样号" align="center" prop="fycde1" width="150" />
      <el-table-column label="二次封样号" align="center" prop="fycde2" 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" @click="handleStockYk(scope.row)">移库</el-button>
          <el-button link type="primary" @click="handleUpdate(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 title="修改" v-model="openUpdate" append-to-body width="40%">
      <el-form ref="updateRef" :model="updateData" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="物资类型" prop="wlType">
              <el-select v-model="updateData.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="24">
            <el-form-item label="单价" prop="htDj">
              <el-input v-model="updateData.htDj" placeholder="单价" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="updateData.remark" placeholder="备注" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="身份码">
              <el-input v-model="updateData.entityId" placeholder="身份码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="供应商" prop="gysMc">
              <el-input v-model="updateData.gysMc" placeholder="供应商" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="项目号" prop="xmNo">
              <el-input v-model="updateData.xmNo" placeholder="项目号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="项目描述" prop="xmMs">
              <el-input v-model="updateData.xmMs" placeholder="项目描述" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="一次封样号">
              <el-input v-model="updateData.fycde1" placeholder="一次封样号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="二次封样号">
              <el-input v-model="updateData.fycde2" placeholder="二次封样号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="库存类型" prop="operationType">
              <el-select v-model="updateData.operationType" 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="24">
            <el-form-item label="入库时间" prop="operationTime">
              <el-date-picker style="width: 100%;" v-model="updateData.operationTime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" type="datetime" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="editForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog title="移库" v-model="openMove" append-to-body width="60%">
      <el-form :model="checkStockList">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="物料号">
              <el-input v-model="checkStockList[0].wlNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目号">
              <el-input v-model="checkStockList[0].xmNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单号">
              <el-input v-model="checkStockList[0].sapNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目描述">
              <el-input v-model="checkStockList[0].xmMs" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="移库原因">
              <el-input v-model="moveReason" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-table :data="checkStockList" height="400" style="width: 100%">
          <el-table-column label="数量" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.realQty" placeholder="数量">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="仓库" align="center">
            <template #default="scope">
              <el-cascader :options="warehouseOptions" v-model="scope.row.toCangku" @change="onChangeToCangku"
                :props="{ children: 'children', label: 'warehouseName', value: 'warehouseCode' }" />
            </template>
          </el-table-column>
          <el-table-column label="存放位置" align="center">
            <template #default="scope">
              <el-select v-model="scope.row.toPcode" clearable filterable placeholder="请选择库位">
                <el-option v-for="item in kwOptions" :key="item.id" :label="item.pcode" :value="item.pcode" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="容器码" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.toTrayCode" placeholder="请输入容器码"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitMoveForm">确 定</el-button>
          <el-button @click="cancelMove">取 消</el-button>
        </div>
      </template>

    </el-dialog>
    <!-- 图片预览 -->
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>

  </div>
</template>

<script setup name="Stock">
import { moveRecord } from "@/api/wisdom/bill";
import { listStock, getTotal, editStock,          printTag } from "@/api/wisdom/stock";
import { warehousingDict } from "@/api/information/warehousingtype";  //入库类型
import { materialtypeDict } from "@/api/information/materialtype";    //物资类型
import { warehouseAll } from "@/api/information/warehouseinfo";    //所属仓库
import { listScene } from "@/api/information/scene";    //所属仓库
import { personListDict } from "@/api/system/user";    //理货员
import { getKwAllList } from "@/api/information/pcdedetail";    //库位下拉数据
import { parseTime } from '@/utils/manage'


const { proxy } = getCurrentInstance();



const showSearch = ref(true);



const warehouseCode = ref('');  //所属仓库下拉数据



const optionTime = ref([]) //入库时间
const dialogImageUrl = ref('')
const dialogVisible = ref(false)



const printNum = ref(1)     //打印机编号
const printNumList = ref([
  { id: 1, statusName: "1" },
  { id: 2, statusName: "2" },
  { id: 3, statusName: "3" },
  { id: 4, statusName: "4" }
])
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    billNo: null,
    operationType: '',
    startTime: null,
    endTime: null,
    xmNo: null,
    sapNo: null,
    xmMs: "",
    wlNo: "",
    gysNo: "",
    pcode: "",
    gysMc: "",
    wlType: "",  //物资类型
    cangku: "",
    wlMs: "",
    ids: [],
    remark: "",
  },
  rules: {
    wlType: [{ required: true, message: "物资类型不能为空", trigger: "change" }],
    htDj: [{ required: true, message: "单价不能为空", trigger: "change" }],
    xmNo: [{ required: true, message: "项目号不能为空", trigger: "change" }],
    xmMs: [{ required: true, message: "项目描述不能为空", trigger: "change" }],
    rkTime: [{ required: true, message: "入库时间不能为空", trigger: "change" }],
    rkType: [{ required: true, message: "入库类型不能为空", trigger: "change" }]
  },
  switchRules: {
    toCangku: [{ required: true, message: "目标仓库不能为空", trigger: "change" }],
    toPcode: [{ required: true, message: "目标存放位置不能为空", trigger: "change" }],
  },
});

const { queryParams, rules } = toRefs(data);


/** 查询库存单据主列表 */
const stockList = ref([]);
const infoTableRef = ref(null);
const total = ref(0);
const loading = ref(true);
function getList() {
  loading.value = true;
  listStock(queryParams.value).then(response => {
    stockList.value = response.rows
    total.value = response.total;
    loading.value = false;
  });
}
getList();

const printList = ref([]) //要打印的数据列表
const printSelectionChange = (selection) => {
  printList.value = selection
}

// 获取总计
const totalMoney = ref(null)
const pcodeCount = ref(null)
const sumQty = ref(null)
function getSumInfo() {
  //统计信息
  let rkInfo = JSON.parse(JSON.stringify(queryParams.value))
  delete rkInfo.pageNum
  delete rkInfo.pageSize
  getTotal(rkInfo).then(response => {
  	totalMoney.value = response.data.totalAmount
    pcodeCount.value = response.data.locationCount
    sumQty.value = response.data.totalQuantity
  });
}
getSumInfo()

//所属仓库字典
const warehouseOptions = ref([]);
function warehouseFun() {
  warehouseAll().then(response => {
    warehouseOptions.value = response.data
  })
}
warehouseFun()

//物资类型
const wzTypeList = ref([]);
function materialFun() {
  materialtypeDict().then(response => {
    wzTypeList.value = response.data
  })
}
materialFun()
//场景下拉
const sceneTypeList = ref([]);
function listSceneFun() {
  listScene().then(response => {
    sceneTypeList.value = response.rows
  })
}
listSceneFun()

//理货员
const personList = ref([]);
function lhyList() {
  personListDict().then(response => {
    personList.value = response.data
  })
}
lhyList()

//入库类型典
const storeTypeList = ref([]);
function rklxList() {
  warehousingDict().then(response => {
    storeTypeList.value = response.data
  })
}
rklxList()

// 仓库下拉改变事件
function onChangeToCangku (val){
  checkStockList.value[0].toPcode = ''
  pcodeList(val)
}

// 库位字典
const kwOptions = ref([]);
function pcodeList(value) {
  getKwAllList(value[1]).then((response) => {
    kwOptions.value = response.data;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  if (warehouseCode.value) {
    queryParams.value.cangku = warehouseCode.value[1]
  }
  if (optionTime.value && optionTime.value.length > 0) {
    queryParams.value.startDate = optionTime.value[0]
    queryParams.value.endDate = optionTime.value[1]
  } else {
    queryParams.value.startDate = ""
    queryParams.value.endDate = ""
  }
  queryParams.value.pageNum = 1;
  if (printList.value.length > 0) {
    queryParams.value.ids = printList.value.map(item => item.id)
  }
  getList();
  getSumInfo();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  queryParams.value.warehouseCode = null
  optionTime.value = []
  warehouseCode.value = ''
  queryParams.value.operationType = ''
  queryParams.value.cangku = ''
  handleQuery();
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('wisdom/stock/export', {
    ...queryParams.value
  }, `库存记录_${parseTime(new Date().getTime(), '{y}年{m}月{d}日 {h}_{i}_{s}')}.xlsx`)
}

// 移库弹框
const openMove = ref(false); //移库
const checkStockList = ref([]); //移库数据
const moveReason = ref("")  //移库原因
// 移库弹框
function handleStockYk(row) {
  checkStockList.value = JSON.parse(JSON.stringify([row]));
	moveReason.value = "";
	if (checkStockList.value.length != 1) {
		proxy.$modal.msgError("请勾选一条数据");
		return;
	}
	checkStockList.value[0].toCangku = [
		checkStockList.value[0].parentWarehouseCode,
		checkStockList.value[0].cangku,
	];
	checkStockList.value[0].toPcode = checkStockList.value[0].pcode;
	checkStockList.value[0].toTrayCode = checkStockList.value[0].trayCode;
	checkStockList.value[0].num = checkStockList.value[0].realQty;
	openMove.value = true;
	pcodeList([
		checkStockList.value[0].parentWarehouseCode,
		checkStockList.value[0].cangku,
	]);
}
//  移库提交
function submitMoveForm() {
  if (checkStockList.value.filter((item) => item.realQty == 0).length > 0) {
    proxy.$modal.msgError("数量不能为空");
    return;
  }
  if (checkStockList.value.filter((item) => !item.toPcode).length > 0) {
    proxy.$modal.msgError("存放位置不能为空");
    return;
  }
  if (checkStockList.value.filter((item) => !item.toCangku).length > 0) {
    proxy.$modal.msgError("仓库不能为空");
    return;
  }
  // if (checkStockList.value[0].pcode == checkStockList.value[0].toPcode) {
  //   proxy.$modal.msgError(
  //     "不允许选择原来的库位【" + checkStockList.value[0].pcode + "】"
  //   );
  //   return;
  // }
  if (checkStockList.value[0].realQty > checkStockList.value[0].num) {
    proxy.$modal.msgError("移库数量不正确");
    return;
  }
  let arr = JSON.parse(JSON.stringify(checkStockList.value));
  arr[0].toCangku = arr[0].toCangku[1];
  let submitData = {
    fromRkId: checkStockList.value[0].id,
    moveReason: moveReason.value,
    targets: arr,
  };
  moveRecord(submitData).then((response) => {
    if (response.code == 200) {
      proxy.$modal.msgSuccess("操作成功");
      //数据列表
      getList();
      openMove.value = false;
    } else {
      proxy.$modal.msgError("操作失败");
    }
  });
}
function cancelMove() {
  openMove.value = false
}

// 修改弹框
const openUpdate = ref(false);  //修改
const updateData = ref({})
function handleUpdate(row) {
  openUpdate.value = true
  updateData.value = JSON.parse(JSON.stringify(row))
}
//修改提交
function editForm() {
  proxy.$refs["updateRef"].validate(valid => {
    if (valid) {
      editStock(updateData.value).then(response => {
        if (response.code == 200) {
          proxy.$modal.msgSuccess("修改成功");
          openUpdate.value = false
          handleQuery()
        }
      })
    }
  })
}






//打印标签
function handlePrintTag() {
  if (printList.value.length == 0) {
    proxy.$modal.msgError("请勾选数据");
    return
  }
  if (!printNum.value) {
    proxy.$modal.msgError("请选择打印机编号");
    return
  }
  for (let i = 0; i < printList.value.length; i++) {
    printList.value[i].printer = printNum.value
  }

  printTag(printList.value).then(response => {
    if (response.code == 200) {
      proxy.$modal.msgSuccess("打印指令已发送");
    } else {
      proxy.$modal.msgError("操作失败");
    }
  })
}
function getSummaries(param) {
  const { columns, data } = param;
  // console.log(columns)
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 1) { // 第一列不进行合计操作，通常是序列号或选择框等非数值列。
      sums[index] = '总计'; // 这里可以设置为其他文字或空字符串。
      return;
    } else if (index === 2) { // 第二列是金额列，进行求和操作。
      sums[index] = '总金额：' + totalMoney.value;
      //   }else if(index === 2){
      // 	sums[index] = totalMoney.value
    } else if (index === 3) {
      sums[index] = '共存于：' + pcodeCount.value + '个库位'
    } else if (index === 4) {
      sums[index] = '总数：' + sumQty.value
    }
  })
  return sums
}
</script>
<style scoped>
.searchBtn {
  display: flex;
  justify-content: flex-end;
}
</style>