<template>
  <el-dialog
    v-model="dialog.visible"
    :title="dialog.title"
    width="950px"
    @close="
      dialog.visible = false;
      emits('update:modelValue', false);
    "
  >
    <el-collapse accordion>
      <el-collapse-item
        v-for="item in filteredData"
        :title="item.docNo"
        :key="item"
      >
        <el-table id="table" :data="item.lineList" border>
          <el-table-column prop="productCode" label="物料编码" />
          <el-table-column prop="productName" label="物料名称" />
          <el-table-column prop="productModel" label="规格" />
          <el-table-column prop="actualNum" label="数量" />
          <el-table-column prop="batchNo" label="批号" />
          <el-table-column prop="bomRemark" label="BOM备注" />
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </el-dialog>
</template>
<script setup>
import { defineProps, ref } from "vue";
import { getReturnList } from "@/api/plan";
import { useCommonStoreHook } from "@/store";
import dictDataUtil from "@/common/configs/dictDataUtil";
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 getReturnList(props.orderCode);
  tableData.value = data;
};
// 过滤
const filteredData = computed(() => {
    return tableData.value
        .map(item => ({
            ...item,
            lineList: item.lineList.filter(line => line.moDocNo === props.orderCode)
        }))
});

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