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

<script setup>
import { clearSparePartAccessDetailsOut } from "@/utils/sparePartAccessDetailsOut";
import { clearSparePartAccessDetailsIn } from "@/utils/sparePartAccessDetailsIn";
import Index from "@/components/SparePartAccessDetails/index";
const store = useStore();
const { ctx } = getCurrentInstance();
const emit = defineEmits(["submit"]);

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

const { sparePartAccessType } = toRefs(props);

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

function submit() {
  emit("submit", sparePartAccessType.value == 10 ? store.state.data.sparePartAccessDetailsIn : store.state.data.sparePartAccessDetailsOut);
  // ctx.$emit("submit", sparePartAccessType.value == 10 ? store.state.data.sparePartAccessDetailsIn : store.state.data.sparePartAccessDetailsOut);
}

</script>