<template>
  <el-dialog
    title="新增零存"
    v-model="visible"
    width="450px"
    @close="close"
    append-to-body
    draggable
  >
    <div class="form-container">
      <el-form
        ref="queryRef"
        class="master-container"
        :model="queryParams"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="批次号：" prop="lotCode">
          <el-input
            placeholder="请输入批次号"
            v-model.trim="queryParams.lotCode"
            style="width: 200px"
            clearable
          />
        </el-form-item>
        <el-form-item label="零存数：" prop="storageNum">
          <el-input-number
            :controls="false"
            placeholder="请输入数量"
            v-model="queryParams.storageNum"
            style="width: 200px"
            :min="0"
            :precision="0"
          />
        </el-form-item>
        <el-form-item class="section-title" label="工段：" prop="deptId">
          <el-select-v2
            v-model="queryParams.deptId"
            :options="deptList"
            placeholder="请选择工段"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="存录人员：" prop="storagerId">
          <el-select
            v-model="queryParams.nickName"
            filterable
            style="width: 200px"
            remote
            reserve-keyword
            value-key="userId"
            placeholder="请选择操作者"
            :remote-method="(arg) => remoteUser(arg, queryParams)"
            @change="(arg) => handleUserChange(arg, queryParams)"
          >
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.nickName"
              :value="item"
            >
              <span style="float: left">{{ item.nickName }}</span>
              <span
                style="
                  float: right;
                  color: var(--el-text-color-secondary);
                  font-size: 13px;
                "
              >
                {{ item.userName }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" icon="Check" @click="handleSave"
          >确定
        </el-button>
        <el-button icon="Close" @click="close">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { getDeptList } from "@/api/business/planDetailSubDetail.js";
import { getDeptUserList, addSave } from "@/api/business/storageRetrieval";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["handleSaveSuccess"]);

const total = ref(0);
const deptList = ref([]);
const userList = ref([]);
const visible = ref(false);
const loading = ref(false);
const selections = ref([]);

/**查询对象 */
const data = reactive({
  queryParams: {
    pageSize: 10,
    pageNum: 1,
  },
  rules: {
    lotCode: [{ required: true, message: "批次号不能为空", trigger: "blur" }],
    storageNum: [
      { required: true, message: "零存数量不能为空", trigger: "blur" },
      {
        validator: (rule, value, callback) => {
          if (value <= 0) {
            callback(new Error("零存数量必须大于0"));
          } else {
            callback();
          }
        },
        trigger: "blur",
      },
    ],
    deptId: [{ required: true, message: "工段不能为空", trigger: "blur" }],
    storagerId: [
      { required: true, message: "录入人员不能为空", trigger: "change" },
    ],
  },
});
const { queryParams, rules } = toRefs(data);

/***********************  方法区  ****************************/
/** 获取行 id */
function getRowKey(row) {
  return row.id;
}

/**
 * 对话框打开 事件
 */
function open() {
  queryParams.value.pageNum = 1;
  visible.value = true;
  getDeptList().then((response) => {
    deptList.value = response.data.rows;

    loading.value = false;

    let index = deptList.value.findIndex((item) => {
      return item.label == "170000";
    });
    if (index > -1) {
      deptList.value.splice(index, 1);
    }
  });
}

/** 查询操作者 */
function remoteUser(reg, data) {
  console.log(data);
  if (!data.deptId) {
    proxy.$modal.msgError("请先选择工段");
    return;
  }
  getDeptUserList({
    keyword: reg,
    pageSize: 50,
    deptId: data.deptId,
  }).then((res) => {
    userList.value = {};
    console.log("res", res.data);
    userList.value = res.data.map((v) => ({
      userId: v.userId,
      nickName: v.nickName,
      userName: v.userName,
    }));
  });
}

function handleUserChange(data, quer) {
  quer.storagerId = data.userId;
  quer.storagerName = data.userName;
  quer.nickName = data.nickName;
}

/**
 * 对话框关闭 事件
 */
function close() {
  total.value = 0;
  visible.value = false;
  queryParams.value = {
    pageSize: 10,
    pageNum: 1,
  };
  proxy.resetForm("queryRef");
}

/** 保存事件 */
function handleSave() {
  proxy.$refs["queryRef"].validate((valid) => {
    if (valid) {
      addSave(queryParams.value).then((res) => {
        if (res.code == 200) {
          proxy.$modal.msgSuccess("操作成功");
          emit("handleSaveSuccess");
          close();
        }
      });
    }
  });
}

defineExpose({
  open,
});
</script>
  