<template>

    <div>
        <pro-dialog :visible="$attrs.visible" @close="$emit('close:modal')" :title="title" width="70%" :closable="true"
            :destroyOnClose="true" :maskClosable="true">
            <template v-slot:footer="">
                <pro-button id="f3dd65a2-c52b-11ea-87c3-ff36a904ecf1" @click="$emit('close:modal')"
                    :icon="h(CloseOutlined)">关闭</pro-button>
                <pro-button id="f3dd65a4-c52b-11ea-87c3-ff36a904ecf2" @click="saveHandler_d7fae64c"
                    :icon="h(SaveOutlined)">保存</pro-button>
            </template>

            <pro-form ref="formRef_a6c2da04" :model="formData_a6c2da04" :rules="formRules_a6c2da04" label-width="120px">
                <pro-form-grid :header="{ title: '基本信息' }" colNum="4">
                    <pro-input v-show="false" :ref="(el) => formRefs_a6c2da04.no = el"
                        :formItemProps="{ label: 'no', prop: 'no' }" v-model:value="formData_a6c2da04.no"
                        placeholder="请输入" :allowClear="true">
                    </pro-input>
                    <pro-input :ref="(el) => formRefs_a6c2da04.key = el" :formItemProps="{ label: '层级编号', prop: 'key' }"
                        v-model:value="formData_a6c2da04.key" placeholder="请输入" :allowClear="true"></pro-input>
                </pro-form-grid>
            </pro-form>

            <pro-form-grid :header="{ title: '层级信息' }" colNum="3">
                <div>
                    <pro-table ref="tableRef_28fa7a23" :columns="columns_28fa7a23" :dataSource="conversion">
                        <template v-slot:header="">
                            <pro-button id=" 4b7facf0-94a4-11ee-9af3-e137392c498c" text="增加一行" :icon="h(PlusOutlined)"
                                icon="plus" type="primary" @click="addRows">增加一行</pro-button>
                        </template>
                    </pro-table>
                </div>
            </pro-form-grid>
        </pro-dialog>
    </div>
</template>

<script setup lang="jsx">
import { ref, onMounted, computed, h, useAttrs, watch, reactive } from 'vue';
import settings from '@/settings';
import request from '@/utils/request';
import { useStore } from 'vuex';
import { CloseOutlined, SaveOutlined, DeleteOutlined, PlusOutlined } from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";

const store = useStore();
const formRefs_a6c2da04 = ref({
    key: "",
    name: "",
    epn: "",
    sbl: "",
    show_seqn: "",
    correct_yn: "",
    use_yn: "",
    brf: "",
    default_yn: "",
    formtype: "",
    oldKey: ""
});
const formData_a6c2da04 = ref({
    key: "",
    name: "",
    epn: "",
    sbl: "",
    show_seqn: "",
    correct_yn: "N",
    use_yn: "Y",
    brf: "",
    default_yn: "N",
    formtype: "1",
    oldKey: ""
});


onMounted(() => {
    if (formData_a6c2da04.value.name) {
        //修改
        formData_a6c2da04.value.formtype = '2';
        let oldKey = formData_a6c2da04.value.key;
        formData_a6c2da04.value.oldKey = oldKey;
    }
    formData_a6c2da04.value = store.state.departLevel.formData
});

function saveHandler_d7fae64c () {

}
function formRules_a6c2da04 () {

}

const conversion = computed(() => store.state.departLevel.conversion);
const tableRef_28fa7a23 = ref(null);

const columns_28fa7a23 = ref([
    {
        prop: "ActionColumn",
        label: "操作",
        width: "120px",
        align: "center",
        render: (scope) => {
            return <div>
                <pro-button id="userDelete" onClick={() => confirmHandler_0c5b805d(scope)} icon={h(DeleteOutlined)}>删除</pro-button>
            </div>
        }
    },
    { prop: "key", label: "层级编号", align: "center", width: "120px", editing: true },
    { prop: "name", label: "层级名称", align: "center", width: "120px", editing: true },
    { prop: "brf", label: "层级功能描述", align: "center", width: "240px", editing: true },
]);

function confirmHandler_0c5b805d (scope) {
    Modal.confirm({
        title: '删除确认',
        content: '确认删除选中的记录',
        cancelText: '删除',
        onOk () {
            // store.dispatch('CurrencyManager/deleteRows', { ...scope.record });
        }
    });
}

const addRows = () => {
    store.dispatch("departLevel/addRows", {
        name: formData_a6c2da04.value.name
    });
};

function editRow (item) {
    console.log("------------------<<editRow>>-------------------");
    item.editConfig = {
        el: "input"
    };

}
function proTableRowClick (value, row, column) {
    console.log("------------------<<handleCellClick>>-------------------");

    console.log('Cell clicked:', value, row, column);
    // 在这里处理单元格点击事件
}
function onEditCell (value, row, index, key) {
    console.log("------------------<<onEditCell>>-------------------");

    console.log('编辑的值:', value);
    console.log('当前行数据:', row);
    console.log('当前行索引:', index);
    console.log('编辑的字段:', key);
    // 在这里处理编辑事件，例如更新数据等
}
function finishEdit (item) {
    console.log("------------------<<finishEdit>>-------------------");

    item.editing = false;
    // 此处可添加其他逻辑，例如保存数据
}


const editableData = reactive({});
const edit = key => {
    console.log("------------------<<edit>>-------------------");

    editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};

const save = key => {
    console.log("------------------<<save>>-------------------");

    Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
    delete editableData[key];
};
</script>
