<template>
    <div style="padding-left: 5%; margin-top: 20px;">
        <el-row justify="space-between">
            <span style="font-size: 16px; font-weight: 600; margin-bottom: 12px;">金蝶字段相关明细</span>
            <el-button type="primary" size="small" style="margin-right: 20px;"
                @click="addDetailRef.dialogVisible = true">添加明细</el-button>
        </el-row>
        <el-table :data="kingdeeFiledDetailData" border>
            <el-table-column label="金蝶字段" prop="kingdeeField" />
            <el-table-column label="是否是点编码" prop="isSpotNumber" />
            <el-table-column label="是否是点名称" prop="isSpotName" />
            <el-table-column label="是否是明细" prop="isDetailField" />
            <el-table-column label="第三方字段" prop="thirdPartyField" />
            <el-table-column label="操作" width="90" align="center">
                <template #default="scope">
                    <!-- <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> -->
                    <el-popconfirm title="Are you sure to delete this?" @confirm="handleDelete(scope.$index)">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <add-details ref="addDetailRef" @addDetails="handleDetailClick"></add-details>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import addDetails from './addDetails.vue';

const props = defineProps({
    kingdeeFiledDetailData: <any>{
        type: Object,
        default: []
    }
})
const emits = defineEmits(['detailFormValue'])
const addDetailRef = ref()
// const kingdeeFiledDetailData = ref<any>([])

// const handleEdit = (row: any) => {
//     addDetailRef.value.detailsForm = row
//     addDetailRef.value.dialogVisible = true
// }
const handleDelete = (id: number) => props.kingdeeFiledDetailData.splice(id, 1)

const handleDetailClick = (Val: any) => {
    props.kingdeeFiledDetailData.push(Val)
    console.log(props.kingdeeFiledDetailData, 'nane');
    emits('detailFormValue', props.kingdeeFiledDetailData)
}

</script>