<template>
    <a-layout style="height: 100vh;">
        <a-layout-sider ref="sider" :width="siderWidth"
            style="background-color: #fff; overflow: auto; white-space: nowrap;">
            <div v-if="showSider">
                <div class="sider-header">
                    <div class="sider-header-title" style="display:inline-block;  vertical-align: middle;">机构树面板</div>
                    <div class="sider-header-tool" style="display:inline-block;  vertical-align: middle;  ">
                        <DoubleLeftOutlined @click="toggleSider" />
                    </div>
                </div>
                <DepartTreePanel1 ref="departTreePanel"></DepartTreePanel1>
            </div>
            <div v-else>
                <DoubleRightOutlined @click="toggleSider" />
            </div>
        </a-layout-sider>
        <div class="resizer-vertical" @mousedown="startHorizontalResize" @touchstart="startHorizontalResize"
            style="cursor: col-resize; background-color: #ccc; width: 5px;"></div>
        <a-layout>
            <a-layout-header :style="{ flex: '0 0 ' + headerHeight + 'px', padding: 0, backgroundColor: '#fff', }"
                style="overflow: auto;">
                <!-- <a-layout-header :style="{ height: 500 + 'px', padding: 0, backgroundColor: '#fff', }"> -->

                <div v-if="showHeader">
                    <div class="sider-header">
                        <div class="sider-header-title" style="display:inline-block;  vertical-align: middle;">报表查询
                        </div>
                        <div class="sider-header-tool" style="display:inline-block;  vertical-align: middle;  ">
                            <DoubleLeftOutlined @click="toggleHeader" rotate=90 />
                        </div>
                    </div>
                    <div>
                        <pro-form-grid>
                            <pro-input :formItemProps="{ label: '制表日期', prop: 'levelKey' }" placeholder="请输入层级编号"
                                :allowClear="true">
                            </pro-input>
                            <pro-select :formItemProps="{ label: '周期类型', prop: 'useYn' }" placeholder="请选择启用标志"
                                :allowClear="true">
                            </pro-select>
                            <pro-select :formItemProps="{ label: '币种', prop: 'useYn' }" placeholder="请选择启用标志"
                                :allowClear="true">
                            </pro-select>
                            <pro-select :formItemProps="{ label: '账套', prop: 'useYn' }" placeholder="请选择启用标志"
                                :allowClear="true">
                            </pro-select>
                            <pro-select :formItemProps="{ label: '损益上划', prop: 'useYn' }" placeholder="请选择启用标志"
                                :allowClear="true">
                            </pro-select>
                            <pro-select :formItemProps="{ label: '报表调整类型', prop: 'useYn' }" placeholder="请选择启用标志"
                                :allowClear="true">
                            </pro-select>
                            <!-- <pro-select :formItemProps="{ label: '科目级别', prop: 'useYn' }" placeholder="请选择启用标志"
                            :allowClear="true">
                        </pro-select>
                        <pro-select :formItemProps="{ label: '零余额是否打印', prop: 'useYn' }" placeholder="请选择启用标志"
                            :allowClear="true">
                        </pro-select> -->
                        </pro-form-grid>
                        <pro-form-item>
                            <pro-button id="queryBtn" @click="fetchReport" :icon="h(SearchOutlined)">查询</pro-button>
                        </pro-form-item>
                    </div>
                </div>
                <div v-else class="sider-header">
                    <div class="sider-header-title" style="display:inline-block;  vertical-align: middle;">
                    </div>
                    <div class="sider-header-tool" style="display:inline-block;  vertical-align: middle;  ">
                        <DoubleRightOutlined @click="toggleHeader" rotate=90 />
                    </div>
                </div>
            </a-layout-header>
            <div class="resizer-horizontal" @mousedown="startVerticalResize" @touchstart="startVerticalResize"
                style="cursor: row-resize; background-color: #ccc; height: 5px;"></div>
            <a-layout>
                <a-layout-content style="height: 100%; background-color: #fff; overflow: auto;">
                    <!-- <a-layout-content style=" background-color: #deb887; overflow: auto; white-space: nowrap;">
                    -->
                    <!--遮罩层-->
                    <div v-if="dragging" style="  width: 100%; height: 100%;  background: blue; display: block;">
                    </div>
                    <a-tabs :size="'small'" v-model:activeKey="activeKey" type="editable-card" @edit="handleTabEdit"
                        :hideAdd="true">
                        <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.title" :closable="tab.closable">
                            <iframe :ref="el => setIframeRef(el, tab.random)" :data-key="tab.key" frameborder="0"
                                style="border: none; background: none; width: 100%; height: 400px">
                            </iframe>
                        </a-tab-pane>
                    </a-tabs>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script setup lang="jsx">
import { ref, watch, h, computed, onMounted, nextTick, reactive, onBeforeUnmount } from 'vue';
import { DoubleRightOutlined, DoubleLeftOutlined, SearchOutlined } from "@ant-design/icons-vue";
import DepartTreePanel1 from './components/DepartTreePanel1.vue'
const dragging = ref(false);
// 查询结果
const tabs = reactive([]);
const activeKey = ref('');

onMounted(() => {
    window.REPORT = {
        queryAccordAccNOGetLogs: (data) => {
            // 在这里实现具体的业务逻辑
            console.log("Data received:", data);
            // 可以在这里调用其他方法或发送 AJAX 请求处理数据
        },
        // 可以继续添加其他方法
    };
});

onBeforeUnmount(() => {
    // 组件销毁前移除 REPORT 对象，避免内存泄漏
    delete window.REPORT;
});

function fetchReport () {
    const data = {
        reportNameCN: '业务状况表',
        rpt_date: '20231117',
        cyc_type: '06',
    }
    const random = Math.random().toString().split('.')[1];
    const divId = `report_result_div${random}`;
    // Add a new tab
    const newTab = {
        title: data.reportNameCN,
        key: divId,
        closable: true,
        random: random
    };
    tabs.push(newTab);
    activeKey.value = divId;
    nextTick(() => {
        // const iframe = document.getElementById('reportIframe');
        const iframe = document.getElementById(`report_result_iframe${random}`);


        let url = '/zz-pack/report/query/zz/ywzkb'
        let html = '<form action="' + url + '" method="post" target="_self" id="postData_form_newZcfzb">' +
            '<input  name="relation_info_noDepartTreePanel" type="hidden" value="AAAAAA"/>' +
            '<input  name="rpt_date" type="hidden" value="20231117"/>' +
            '<input  name="cyc_type" type="hidden" value="06"/>' +
            '<input  name="cur_no" type="hidden" value="1"/>' +
            '<input  name="sob_no" type="hidden" value="10"/>' +
            '<input  name="sh_flag" type="hidden" value=""/>' +
            '<input  name="adj_type" type="hidden" value=""/>' +
            '<input  name="acc_lvl" type="hidden" value="4"/>' +
            '<input  name="zero_print_yn" type="hidden" value="01"/>' +
            '<input  name="exrate_type" type="hidden" value=""/>' +
            '<input  name="is_gather" type="hidden" value=""/>' +
            '<input  name="stdd_no" type="hidden" value="2"/>' +
            '<input  name="tel_no" type="hidden" value="1"/>' +
            '<input  name="dep_no" type="hidden" value="1"/>' +
            '<input  name="rptDepName" type="hidden" value="[1800000009]东华银行"/>' +
            '<input  name="br_no" type="hidden" value="1"/>' +
            '<input  name="tab_name" type="hidden" value="v_gl_sub_coll_day1"/>' +
            '<input  name="reportNameCN" type="hidden" value="业务状况表(年报)人民币20231117"/>' +
            '<input  name="reportNameEN" type="hidden" value="ywzkb"/>' +
            '<input  name="reportFileName" type="hidden" value="ywzkb"/>' +
            '<input  name="title_name" type="hidden" value="业务状况表"/>' +
            '<input  name="reportModuleName" type="hidden" value="zz"/>' +
            '<input  name="curName" type="hidden" value="人民币"/>' +
            '<input  name="timeStamp" type="hidden" value="币种名称"/>' +
            '<input  name="zero_print_ynSql" type="hidden" value=""/>' +
            '</form>';
        iframe.contentWindow.document.write(html);
        iframe.contentWindow.document.getElementById('postData_form_newZcfzb').submit();
        iframe.onload = () => {
            console.log('iframe loaded', random);

        };
    })
}


function setIframeRef (el, random) {
    if (el) {
        el.name = `report_result_iframe${random}`;
        el.id = `report_result_iframe${random}`;
    }
}

function handleTabEdit (targetKey, action) {
    if (action === 'remove') {
        const index = tabs.findIndex(tab => tab.key === targetKey);
        if (index !== -1) {
            tabs.splice(index, 1);
            // 关闭当前标签页后,默认选中第一个标签页
            if (tabs.length > 0) {
                activeKey.value = tabs[0].key;
            } else {
                activeKey.value = null;
            }
        }
    }
}

const siderWidth = ref(290);//左布局初始宽度
const headerHeight = ref(220);//顶部布局初始高度

const startX = ref(0);
const startY = ref(0);
const startWidth = ref(0);
const startHeight = ref(0);

function startHorizontalResize (event) {
    dragging.value = true;
    startX.value = event.clientX;
    startWidth.value = siderWidth.value;
    document.addEventListener('mousemove', onHorizontalMouseMove);
    document.addEventListener('mouseup', stopHorizontalResize);
}

function onHorizontalMouseMove (event) {
    const currentX = event.clientX;
    const diffX = currentX - startX.value;
    siderWidth.value = Math.max(startWidth.value + diffX, 0);
}

function stopHorizontalResize () {
    dragging.value = false;
    document.removeEventListener('mousemove', onHorizontalMouseMove);
    document.removeEventListener('mouseup', stopHorizontalResize);
}

function startVerticalResize (event) {
    startY.value = event.clientY;
    startHeight.value = headerHeight.value;
    document.addEventListener('mousemove', onVerticalMouseMove);
    document.addEventListener('mouseup', stopVerticalResize);
}

function onVerticalMouseMove (event) {
    const currentY = event.clientY;
    const diffY = currentY - startY.value;
    headerHeight.value = Math.max(startHeight.value + diffY, 0);
}

function stopVerticalResize () {
    document.removeEventListener('mousemove', onVerticalMouseMove);
    document.removeEventListener('mouseup', stopVerticalResize);
}

// 左侧布局显示隐藏
const showSider = ref(true);
const showHeader = ref(true);
function toggleSider () {
    if (showSider.value) {
        siderWidth.value = 15;
    } else {
        siderWidth.value = 290;
    }
    showSider.value = !showSider.value;
}

function toggleHeader () {
    if (showHeader.value) {
        headerHeight.value = 30;
    } else {
        headerHeight.value = 220;
    }
    showHeader.value = !showHeader.value;
}


</script>

<style>
.resizer-vertical {
    user-select: none;
}

.resizer-horizontal {
    user-select: none;
}


.sider-header {
    height: 34px;
    line-height: 34px;
    border: 0;
    background-color: #1890ff;
    padding: 0 14px;
    margin: 2px 0;
    display: flex;
    position: relative;
}

.sider-header-title {
    height: 34px;
    line-height: 34px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

.sider-header-tool {
    right: 10px;
    width: auto;
    position: absolute;
    top: 50%;
    margin-top: -17px;
    overflow: hidden;
}
</style>
