<script setup lang="ts">
import { onMounted, reactive, useTemplateRef } from "vue";
import { AgGridVue } from "ag-grid-vue3";
import { ElButton } from "element-plus";
import { type GridOptions } from "ag-grid-enterprise";
import { type GridApi, type GridReadyEvent } from "ag-grid-community";
import { Request } from "@ease-forge/shared";
import { localeText as localeTextCn } from "../components/yvTable/yv-aggrid-cn.locale";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";

defineOptions({
    name: 'OpenProject',
});

// 组件事件定义
const emit = defineEmits<{
    "cancel": [];
    "open": [row: any];
    "add": [expose: OpenProjectExpose];
}>();

// 定义 Props 类型
interface OpenProjectProps {
}

// 读取组件 props 属性
const props = withDefaults(defineProps<OpenProjectProps>(), {});

// 定义 State 类型
interface OpenProjectState {
    grid1Data?: Array<any>;
}

// state 属性
const state = reactive<OpenProjectState>({});

// 定义 Data 类型
interface OpenProjectData {
    gridSetting: Partial<GridOptions>;
    api?: GridApi;
}

// 内部数据
const data: OpenProjectData = {
    gridSetting: {
        localeText: localeTextCn,
        // suppressNoRowsOverlay: true,
        // suppressLoadingOverlay: true,
        // 选择行配置
        rowSelection: "single",
        columnDefs: [
            { field: 'id', headerName: 'id', editable: false, hide: true },
            { field: 'projectUuid', headerName: '项目编号', editable: false },
            { field: 'projectLabel', headerName: '项目标题', editable: false },
            { field: 'projectVersion', headerName: '项目版本', editable: false },
            { field: 'server', headerName: '所在服务器', editable: false },
            { field: 'directoryData', headerName: '目录数据', editable: false },
            { field: 'otherData', headerName: '其他数据', editable: false },
            { field: 'createAt', headerName: '创建时间', editable: false },
            { field: 'createBy', headerName: '创建人', editable: false },
            { field: 'updateAt', headerName: '最后更新时间', editable: false },
            { field: 'updateBy', headerName: '更新人', editable: false },
        ],
        onGridReady(event: GridReadyEvent) {
            data.api = event.api
        },
    },
};
const grid = useTemplateRef<InstanceType<typeof AgGridVue>>("gridRef");
onMounted(loadData);

function loadData() {
    Request.request.post("/api/workbench/LccModelManager@projectList").then(res => {
        state.grid1Data = res.records;
    });
}

function open() {
    const row = data.api?.getSelectedRows()?.[0];
    if (!row) return;
    emit("open", row);
}

function add() {
    emit("add", expose);
}

interface OpenProjectExpose {
    state: OpenProjectState;
    data: OpenProjectData;
    loadData: () => void;
}

const expose: OpenProjectExpose = {
    state,
    data,
    loadData,
};
// 定义组件公开内容
defineExpose(expose);

export type {
    OpenProjectProps,
    OpenProjectState,
}
</script>

<template>
    <div class="flex-column-container" style="height: 100%;">
        <AgGridVue
            ref="gridRef"
            :class="['ag-theme-alpine', 'yv-table', 'hi-light-selected-row','allow-vertical-line', 'flex-item-fill']"
            v-bind="{...data.gridSetting}"
            :modelValue="state.grid1Data"
        >
        </AgGridVue>
        <div class="flex-item-fixed" style="padding-top: 12px;padding-right: 12px;text-align: right;">
            <ElButton type="primary" @click="open">打开</ElButton>
            <ElButton type="primary" @click="add">新建项目</ElButton>
            <ElButton @click="emit('cancel')">取消</ElButton>
        </div>
    </div>
</template>

<style scoped>

</style>