<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="135" align="center" v-if="fieldTitle !== '详情'">
                <template #default="scope">
                    <el-space>
                        <el-popconfirm title="确认删除该明细?" @confirm="handleDelete(scope.$index)">
                            <template #reference>
                                <el-link :underline="false" type="danger">删除</el-link>
                            </template>
                        </el-popconfirm>
                        <el-divider direction="vertical" />
                        <el-dropdown>
                            <el-link :underline="false" type="primary">更多</el-link>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="moveUpward(scope.$index, scope.row)">上移</el-dropdown-item>
                                    <el-dropdown-item @click="moveDown(scope.$index, scope.row)">下移</el-dropdown-item>
                                    <el-dropdown-item @click="handleEdit(scope.$index, scope.row)">编辑</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-space>
                </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 { ElMessage } from 'element-plus';
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
}

// 上移
const moveUpward = (index: number, row: any) => {
    if (index > 0) {
        let upData = props.kingdeeFiledDetailData[index - 1];
        props.kingdeeFiledDetailData.splice(index - 1, 1);
        props.kingdeeFiledDetailData.splice(index, 0, upData);
    } else {
        ElMessage({
            message: '已经是第一条，上移失败',
            type: 'warning'
        });
    }
}

// 下移
const moveDown = (index: number, row: any) => {
    if ((index + 1) == props.kingdeeFiledDetailData.length) {
        ElMessage({
            message: '已经是最后一条，下移失败',
            type: 'warning'
        });
    } else {
        let downData = props.kingdeeFiledDetailData[index + 1];
        props.kingdeeFiledDetailData.splice(index + 1, 1);
        props.kingdeeFiledDetailData.splice(index, 0, downData);
    }
}

</script>

<style lang="scss" scoped>
::v-deep(.el-space__item) {
    margin-right: 0 !important
}
</style>