<template>
    <div style="display: flex; flex-direction: column;">
        <div style="display: flex; flex-direction: row; margin-bottom: 20px;">
            <div style="margin-right: 50px;">配件</div>
            <el-button type="primary" size="small" @click="handlePartsShow">添加</el-button>
        </div>
        <el-table :data="partsData.partList" border>
            <el-table-column prop="partGoodsName" label="配件名" />
            <el-table-column prop="bomCode" label="BOM" />
            <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button type="warning" size="small" @click="handlePartsDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog v-model="partsVisiable" title="添加配置" :modal-append-to-body="true" :append-to-body="true">
        <el-form ref="partsRef" :model="partsForm" :rules="rules" status-icon label-position="left" label-width="100px"
            style="width: 400px; margin-left: 50px">
            <el-form-item label="名称" prop="partGoodsName">
                <el-input v-model="partsForm.partGoodsName" />
            </el-form-item>
            <el-form-item label="品牌" prop="bomCode">
                <el-input v-model="partsForm.bomCode" />
            </el-form-item>
        </el-form>
        <template #footer class="dialog-footer">
            <el-button @click="partsVisiable = false">取消</el-button>
            <el-button type="primary" @click="handlePartsAdd">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { ref } from 'vue'

let props = defineProps({
    partsData: {
        type: Object,
        default: {}
    }
})

let emits = defineEmits(['partsChange'])

let rules = ref({
    partGoodsName: { required: true, message: '', trigger: 'blur' },
    bomCode: { required: true, message: '', trigger: 'blur' }
})

let partsRef = ref()
let partsVisiable = ref(false)
let partsForm = ref({ partGoodsName: "", bomCode: "" });

let handlePartsShow = () => {
    partsForm.value = { partGoodsName: "", bomCode: "" };
    partsVisiable.value = true;
}
let handlePartsAdd = () => {
    partsRef.value?.validate((valid: boolean) => {
        if (valid) {
            emits('partsChange', 'add', partsForm.value, props.partsData.index)
            partsVisiable.value = false;
        }
    })
}
let handlePartsDelete = (row: any) => {
    emits('partsChange', 'delete', row, props.partsData.index)
}
</script>
 
<style lang = "scss" scoped>
</style>