<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="handleAdd"
                v-show="fieldTitle !== '详情'">添加明细</el-button>
        </el-row>
        <el-table :data="kingdeeFiledDetailData" border stripe>
            <el-table-column label="金蝶字段" prop="kingdeeField" />
            <el-table-column label="名称" prop="erpName" />
            <el-table-column label="类型" prop="type" />
            <el-table-column label="是否是明细" prop="isDetailField" />
            <el-table-column label="MES字段" prop="thirdPartyField" />
            <el-table-column label="名称" prop="mesName" />
            <el-table-column label="操作" width="155" align="center" v-if="fieldTitle !== '详情'">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-popconfirm title="确认删除该明细?" @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" @editDetails="handleEditDetails"></add-details>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import addDetails from './addDetails.vue';

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

const handleEdit = (index: number, row: any) => {
    detailIndex.value = index
    addDetailRef.value.detailsForm = row
    addDetailRef.value.title = '编辑明细'
    addDetailRef.value.dialogVisible = true
}
const handleAdd = () => {
    addDetailRef.value.title = '添加明细'
    addDetailRef.value.dialogVisible = true
}
const handleDelete = (id: number) => props.kingdeeFiledDetailData.splice(id, 1)

// 新增
const handleDetailClick = (Val: any) => {
    props.kingdeeFiledDetailData.push(Val)
    emits('detailFormValue', props.kingdeeFiledDetailData)
}

// 修改
const handleEditDetails = (Val: any) => {
    props.kingdeeFiledDetailData[detailIndex.value] = Val
    emits('detailFormValue', props.kingdeeFiledDetailData)
    addDetailRef.value.detailsForm = {
        kingdeeField: '',
        type: '',
        erpName: '',
        mesName: '',
        isDetailField: false,
        thirdPartyField: '',
        indexField: ''
    }
    addDetailRef.value.dialogVisible = false
}

</script>