<template>
  <div class="page-container column-container">
    <!-- 搜索区 -->
    <el-form
      class="list-search-container"
      :model="queryParams"
      ref="queryRef"
      :inline="true"
    >
      <el-form-item class="section-title" label="零存库管理" />
      <el-form-item class="section-title" label="工段：">
        <el-select-v2
          v-model="queryParams.deptId"
          :options="deptList"
          placeholder="请选择工段"
          style="width: 110px"
        />
      </el-form-item>
      <el-form-item label="批次号：">
        <el-input
          placeholder="请输入批次号"
          v-model.trim="queryParams.lotCode"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item label="产品描述：">
        <el-input
          placeholder="请输入产品描述"
          v-model.trim="queryParams.productDescription"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item label="图号：">
        <el-input
          placeholder="请输入图号"
          v-model.trim="queryParams.drawingNumber"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item label="人员编号：">
        <el-input
          placeholder="请输入人员编号"
          v-model.trim="queryParams.storagerUserName"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item label="存录员：">
        <el-input
          placeholder="请输入存录员"
          v-model.trim="queryParams.storagerName"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item label="零存时间：">
        <el-date-picker
          v-model="queryParams.startStorageTime"
          type="date"
          value-format="YYYY-MM-DD"
          :editable="false"
          clearable
          placeholder="请选择"
          style="width: 136px"
        />
        <span>~</span>
        <el-date-picker
          v-model="queryParams.endStorageTime"
          type="date"
          value-format="YYYY-MM-DD"
          :editable="false"
          clearable
          placeholder="请选择"
          style="width: 136px"
        />
      </el-form-item>
      <el-form-item label="取出批次：">
        <el-input
          placeholder="请输入取出批次"
          v-model.trim="queryParams.retrievalLotCode"
          style="width: 120px"
          clearable
          @keyup.enter="handleQuery"
          @keydown.enter.prevent
        />
      </el-form-item>
      <el-form-item label="零取时间：">
        <el-date-picker
          v-model="queryParams.startRetrievalTime"
          type="date"
          value-format="YYYY-MM-DD"
          :editable="false"
          clearable
          placeholder="请选择"
          style="width: 136px"
        />
        <span>~</span>
        <el-date-picker
          v-model="queryParams.endRetrievalTime"
          type="date"
          value-format="YYYY-MM-DD"
          :editable="false"
          clearable
          placeholder="请选择"
          style="width: 136px"
        />
      </el-form-item>
      <el-form-item label="状态：">
        <el-select
          v-model="queryParams.status"
          clearable
          placeholder="请选择状态"
          style="width: 130px"
        >
          <el-option
            v-for="dict in is_retrieval"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="info" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button
          type="primary"
          icon="Plus"
          v-hasPermi="['business:storageRetrieval:add']"
          @click="handleAdd"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 列表区 -->
    <div class="el-table-container">
      <div class="el-table-inner-container">
        <el-table
          ref="dataTable"
          v-loading="loading"
          border
          :data="dataList"
          highlight-current-row
          height="100%"
        >
          <el-table-column
            type="index"
            label="行号"
            width="50"
            align="center"
          />
          <el-table-column
            label="批次号"
            width="120"
            align="center"
            prop="lotCode"
          />
          <el-table-column
            label="产品描述"
            align="center"
            prop="productDescription"
          />
          <el-table-column
            label="图号"
            width="140"
            align="center"
            prop="drawingNumber"
          />
          <el-table-column
            label="版本号"
            align="center"
            width="70"
            prop="technologyVersion"
          />
          <el-table-column
            label="工段"
            width="90"
            align="center"
            prop="deptName"
          />
          <el-table-column
            label="人员编号"
            align="center"
            width="80"
            prop="storagerUserName"
          />
          <el-table-column
            label="存录员"
            align="center"
            width="80"
            prop="storagerName"
          />
          <el-table-column
            label="零存数量"
            align="center"
            width="90"
            prop="storageNum"
          >
            <template #default="scope">
              <el-input-number
                v-if="scope.row.editStatus"
                :controls="false"
                v-model="scope.row.storageNum"
                style="width: 90px"
                :min="0"
              />
              <span v-else>{{ scope.row.storageNum }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="零存时间"
            align="center"
            width="150"
            prop="createTime"
          />
          <el-table-column
            label="取出批次"
            align="center"
            width="120"
            prop="retrievalLotCode"
          >
            <template #default="scope">
              <el-input
                v-if="scope.row.editFetch"
                placeholder="请输入取出批次"
                v-model.trim="scope.row.retrievalLotCode"
                clearable
              />
              <span v-else>{{ scope.row.retrievalLotCode }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="取出时间"
            align="center"
            width="150"
            prop="retrievalTime"
          />
          <el-table-column label="状态" align="center" width="70" prop="status">
            <template #default="scope">
              <dict-tag :options="is_retrieval" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template #default="scope">
              <el-button
                link
                v-if="
                  !scope.row.editFetch &&
                  !scope.row.editStatus &&
                  scope.row.status == 0
                "
                type="warning"
                size="small"
                icon="Edit"
                @click="scope.row.editFetch = true"
                v-hasPermi="['business:storageRetrieval:fetch']"
                >取出</el-button
              >
              <el-button
                link
                v-if="!scope.row.editStatus && scope.row.editFetch"
                type="primary"
                size="small"
                icon="Finished"
                v-hasPermi="['business:storageRetrieval:fetchSave']"
                @click="handleCancelFetchSave(scope.row)"
                >保存</el-button
              >
              <el-button
                link
                v-if="!scope.row.editStatus && !scope.row.editFetch"
                type="warning"
                size="small"
                icon="Edit"
                @click="scope.row.editStatus = true"
                v-hasPermi="['business:storageRetrieval:update']"
                >编辑</el-button
              >

              <el-button
                link
                v-if="scope.row.editStatus && !scope.row.editFetch"
                type="primary"
                size="small"
                icon="Finished"
                @click="handleSubmit(scope.row)"
                >保存</el-button
              >
              <el-button
                link
                v-if="scope.row.editStatus || scope.row.editFetch"
                type="info"
                size="small"
                icon="Close"
                @click="handleCancelEdit"
                >取消</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 生产计划分配弹窗 -->
    <add-dialog ref="addDetailRef" @handleSaveSuccess="getList"></add-dialog>
  </div>
</template>
<script setup>
import {
  listStorageRetrieval,
  updateStorageRetrieval,
  updateFetch,
} from "@/api/business/storageRetrieval";
import addDialog from "./addDialog";
import { getDeptList } from "@/api/business/planDetailSubDetail.js";
const { proxy } = getCurrentInstance();

/** 字典数组区 */
const { is_retrieval } = proxy.useDict("is_retrieval");
/** 查询对象 */
const queryParams = ref({
  status: "0",
  pageNum: 1,
  pageSize: 10,
});
/** 变量 */
const dataList = ref([]);
const loading = ref(false);
const deptList = ref([]);
const total = ref(0);
const isDispatch = ref(false);

/***********************  方法区  ***********************/
//当前登录人员的咨询部门权限
function getList() {
  getDeptList().then((response) => {
    deptList.value = response.data.rows;
    isDispatch.value = response.data.others.isDispatch;
    loading.value = false;
    if (isDispatch.value) {
      deptList.value.unshift({ label: "全部", value: "0" });
    }
    let index = deptList.value.findIndex((item) => {
      return item.label == "170000";
    });
    if (index > -1) {
      deptList.value.splice(index, 1);
    }
    queryParams.value.deptId = deptList.value[0].value;
    getStorageRetrievalList();
  });
}
/** 查询列表 */
function getStorageRetrievalList() {
  loading.value = true;
  listStorageRetrieval(queryParams.value).then((res) => {
    if (res.rows.length > 0) {
      res.rows.forEach((element) => {
        element.editStatus = false;
      });
    }
    dataList.value = res.rows;
    console.log(dataList.value);
    total.value = res.total;
    loading.value = false;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getStorageRetrievalList();
}

/** 新增领取 */
function handleAdd() {
  proxy.$refs.addDetailRef.open();
}

/** 零取保存 */
function handleCancelFetchSave(data) {
  console.log("输入", data.retrievalLotCode);
  if (!data.retrievalLotCode) {
    proxy.$modal.msgError("请输入领取的批次号");
    return;
  }

  if (data.retrievalLotCode == data.lotCode) {
    proxy.$modal.msgError("零取批次不能与零存批次相同");
    return;
  }

  updateFetch(data).then((res) => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess("保存成功");
      getStorageRetrievalList();
    }
  });
}
//保存
function handleSubmit(data) {
  updateStorageRetrieval(data).then((res) => {
    proxy.$modal.msgSuccess("保存成功");
    getStorageRetrievalList();
  });
}
//取消编辑
function handleCancelEdit() {
  getStorageRetrievalList();
}

onMounted(() => {
  getList();
});
</script>
