<template>
    <div class="app-container">
        <el-space style="margin-bottom: 20px;">
            <span style="font-size: 14px;">表单标识：</span>
            <el-input v-model="searchValue" placeholder="请输入表单标识" style="margin-right: 20px;" />
            <el-button type="primary" @click="handleScreen">筛选</el-button>
        </el-space>
        <el-button type="primary" @click="handleAdd" style="margin-bottom: 20px; display: block;">添加</el-button>
        <el-table v-loading="loading" :data="tableList" border stripe style="width: 100%">
            <el-table-column prop="formId" label="表单标识" align="center" />
            <el-table-column prop="dbTableName" label="数据库表名称" align="center" />
            <el-table-column prop="dbTableComment" label="数据库表注释" align="center" />
            <el-table-column prop="createTime" label="创建时间" align="center" />
            <el-table-column label="操作" align="center" width="155">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <!-- <el-divider direction="vertical"></el-divider>
                    <el-button link type="primary" size="small" @click="handleDetails(scope.row)">详情</el-button> -->
                    <el-divider direction="vertical"></el-divider>
                    <el-button link type="primary" size="small" @click="handleQuery(scope.row)">数据</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top: 20px">
            <el-pagination v-model:currentPage="tablePage.pageNo" v-model:page-size="tablePage.pageSize"
                :page-sizes="[10, 15, 20]" layout="->, total,sizes, prev, pager, next, jumper" :total="tablePage.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" hide-on-single-page />
        </div>
        <!-- 详情页面 -->
        <el-drawer v-model="visible" :title="title" size="80%" @close="handleClose">
            <ElDesignForm ref="jsonRef" />
            <template #footer>
                <span>
                    <el-button @click="handleClose">关闭</el-button>
                    <el-button v-if="title !== '详情'" type="primary" @click="onConfirm">确认</el-button>
                </span>
            </template>
        </el-drawer>
        <!-- 数据页面 -->
        <el-drawer v-model="dialogVisible" v-loading="loadingDialog" title="数据" size="60%" @close="handleCloseDialog">
            <el-table :data="dataList" border stripe>
                <el-table-column v-for="item in fieldList" :prop="item.key" :label="item.fieldName" width="200"
                    align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="100" fixed="right">
                    <template #default="scope">
                        <el-button link type="danger" size="small" @click="deleteData(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="margin-top: 20px">
                <el-pagination v-model:currentPage="tablePageDialog.pageNo" v-model:page-size="tablePageDialog.pageSize"
                    :page-sizes="[10, 15, 20]" layout="->, total,sizes, prev, pager, next, jumper"
                    :total="tablePageDialog.total" @size-change="handleSizeChangeDialog"
                    @current-change="handleCurrentChangeDialog" hide-on-single-page />
            </div>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { getStructureList, saveStructure, getStructureData, deleteStructure, deleteStructureData } from '@/services/api/systemApi/formConfiguration/formConfiguration'

const visible = ref(false)
const dialogVisible = ref(false)
const loading = ref(true)
const loadingDialog = ref(true)
const searchValue = ref('')
const tableList = ref()
const jsonRef = ref()
const title = ref('详情')
const structureId = ref()
const dataList = ref()
const fieldList = ref()
const formId = ref()
const dbTableName = ref()
const tablePage = ref({
    pageNo: 1,
    pageSize: 10,
    total: 0
})
const tablePageDialog = ref({
    pageNo: 1,
    pageSize: 10,
    total: 0
})

// 每页新条数
const handleSizeChange = (val: number) => {
    tablePage.value.pageSize = val
    init(searchValue.value, tablePage.value.pageNo, tablePage.value.pageSize)
};
// 新页数
const handleCurrentChange = (val: number) => {
    tablePage.value.pageNo = val
    init(searchValue.value, tablePage.value.pageNo, tablePage.value.pageSize)
};

// 每页新条数
const handleSizeChangeDialog = (val: number) => {
    tablePageDialog.value.pageSize = val
    initStructureData(formId.value, tablePageDialog.value.pageNo, tablePageDialog.value.pageSize)
};
// 新页数
const handleCurrentChangeDialog = (val: number) => {
    tablePageDialog.value.pageNo = val
    initStructureData(formId.value, tablePageDialog.value.pageNo, tablePageDialog.value.pageSize)
};

const handleScreen = () => init(searchValue.value, tablePage.value.pageNo, tablePage.value.pageSize)

const handleAdd = () => {
    title.value = '添加'
    visible.value = true
}

const handleDetails = (row: any) => {
    title.value = '详情'
    visible.value = true
    nextTick(() => jsonRef.value.detailJson(row.formJson))
}

const handleEdit = (row: any) => {
    title.value = '编辑'
    structureId.value = row.id
    visible.value = true
    nextTick(() => jsonRef.value.detailJson(row.formJson))
}

const handleQuery = (row: any) => {
    formId.value = row.formId
    dbTableName.value = row.dbTableName
    dialogVisible.value = true
    initStructureData(formId.value, tablePageDialog.value.pageNo, tablePageDialog.value.pageSize)
}

const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        '确定删除?',
        '数据',
        { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' })
        .then(() => {
            deleteStructure(row.id, row.dbTableName).then((res: any) => {
                if (res.code === 200) {
                    init(searchValue.value, tablePage.value.pageNo, tablePage.value.pageSize)
                    ElMessage({ type: 'success', message: '删除成功' })
                }
            })
        }).catch(() => { return false })
}

const deleteData = (id: any) => {
    ElMessageBox.confirm(
        '确定删除?',
        '数据',
        { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' })
        .then(() => {
            deleteStructureData(id, dbTableName.value).then((res: any) => {
                if (res.code === 200) {
                    initStructureData(formId.value, tablePageDialog.value.pageNo, tablePageDialog.value.pageSize)
                    ElMessage({ type: 'success', message: '删除成功' })
                }
            })
        }).catch(() => { return false })
}

const onConfirm = () => {
    const json = jsonRef.value.state.widgetForm
    console.log(jsonRef.value.state.widgetForm);
    
    if (title.value === '添加') {
        saveStructure(json).then((res: any) => {
            if (res.code === 200) {
                jsonRef.value.clear()
                init(searchValue.value, tablePage.value.pageNo, tablePage.value.pageSize)
                visible.value = false
                ElMessage({ type: 'success', message: '添加成功' })
            }
        })
    } else {
        // saveStructure(json, structureId.value).then((res: any) => {
        //     if (res.code === 200) {
        //         jsonRef.value.clear()
        //         init(searchValue.value, tablePage.value.pageNo, tablePage.value.pageSize)
        //         visible.value = false
        //         ElMessage({ type: 'success', message: '编辑成功' })
        //     }
        // })
    }
}

const handleClose = () => {
    jsonRef.value.clear()
    visible.value = false
}

const handleCloseDialog = () => {
    dialogVisible.value = false
    loadingDialog.value = true
    dataList.value = undefined
    fieldList.value = undefined
}

const initStructureData = (formId: string, pageNo?: number, pageSize?: number) => {
    getStructureData(formId, pageNo, pageSize).then((res: any) => {
        if (res.code === 200) {
            dataList.value = res.data.dataList
            fieldList.value = res.data.fieldList
            tablePageDialog.value.total = res.data.total
            loadingDialog.value = true
        } else {
            dataList.value = undefined
            fieldList.value = undefined
        }
    })
}

const init = (formId?: string, pageNo?: number, pageSize?: number) => {
    getStructureList(formId, pageNo, pageSize).then((res: any) => {
        if (res.code === 200) {
            loading.value = false
            tableList.value = res.data.records
            tablePage.value.total = res.data.total
        }
    })
}
init(searchValue.value, tablePage.value.pageNo, tablePage.value.pageSize)
</script>

<style lang="scss">
.fc-style {
    height: 800px;
    border: 1px solid #ccc;
}
</style>