<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="handleAttributeShow">添加</el-button>
        </div>
        <el-table :data="attributeData.attributeList" border>
            <el-table-column prop="attribute" label="商品参数名称" />
            <el-table-column prop="value" 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="handleAttributeDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog v-model="attributeVisiable" title="添加商品参数">
        <el-form ref="attributeRef" :rules="rules" :model="attributeForm" status-icon label-position="left"
            label-width="120px" style="width: 400px; margin-left: 50px">
            <el-form-item label="商品参数名称" prop="attribute">
                <el-input v-model="attributeForm.attribute" />
            </el-form-item>
            <el-form-item label="商品参数值" prop="value">
                <el-input v-model="attributeForm.value" />
            </el-form-item>
        </el-form>
        <template #footer class="dialog-footer">
            <el-button @click="attributeVisiable = false">取消</el-button>
            <el-button type="primary" @click="handleAttributeAdd">确定</el-button>
        </template>
    </el-dialog>
</template>

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

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

let emits = defineEmits(['paramsChange'])

let attributeVisiable = ref(false)
let attributeRef = ref()
let attributeForm = ref({ attribute: "", value: "" });
let rules = ref({
    attribute: { required: true, message: '', trigger: 'blur' },
    value: { required: true, message: '', trigger: 'blur' }
})

let handleAttributeShow = () => {
    attributeForm.value = { attribute: "", value: "" };
    attributeVisiable.value = true;
}
let handleAttributeAdd = () => {
    attributeRef.value?.validate((valid: boolean) => {
        if (valid) {
            emits('paramsChange', 'add', attributeForm.value, props.attributeData.index)
            attributeVisiable.value = false;
        }
    })
}
let handleAttributeDelete = (row: any) => {
    emits('paramsChange', 'delete', row, props.attributeData.index)
}
</script>
 
<style lang = "scss" scoped>
</style>