<template>
  <el-dialog
    title="选择批次"
    v-model="visible"
    width="800px"
    height="400px"
    @close="close"
    append-to-body
    draggable
  >
    <el-form
      ref="dialogForm"
      :model="queryParams"
      :inline="true"
      style="padding-top: 16px"
    >
      <el-form-item
        label="产品描述："
        prop="productDescription"
        label-width="104"
      >
        <el-input
          v-model.trim="queryParams.keyword"
          type="text"
          @keydown.enter.prevent
          style="width: 160px"
          placeholder="请输入关键字"
          :clearable="true"
          @keyup.enter="handleSearch"
        />
      </el-form-item>
      <el-form-item label-width="20px">
        <el-button type="info" icon="Search" @click="handleSearch"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      ref="dialogTable"
      :data="dataList"
      size="small"
      v-loading="loading"
      border
      height="370px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" align="center" />
      <el-table-column type="index" label="行号" width="50" align="center" />
      <el-table-column
        label="批次号"
        align="center"
        prop="lotCode"
        width="100"
      />
      <!-- <el-table-column
        label="料号"
        align="center"
        prop="productCode"
        width="96"
      /> -->
      <el-table-column
        label="产品描述"
        align="center"
        prop="productDescription"
      />
      <!-- <el-table-column
        label="箱号"
        align="center"
        prop="originalCarrier"
        width="220"
      /> -->
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          icon="Check"
          :disabled="selections.length != 1"
          @click="handleMultipleSelected"
        >
          确 定
        </el-button>
        <el-button type="danger" icon="Close" @click="close">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 详情弹窗 -->
  <dialog-reject-info
    ref="dialogRejectInfoRef"
    @handleSaveSuccess="getIndexList()"
  />
</template>
<script setup>
import { listDayworkLot } from "@/api/business/daywork";
import DialogRejectInfo from "./DialogRejectInfo";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["handleSaveSuccess"]);
const total = ref(0);
const props = defineProps({
  multipleSelected: {
    type: Function,
    default: null,
  },
});

const dataList = ref([]);
const visible = ref(false);
const showAll = ref(false);
const loading = ref(false);
const queryParams = ref({
  existingOutsourceDetailIds: [],
  pageNum: 1,
  pageSize: 10,
});
const selections = ref([]);

/**
 * 对话框打开 事件
 */
function open() {
  visible.value = true;
  getList();
}

/**
 * 对话框关闭 事件
 */
function close() {
  queryParams.value.pageNum = 1;
  visible.value = false;
}

/**
 * 加载数据
 */
function getList() {
  loading.value = true;
  listDayworkLot(queryParams.value).then((res) => {
    console.log(res);
    dataList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
}

function getIndexList() {
  console.log("获取列表");
  emit("handleSaveSuccess");
}

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  selections.value = selection;
}

/**  搜索 事件 */
function handleSearch() {
  getList();
}
/** 确定事件 */
function handleMultipleSelected() {
  proxy.$refs.dialogRejectInfoRef.add(selections.value[0]);
  close();
}

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