<template>
  <el-card class="box-card" shadow="never">
    <template #header v-if="header">
      <div class="card-header">
        <span class="text-bold" v-if="warehouseAccessType == 10">入库列表</span>
        <span class="text-bold" v-else-if="warehouseAccessType == 20">出库列表</span>
        <span class="text-bold">
          ({{ total }})
        </span>
      </div>
    </template>
    <Index :warehouseAccessType="warehouseAccessType"/>
    <div class="flex justify-end margin-top" v-if="total > 0">
      <el-button plain @click="clearWarehouseAccessDetailsIn" v-if="warehouseAccessType == 10 && total > 0">清 空</el-button>
      <el-button plain @click="clearWarehouseAccessDetailsOut" v-else-if="warehouseAccessType == 20 && total > 0">清 空</el-button>
      <el-button :disabled="total == 0" type="primary" @click="submit">提 交</el-button>
    </div>
  </el-card>
</template>

<script setup>
import { clearWarehouseAccessDetailsOut } from "@/utils/warehouseAccessDetailsOut";
import { clearWarehouseAccessDetailsIn } from "@/utils/warehouseAccessDetailsIn";
import Index from "@/components/WarehouseAccessDetails/index";
const store = useStore();
const { ctx } = getCurrentInstance();
const emit = defineEmits(["submit"]);

const props = defineProps({
  warehouseAccessType: {
    type: [Number, String],
    default: null,
  },
  header: {
    type: Boolean,
    dafault: true,
  }
});

const { warehouseAccessType } = toRefs(props);

const total = computed(() => {
  let total = 0;
  Object.values(warehouseAccessType.value == 10 ? store.state.data.warehouseAccessDetailsIn : store.state.data.warehouseAccessDetailsOut).map((item) => {
    total += item.sparePartRetrievalQuantity;
  });
  return total;
});

function submit() {
  emit("submit", warehouseAccessType.value == 10 ? store.state.data.warehouseAccessDetailsIn : store.state.data.warehouseAccessDetailsOut);
  // ctx.$emit("submit", warehouseAccessType.value == 10 ? store.state.data.warehouseAccessDetailsIn : store.state.data.warehouseAccessDetailsOut);
}

</script>