<template>
  <el-dialog
    v-model="dialog.visible"
    :title="dialog.title"
    width="950px"
    @close="
      dialog.visible = false;
      emits('update:modelValue', false);
    "
  >
    <el-table id="table" :data="tableData" border>
      <el-table-column prop="productCode" label="物料编码" />
      <el-table-column prop="productName" label="物料名称" />
      <el-table-column prop="productModel" label="规格" />
      <el-table-column prop="needNum" label="需求数量" />
      <el-table-column prop="grantNum" label="已发放数量" />
      <el-table-column prop="stockNum" label="库存数量" />
      <el-table-column prop="secondSieves" label="是否二筛">
        <template #default="{ row }">
          {{ row.secondSieves ? "是" : "否" }}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script setup>
import { defineProps, ref } from "vue";
import { getStockList } from "@/api/plan";
const props = defineProps({
  modelValue: {
    type: [Boolean],
  },
  orderCode: {
    type: [String],
  },
});
const dialog = reactive({
  title: "备料",
  visible: false,
});
const tableData = ref([]);
const emits = defineEmits(["update:modelValue"]);
// 设置表格列或者其他自定义的option
const getList = async () => {
  const { data } = await getStockList(props.orderCode);
  tableData.value = data;
};

watch(
  () => props.modelValue,
  (newValue) => {
    dialog.visible = newValue;
    if (newValue) {
      getList();
    }
  },
  { immediate: true }
);
</script>
