<template>
    <div>
        <template v-if="list.length > 0">
            <el-table :data="list" border>
                <!-- <el-table-column label="出入库编号" align="center" prop="sparePartAccessId" />
                <el-table-column label="备注" align="center" prop="remark" />
                <el-table-column label="备件id" align="center" prop="sparePartId" /> -->
                <el-table-column label="备件编号" align="center" prop="sparePartNumber" />
                <el-table-column label="备件名称" align="center" prop="sparePartName" />
                <el-table-column label="备件规格" align="center" prop="sparePartSpecifications" />
                <el-table-column label="备件品牌" align="center" prop="sparePartBrand" />
                <el-table-column label="数量" align="center" prop="sparePartRetrievalQuantity" />
                <el-table-column label="单位" align="center" prop="sparePartUnit" />
            </el-table>
        </template>
        <template
            v-else-if="sparePartAccessType == 10 && Object.values($store.state.data.sparePartAccessDetailsIn).length > 0">
            <el-table :data="Object.values($store.state.data.sparePartAccessDetailsIn)" border>
                <el-table-column label="备件编号" align="center" prop="sparePartNumber" />
                <el-table-column label="备件名称" align="center" prop="sparePartName" />
                <el-table-column label="备件规格" align="center" prop="sparePartSpecifications" />
                <el-table-column label="备件品牌" align="center" prop="sparePartBrand" />
                <el-table-column label="数量" align="center" prop="sparePartRetrievalQuantity" width="180px"
                    v-if="editable">
                    <template #default="scope">
                        <el-input-number v-model="scope.row.sparePartRetrievalQuantity" :min="1" :step="1"
                            @change="updateSparePartAccessDetailsIn(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column label="数量" align="center" prop="sparePartRetrievalQuantity" v-else />
                <el-table-column label="单位" align="center" prop="sparePartUnit" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100"
                    fixed="right" v-if="editable">
                    <template #default="scope">
                        <el-button link type="danger" icon="Delete" @click="removeSparePartAccessDetailsIn(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template
            v-else-if="sparePartAccessType == 20 && Object.values($store.state.data.sparePartAccessDetailsOut).length > 0">
            <el-table :data="Object.values($store.state.data.sparePartAccessDetailsOut)" border>
                <el-table-column label="备件编号" align="center" prop="sparePartNumber" />
                <el-table-column label="备件名称" align="center" prop="sparePartName" />
                <el-table-column label="备件规格" align="center" prop="sparePartSpecifications" />
                <el-table-column label="备件品牌" align="center" prop="sparePartBrand" />
                <el-table-column label="数量" align="center" prop="sparePartRetrievalQuantity" width="180px"
                    v-if="editable">
                    <template #default="scope">
                        <el-input-number v-model="scope.row.sparePartRetrievalQuantity" :min="1" :step="1"
                            @change="updateSparePartAccessDetailsOut(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column label="数量" align="center" prop="sparePartRetrievalQuantity" v-else />
                <el-table-column label="单位" align="center" prop="sparePartUnit" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100"
                    fixed="right" v-if="editable">
                    <template #default="scope">
                        <el-button link type="danger" icon="Delete" @click="removeSparePartAccessDetailsOut(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <Empty v-else />
    </div>
</template>


<script setup>
import { removeSparePartAccessDetailsOut, updateSparePartAccessDetailsOut } from "@/utils/sparePartAccessDetailsOut";
import { removeSparePartAccessDetailsIn, updateSparePartAccessDetailsIn } from "@/utils/sparePartAccessDetailsIn";
const store = useStore();
const props = defineProps({
    editable: {
        type: Boolean,
        default: true,
    },
    list: {
        type: Array,
        default: [],
    },
    sparePartAccessType: {
        type: [Number, String],
        default: null,
    },
});
const { editable, list, sparePartAccessType } = toRefs(props)
</script>
