<template>
    <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">
                <div style="overflow: auto;">
                    <iframe :ref="el => setIframeRef(el, tab.random)" :data-key="tab.key" frameborder="0"
                        style="border: none; background: none; width: 100%; height: 800px">
                    </iframe>
                    <!-- <div style="height:100px;">
                        查询结果<br>
                        查询结果<br>
                    </div> -->
                </div>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>
<script setup lang="jsx">
import settings from '@/settings'
import { ref, defineProps, reactive, defineExpose, defineEmits, onMounted, onBeforeUnmount, watch, nextTick, computed } from 'vue';
const props = defineProps({
});
const systemPrefix = settings.systemPrefix;
const activeKey = ref('');
const tabs = reactive([]);
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 iframeRefPrefix = "iframeRef";
function setIframeRef (el, random) {
    if (el) {
        el.id = `${iframeRefPrefix}${random}`;
        el.name = `${iframeRefPrefix}${random}`;
    }
}

const searchParams = [
    {
        relation_info_noDepartTreePanel: 'AAAAAA',
        rpt_date: '20231117',
        cyc_type: '06',
        cur_no: '1',
        sob_no: '10',
        sh_flag: '',
        adj_type: '',
        acc_lvl: '4',
        zero_print_yn: '01',
        exrate_type: '',
        is_gather: '',
        stdd_no: '2',
        tel_no: '1',
        dep_no: '1',
        rptDepName: '[1800000009]东华银行',
        br_no: '1',
        tab_name: 'v_gl_sub_coll_day1',
        reportNameCN: '业务状况表(年报)人民币20231117',
        reportNameEN: 'ywzkb',
        reportFileName: 'ywzkb',
        reportModuleName: 'zz',
        curName: '人民币',
        timeStamp: '币种名称',
        title_name: '业务状况表',
    }
]

const search = () => {
    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(`${iframeRefPrefix}${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);
        };
    })
}

const search2 = (formData) => {
    console.log('formData', formData);
}


defineExpose({ search, search2 });


const searchReport = async (param) => {
    //1.准备数据

}

const readyReportData = (param) => {
    const data = {

    }
}



const parseParam = (param, key) => {
    let paramStr = "";
    // 检查 param 是否是基本数据类型
    if (typeof param === 'string' || typeof param === 'number' || typeof param === 'boolean') {
        paramStr += `<input type='hidden' name='${key}' value='${param}'/>`;
    } else if (param instanceof Object) {
        // 如果是对象或数组，递归处理每个属性或元素
        Object.keys(param).forEach(i => {
            const value = param[i];
            if (value !== undefined && value !== null && value !== window) {
                const newKey = key === null || key === undefined ? i : (Array.isArray(param) ? `${key}[${i}]` : `${key}.${i}`);
                paramStr += parseParam(value, newKey);
            }
        });
    }
    return paramStr;
}
</script>
