<template>
    <div class="default-main" :style="height">
        <!-- 算法库 -->
        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <algorithmTree ref="treeRef" :default-expand-all="false"
                    :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
                    :current-node-key="monitoringPoint.state.lineId" @node-click="handleNodeClick"
                    @init="handleNodeClick" @onAddTree="onAddTree"></algorithmTree>
            </pane>
            <pane style="background: #fff" :style="height">
                <div class="boxTop">
                    <div>
                        <el-radio-group v-model="radio">
                            <el-radio-button v-for="(item, i) in dotList?.childrens" :label="item.name" :value="i" />
                        </el-radio-group>
                    </div>
                    <div v-if="information">
                        <el-button icon="el-icon-Plus" type="primary" @click="addUser">
                            新增
                        </el-button>
                        <el-button icon="el-icon-Edit" type="primary" @click="revise">修改</el-button>
                        <el-button icon="el-icon-Delete" type="primary" @click="deletes">删除</el-button>
                    </div>
                </div>

                <div :style="heightTab">
                    <vxe-table height="auto" v-bind="defaultAttribute" :data="dotList?.childrens[radio]?.children">
                        <vxe-column field="name" title="算法名称"></vxe-column>
                        <vxe-column field="createTime" title="创建时间"></vxe-column>

                        <vxe-column field="period" title="计算周期">
                            <template #default="{ row }">
                                {{
                                    row.period == 0
                                        ? '日'
                                        : row.period == 1
                                            ? '月'
                                            : row.period == 2
                                                ? '季'
                                                : row.period == 3
                                                    ? '年'
                                                    : ''
                                }}
                            </template>
                        </vxe-column>
                        <vxe-column field="source" title="数据来源"></vxe-column>
                        <!-- <vxe-column field="useFLag" title="是否启用">
                            <template #default="{ row }">
                                <el-tag :type="row.useFLag === 1 ? 'success' : 'info'" effect="dark"
                                    style="cursor: pointer" @click="change(row)">
                                    {{ row.useFLag === 1 ? '是' : '否' }}
                                </el-tag>
                            </template>
                        </vxe-column> -->
                        <vxe-column field="definition" title="定义">
                            <template #default="{ row }">

                                <el-button type="primary" link @click="view(row)">查看</el-button>
                            </template>

                        </vxe-column>
                        <!-- <vxe-column title="操作" width="150px">
                            <template #default="{ row }">
                                <el-button type="primary" link @click="edit(row)">修改</el-button>
                                <el-button type="danger" link @click="del(row)">删除</el-button>
                                <el-popconfirm title="确定删除吗？" confirm-button-type='danger'  @confirm="del(row)">
                                    <template #reference>
                                        <el-button type="danger" link>删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </vxe-column> -->
                    </vxe-table>
                </div>
            </pane>
        </splitpanes>
        <!-- 树弹框 -->
        <addTree ref="addTreeRef" @getTree="treeRef.loadData(dotList.id)" />
        <!-- 弹框 -->
        <PopupEdit ref="popupEditRef" v-if="popupEditFlag"
            @getTree="treeRef.loadData(dotList.id), (popupEditFlag = false)" />
        <!-- 定义 -->
        <el-dialog draggable v-model="viewFlag" title="定义" width="60%">
            <div style="min-height: 300px; max-height: 55vh;">
                <div class="editor" ref="editorRef" v-html="summary" />

            </div>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog draggable v-model="dialogVisible" title="请选择需要删除的数据" width="400">
            <el-tree-select v-model="TreeValue" :data="TreeData" filterable check-strictly :props="defaultProps"
                default-expand-all :render-after-expand="false" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="del">删除</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import algorithmTree from '@/components/tree/pqs/algorithmTree.vue'
import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
import addTree from './components/addTree.vue'
import PopupEdit from './components/form.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteyById } from '@/api/supervision-boot/database/index'
import { queryAllAlgorithmLibrary, updateAlgorithmLibrary } from '@/api/supervision-boot/database/index'
import { useAdminInfo } from '@/stores/adminInfo'
import katex from "katex";
import "katex/dist/katex.css";
const adminInfo = useAdminInfo()
defineOptions({
    name: 'database/algorithm'
})
const monitoringPoint = useMonitoringPoint()
const height = mainHeight(20)
const heightTab = mainHeight(82)
const size = ref(0)
const addTreeRef = ref()
const editorRef = ref()
const dialogVisible = ref(false)
const viewFlag = ref(false)
const popupEditFlag = ref(false)
const treeRef = ref()
const summary = ref('')
const popupEditRef = ref()
const TreeData = ref([])
const TreeValue = ref([])
const information = adminInfo.roleCode.includes('information_info')

const defaultProps = {
    label: 'name',
    value: 'id'
}
const dotList: any = ref()

const templatePolicy: any = ref([])
// const tableStore = new TableStore({
//     url: '/supervision-boot/libalgorithm/queryAllAlgorithmLibrary',
//     method: 'GET',
//     column: [
//         { title: '算法名称', field: 'name' },
//         {
//             title: '定义',
//             field: 'name1'
//         },
//         {
//             title: '计算公式',
//             field: 'name2'
//         },
//         {
//             title: '计算周期',
//             field: 'name3'
//         },
//         {
//             title: '数据来源',
//             field: 'name4'
//         },
//         {
//             title: '是否启用',
//             field: 'name5',
//             render: 'tag',
//             effect: 'dark',
//             custom: {
//                 0: 'info',
//                 1: 'success'
//             },
//             replaceValue: {
//                 0: '否',
//                 1: '是'
//             }
//         }
//     ],
//     loadCallback: () => {}
// })
const radio = ref(0)

// 新增弹框
const addUser = () => {
    popupEditFlag.value = true
    setTimeout(() => {
        popupEditRef.value.open({
            title: '新增算法'
        })
    }, 100)
}
// 修改弹框
const revise = () => {
    popupEditFlag.value = true
    setTimeout(() => {
        popupEditRef.value.open({
            title: '修改算法',
            row: dotList.value
        })
    }, 100)
}

onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 120)
    }
    // tableStore.index()
})

const view = (row: any) => {

    viewFlag.value = true
    summary.value = row.definition
    setTimeout(() => {

        const spans = document.querySelectorAll('span[data-value]');
        // 遍历每个 span 标签  
        spans.forEach(function (span) {

            let val = katex.renderToString(span.getAttribute('data-value'), {
                throwOnError: false,
            })
            // var newDiv = document.createElement('div');
            var newDiv = span
            newDiv.innerHTML = val;

            span.parentNode.replaceChild(newDiv, span);
        });

    }, 100)

    // 
}


const handleNodeClick = (data: any, node: any) => {
    if (data.pid != '0') {
        dotList.value = data
        radio.value = 0
    }
}
const onAddTree = () => {
    addTreeRef.value.open('新增')
}
const deletes = () => {
    TreeValue.value = []
    queryAllAlgorithmLibrary().then(res => {
        TreeData.value = res.data
    })
    dialogVisible.value = true
}
// 删除
const del = () => {
    if (TreeValue.value.length == 0) {
        return ElMessage.warning('请选择数据')
    }
    ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        deleteyById({ id: TreeValue.value }).then(res => {
            ElMessage.success('删除成功')
            dialogVisible.value = false
            treeRef.value.loadData()
        })
    })

    // if (TreeValue.value.length > 0) {
    //     ElMessage.warning('请选择数据')
    //     return
    // }
}
// 启用
const change = (row: any) => {
    console.log('🚀 ~ change ~ row:', row)
    ElMessageBox.confirm(`请确认是否${row.useFLag == 0 ? '启用' : '关闭'}算法?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        updateAlgorithmLibrary({ ...row, useFLag: row.useFLag == 0 ? 1 : 0 }).then(res => {
            ElMessage.success(row.useFLag == 0 ? '启用' : '关闭' + '成功')
            treeRef.value.loadData(dotList.value.id)
        })
    })
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}

.grid-content {
    text-align: center;
}

.el-divider--horizontal {
    margin: 10px 0;
}

.mTop {
    margin-top: 5px;
    margin-bottom: 5px;
}

.boxTop {
    height: 52px;
    padding: 10px 10px 10px 0;
    display: flex;
    justify-content: space-between;
}

.editor {
    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    td {
        background-color: #ffffff;
    }
}
</style>
