<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="handlemainConfigShow">添加</el-button>
        </div>
        <el-table :data="mainConfigurationsData.mainConfigurationsList" border>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="brand" label="品牌" />
            <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button type="warning" size="small" @click="handlemainConfigDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

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

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

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

let emits = defineEmits(['mainConfigChange'])

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

let mainConfigRef = ref()
let mainConfigVisiable = ref(false)
let mainConfigForm = ref({ name: "", brand: "" });

let handlemainConfigShow = () => {
    mainConfigForm.value = { name: "", brand: "" };
    mainConfigVisiable.value = true;
}
let handlemainConfigAdd = () => {
    mainConfigRef.value?.validate((valid: boolean) => {
        if (valid) {
            emits('mainConfigChange', 'add', mainConfigForm.value, props.mainConfigurationsData.index)
            mainConfigVisiable.value = false;
        }
    })
}
let handlemainConfigDelete = (row: any) => {
    emits('mainConfigChange', 'delete', row, props.mainConfigurationsData.index)
}
</script>
 
<style lang = "scss" scoped>
</style>